Published on | Prototyping: From UX to Front End — Medium Helen Pan

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:

Make it easy for shoppers to find items that are customizable
Allow for customers to see what types of customizations are available for an item
Create a way for sellers to specify what is customizable, and to indicate expected shipping times.

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…

Tell me about the last time you purchased/sold a customized item on Etsy.

What types of customization requests do you accept/search for?

How do customization requests impact your timeline?

Tell me about the communication between you and the seller/buyer

…Along with a few key quotes.

“It doesn’t affect my timeline”

“We designed it together within 4 days”

“Special instructions go in description box”

“I had to message about further detail”

“I wish I had the option to visually confirm what I’m getting from the seller”

Synthesis

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:

Sellers want to be discovered just as much as buyers want to discover them
Buyers and sellers can only find out about an item’s customization offerings in the bio
Buyers and Sellers like using the existing Etsy messenger feature, but often don’t have a way to easily share visual confirmation

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.

Our team utilized these personas to maintain a user-centered approach to our design.

Meet Liz, the Etsy Shopper.

Our team utilized these personas to maintain a user-centered approach to our design.

The Problem

Etsy users need a better way to communicate customizations for a more efficient transactional experience.

Ideate and Design

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:

Three rounds of design studio

After our design studio sessions, we took the best ideas generated, and finalized our sketches:

1. Buyer and Seller Flow 2. Seller customizing 3. Messaging frames

Alongside, we also created our initial user flow diagram:

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.

Examples of mid-fi wireframes

Prototyping and Validation

View Mid-Fi Sell on Etsy Prototype

View Hi-Fi Shop on Etsy Prototype

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

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.

On the left, instruction screens for the hotspotting process, and on the right, the actual

Here are the iterations of the naming process:

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.

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

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.

Version 1Version 2

Lastly, we iterated on the customization summary page that automatically comes up when the user is done customizing.

All of these iterations slightly impacted our user flow diagram, which we found necessary to update:

User Flow Diagram based on iterations

KPIs and Metrics

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.

Round 1: average 2.5 (5 users)
Round 2: average 2.2 (5 users)
Round 3: average 1.5 (6 users)

Reflection & Next Steps

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.

Thanks for reading! Get in touch: helenpan18@gmail.com, jacobvenditto@gmail.com, julia.cohen7@gmail.com, ashleymonaco012@gmail.com

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

Etsy: Enhancing the Customization Experience was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Etsy: Enhancing the Customization Experience

Cool stuff, every week

More Articles