Published on <a href="https://blog.prototypr.io/etsy-enhancing-the-customization-experience-5a04c91a6b94?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Helen Pan <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*7lw7HTFbjGlwqfZztl6Q6Q.png">
Disclaimer: This case study is entirely independent of Etsy, and was conducted as a student project case study. Further, all research, images, and designs used herein were created in collaboration with Julia Cohen, Jacob Venditto, and Ashley Monaco (as well as Etsy branded graphics pulled directly from Etsy.com).
For over 10 years, the e-commerce shop Etsy has taken over the global marketplace for unique and creative goods, connecting millions of buyers with Etsy sellers. Of the special, handmade goods sold, a majority of them offer personalization or customizing options. However, to this day, communicating customization preferences to the seller is a tedious and complicated process that involves back and forth messaging and a lack of visual confirmation.
My Role
I was part of an ambitious case study to redesign the customization experience for buyers and sellers. I worked alongside three other designers, and we each performed user research, ideated as a group, conducted usability tests, as well as collaborated on the creation of the wireframes and prototypes.
Project Overview:
10 days, 75 hours
Initial Problem Statement
Our high level goals were to:
<ol>
<li>Make it easy for shoppers to find items that are customizable</li>
<li>Allow for customers to see what types of customizations are available for an item</li>
<li>Create a way for sellers to specify what is customizable, and to indicate expected shipping times.</li>
</ol>
At the outset of the project, we didn’t have a clear idea of what Etsy currently offers in terms of customization for their users, so we sent out a screener survey in order to conduct user interviews for further insights. Our screener survey received 20 responses in the first evening, and of those responses, we chose to interview eight users: four Etsy sellers, and four Etsy buyers. Our questions didn’t really change at any point in our process, however, we wanted to focus more on the customization experience.
A few key questions asked…
<blockquote>Tell me about the last time you purchased/sold a customized item on Etsy.</blockquote>
<blockquote>What types of customization requests do you accept/search for?</blockquote>
<blockquote>How do customization requests impact your timeline?</blockquote>
<blockquote>Tell me about the communication between you and the seller/buyer</blockquote>
…Along with a few key quotes.
<blockquote>“It doesn’t affect my timeline”</blockquote>
<blockquote>“We designed it together within 4 days”</blockquote>
<blockquote>“Special instructions go in description box”</blockquote>
<blockquote>“I had to message about further detail”</blockquote>
<blockquote>“I wish I had the option to visually confirm what I’m getting from the seller”</blockquote>
<h3>Synthesis</h3>
Through a process called Affinity Mapping, where we take our information from our user interviews and organize them into groupings based on their natural relationships, we narrowed our research findings into three main categories:
<ul>
<li>Sellers want to be discovered just as much as buyers want to discover them</li>
<li>Buyers and sellers can only find out about an item’s customization offerings in the bio</li>
<li>Buyers and Sellers like using the existing Etsy messenger feature, but often don’t have a way to easily share visual confirmation</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*1gcXHB56nArLGL02F6GtGQ.png">Affinity Map
Persona Hypothesis
In order to maintain a user-centered approach to our design, our team developed two different archetypes which we used to facilitate discussions about our users needs and goals.
Meet Natasha, the Etsy Seller.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*PCc8PRyCsX0ovBEWabeApQ.png">Our team utilized these personas to maintain a user-centered approach to our design.
Meet Liz, the Etsy Shopper.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*OgE1qIad90kZ6xEo1ML06w.png">Our team utilized these personas to maintain a user-centered approach to our design.
<h3>The Problem</h3>
Etsy users need a better way to communicate customizations for a more efficient transactional experience.
<h3>Ideate and Design</h3>
We kicked off our ideating stage with three design studios, where we silently generate our own design ideas for five minutes, and critique each others for a minute each. We performed 3 design studios, with the results below:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*-w5-ctLNJmmlD-hen4MlWQ.jpeg"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*0Vq6ibIWzchVrMZ5oiF3FA.jpeg"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*FJukXj8OVMOxhnkBqd5wcw.jpeg">Three rounds of design studio
After our design studio sessions, we took the best ideas generated, and finalized our sketches:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*XXh3nJ0TSam0Ryb-CBACEw.jpeg"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*XV5p_s5oPEskHnmYTVizHA.jpeg"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*qhY7MnZOSWT-H1xYyPFnkQ.jpeg">1. Buyer and Seller Flow 2. Seller customizing 3. Messaging frames
Alongside, we also created our initial user flow diagram:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*v7ZNo6mOrfCTB9UFaCeOgg.png">Initial User Flow Diagram
Wireframes
Lastly, we moved on to wireframing our sketches within Sketch, where we initally utilized much of Etsy’s existing UI.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*jGuFjS1WQXTGF3w2MEGJ8Q.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*W8ab4MnF1d92IXLVLUPclQ.png">Examples of mid-fi wireframes
<h3>Prototyping and Validation</h3>
<a href="https://projects.invisionapp.com/share/NEFMEO2GMXV#/screens">View Mid-Fi Sell on Etsy Prototype</a>
<a href="https://projects.invisionapp.com/share/73FN83PCNJF#/screens">View Hi-Fi Shop on Etsy Prototype</a>
Click above links to view prototypes within InVision
We conducted 13 usability tests, over three rounds of testing. Our wireframes served as our first prototype, on which we iterated two more times. We set out to discover whether or not users could complete the tasks and be happy or satisfied with the upload/buying process.
In order to show the iterations between versions, we deemed it appropriate to show side by side changes, with usability test takeaways noted in orange call out boxes. The unhighlighted boxes call out specific design choices related to our research findings.
Our tasks were as follows:
Sell on Etsy
Task 1: add a new customizable listing and import the photo
Task 2 : add customization options using the smart photo tool
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*NWn2oCBzkBYQGvecdBvqaQ.png">Orange highlighted boxes indicate usability test takeaways, while the unhighlighted boxes show design choices.
To the left are the iterations for the initial setup for a customizable listing. In version 1, users were confused on what the first step was to make a customized listing. Version 2 and 3 remained similar, with Version 3 adding a “1” to indicate uploading a photo was the first step.
Below are the iterations of the hotspot screens along with their instructions. By version 3, everything had been simplified down to one single tap.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*UNe06iZzj__sybO64OlFfA.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*TtbmBpvc7s7j_74D5mxcpA.png">On the left, instruction screens for the hotspotting process, and on the right, the actual
Here are the iterations of the naming process:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*oD_bTedaStr2oWEvkQ4T5w.png">
And lastly, we iterated on the process of naming/adding variations and the options that go with the variations. For example, a variation could be the color of the straps, with blue, black, and brown as options. We had them on two different screens, when they could really be combined into one.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*rP4lQ1TPuabFFfNRPEOGMA.png">
Our tasks and iterations for the shopper were as follows:
Shop on Etsy
Task 1: search for a customized bag
Task 2: customize a bag and add it to your shopping cart
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*1HQRPgse1CiG4YwuAypU8A.png">
To the left we iterated on the search/filter for customized options. Initially, we thought users would want to have a level of customization to choose from (i.e. made from scratch to no customizing allowed), however, we found that it only served as a point of confusion for our users.
Below we also iterated on the customization selection process, where users had pointed out in version 1 that there was no indication that they had entered a customizing page, and there was also too much scrolling to be done.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*KItIvodVrUXqRSwqb9pMTg.png">Version 1<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Ad_y3q1SEkIPknKftBkarA.png">Version 2
Lastly, we iterated on the customization summary page that automatically comes up when the user is done customizing.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*WLW45lDRdKb9NnrJqW8IUQ.png">
All of these iterations slightly impacted our user flow diagram, which we found necessary to update:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Ym4gce-jWQTTFbK_3O0M5g.jpeg">User Flow Diagram based on iterations
<h3>KPIs and Metrics</h3>
In order to assess the improvement of our iterations, we used a satisfaction rating (1 — extremely happy/satisfied to 5 — not happy/satisfied) as a key performance indicator after each of our testings.
<ul>
<li>Round 1: average 2.5 (5 users)</li>
<li>Round 2: average 2.2 (5 users)</li>
<li>Round 3: average 1.5 (6 users)</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*A4jGijSzLRmSZbyuBf6uCQ.png">
<h3>Reflection &amp; Next Steps</h3>
After our first usability test, our team underwent a significant change in our visual experience of the wireframes and user flow. Our original designs were based around the existing Etsy mobile app, but we immediately realized that a simpler, more visual experience was increasingly effective.
Looking forward, our team would also like to explore how both “Sell on Etsy” and “Shop on Etsy” could be combined into one app experience.
<blockquote>Thanks for reading! Get in touch: helenpan18@gmail.com, jacobvenditto@gmail.com, julia.cohen7@gmail.com, ashleymonaco012@gmail.com</blockquote>
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=5a04c91a6b94" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/etsy-enhancing-the-customization-experience-5a04c91a6b94">Etsy: Enhancing the Customization Experience</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Etsy: Enhancing the Customization Experience

Top Stories