Published on <a href="https://blog.prototypr.io/etsy-feature-addition-case-study-f958b828f1be?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Lauren Bachand <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*51ArOPuwWiyp4BEUjhakSA.jpeg">
<h4>Overview</h4>
Etsy provides a place for makers to sell their goods and reach a large audience. There are many talented individuals who are specially skilled in certain areas. Customers can search for the items they’re looking for, but sometimes they have a product in their mind that they’d like created for them. Etsy would like to create a feature that allows customers to post a product request and receive quotes from artisans.
<h4>About the Project</h4>
Project Duration: 2 weeks Project Type: App feature addition, General Assembly student team project Focus: Research, Information Architecture, Design, Prototyping Software: Sketch, InVision, Illustrator
<h4>Solution</h4>
A feature addition called “Etsy Custom”.
<h4>Research</h4>
To begin this project, my team and I first needed to establish the scope of the project, keeping in mind that we were “shipping” an MVP and that this feature would require many components that we would not be involved in. We decided to primarily focus on the consumer side, but we realized that we needed to design with the artist in view, as these were two equal pieces of the puzzle.
To conduct research, we started with 2 google surveys: one for the artist and one for the consumer. Our artist surveys proved to be valuable in getting inside the artist’s process and figuring out what information is helpful when fulfilling a commission.
We asked: 1. Have you ever stepped out of a commission? Why? How often? 2. Whenever people commission artwork from you do they bring reference images? How often? 3. What is your policy if people don’t want the artwork after it’s been made? 4. Is there any reason why you wouldn’t take a commission? 5. What is the most difficult part of processing a commission request? 6. What information do you need from the client before accepting a commission?
My team worked together to produce the questions and we sent it out to our social networks. Some of my team members also talked to artists directly in order to get a better understanding of their needs.
We then researched Etsy’s user demographic in order to get a better idea of who our consumer was. This information, combined with our customer survey, yielded our persona, named Marissa. I designed this persona sheet based upon our information:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*x0VeyjgWbWCFvZFxJDvfiw.jpeg">
In doing some initial competitor research, we found that the existing market was not at all saturated, and considering that Etsy already has a substantial user base, it seemed safe to hypothesize that this feature would be useful to consumers, and even had the possibility of drawing more users to Etsy.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*j-MlNJ5wYjSiWz48Rt7OCA.png">A screenshot taken from custommade.com that gave me some inspiration
We also downloaded Etsy’s two existing apps: Etsy has a shopping app and a selling app. We realized right away that there were strengths and weaknesses to Etsy’s existing user experience, but we wanted to stay in line with their brand as much as possible, integrating Custom seamlessly.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ZZJS5w4eSJ0FLEBYh7Rkeg.png">Style sheet, created by Paige
<h4>Planning</h4>
We began to brainstorm the flow of the feature. We wanted to make sure the input process was simple and straightforward, and that the user wouldn’t get bogged down by a huge form, but at the same time that the artist would be provided with enough valuable information to produce a quality product.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*GKtP0d-ilrUhMdUpA8RuiA.jpeg">OG site map
As we started to create a cohesive flow, we realized that we needed to look to the existing Etsy selling app. Originally, our flow was very linear, taking the user through each step before reviewing their information at the end. After exploring the Etsy Sell app, however, we ended up changing to reflect the existing app, which takes users back to the “in progress” page (shown below) after completing each field. Their flow is simple and efficient, 2 qualities we were aiming for, and we were happy to use it as our inspiration.
<img alt="" src="https://cdn-images-1.medium.com/max/394/1*u0gn48nvlS2t1QvZafhtXQ.jpeg">
We also thought about from where the user would access the “Custom” feature. After much deliberation, we decided to move the “Favorites” icon up to the browse section, and replace it with “Custom”. I pushed for this idea because I thought it would be the simplest solution, as the bottom menu would be too crowded if we added another icon, and “favorites” is a collection of what you’ve browsed, so it seemed to belong in browse.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*BC-_UlZLnmJOfCpXs7zsHg.jpeg">Where does the feature go??
I created the “Custom” icon in illustrator and integrated it into the bottom menu.
<img alt="" src="https://cdn-images-1.medium.com/max/490/1*wS-F1o_PyVK44lzHw6IkTQ.png">
<h4>Design &amp; testing</h4>
We began our sketching process with a Design Studio. We decided which feature to brainstorm and spent 5 minutes individually sketching out ideas, and then critiquing and discussing each one. This was a very useful and efficient process that I would like to implement in future projects. The results were a “Frankenstein” of all of our best ideas with each team member contributing something of importance.
<img alt="" src="https://cdn-images-1.medium.com/max/700/1*ZYJHvy1Ecxt1O-jSAIXyfA.jpeg"><img alt="" src="https://cdn-images-1.medium.com/max/525/1*AOhP1NF2VzY1ENvCmU1xKQ.jpeg"><img alt="" src="https://cdn-images-1.medium.com/max/525/1*n4qjl-yue61MHPezLkwicQ.jpeg"><img alt="" src="https://cdn-images-1.medium.com/max/525/1*lQ2-xOxHrAy1bvPQHPXj6w.jpeg">Some of our whiteboards
A few design problems to highlight:
Problem #1: Language and voice. We knew that we wanted to match Etsy’s voice which tends to talk to the user, but we didn’t know what to do with our call-to-action button. Some early ideas:
Make Me This
Make a Commission
Build a Custom Item
Build a Commission
After much consideration and user testing, we went with “Build a Custom Item” because users seemed to be confused by the word “commission”, and we wanted to evoke the feeling that they were involved in the creation process.
Problem #2: How do users pick pictures? We looked to popular social media apps for ideas, and we liked the way that Twitter brings the camera roll up, but we decided to stay true to the Etsy Sell app which brings up a modal, giving you the option to choose from camera roll or to take a picture.
Problem #3: As I mentioned earlier, we ended up streamlining the flow similar to the Etsy Sell app, instead of our original linear flow. We wanted the form to be simple, straightforward, even delightful to use (good forms are something that give me personal joy).
I then translated our sketches to Sketch.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*R2nO1za3tgrw1W8uwm74_w.png">
Next, we printed the wireframes and user tested them. This was an extremely useful exercise and many iterations were born from it:
1. We discovered that our price scale was confusing for people and that the bottom price wasn’t useful, even though some people liked it. The price scale was something that we had thought a lot about, it was an exercise in remembering that the user is always right and that we are not our user. We ended up going with a simple entry form.
2. We originally had a system for “tagging” photos, which allowed the user to tell the artist exactly what they liked about the thing, but we discovered that this was confusing for people. Since we had a comment section, we decided to scrap the idea altogether, maybe considering bringing it back in future iterations.
3. We realized that we needed to iterate on our flow and adjust language in some places, especially buttons
4. Small details that had been overlooked were easily discovered. I think there might be something special about looking at something on paper instead of on the screen.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*NdK30e5AuqXWkEUx1jWq2Q.jpeg">
Finally, UI was perfected and we had a final prototype in InVision.
Our final prototype:
<a href="https://invis.io/WFCIWA9GS">Click here to view the project `P3`</a>
After presentation day, the team got together to discuss future interactions. One thing that I thought would be important was an onboarding screen, something like this:
<img alt="" src="https://cdn-images-1.medium.com/max/375/1*Ve7vj-CsPJDl8s6gEcUTNA.png">
We also realized that we needed to rework our messaging system. Instead of sending the messages to do a “conversations” tab, it would be easier for the user if they were on the same page as the bids, that way they could view the conversation in the context of the bid, and make informed decisions when choosing an artist.
Overall, we felt pretty good about the project and our process working as a team. Thanks for reading my second UX design case study! As always, I welcome any and all feedback.
You can find me on twitter <a href="https://medium.com/u/66e93f8a4989">Lauren Bachand</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=f958b828f1be" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/etsy-feature-addition-case-study-f958b828f1be">Etsy Feature Addition: case study</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 Feature Addition: case study

Overview

Top Stories