Etsy - Custom Design
Overview
Project Name - Etsy Custom Design
Team - Jared Miller, Omri Nir, Dylan Ginoza, and Milton Lin
My Role - Research, Design, Prototype
Tools - Sketch, Invision, Axure
Objective - Develop a feature for Etsy's mobile applications which allows users to submit requests for custom designs to be made by artisans, and for those artisans to subsequently respond to these requests with price bids.
Etsy's Story
Etsy is a peer-to-peer e-commerce site and mobile application focused in particularly on handmade or vintage goods, as well as unique factory manufactured items.
Problem
Solution
-
Etsy users are unable to price shop for custom design orders on the mobile application
-
Etsy sellers have no way to bid on custom orders causing them to miss out on business conversions
-
The vagueness of the current custom order form causes confusion for both sellers and buyers
-
Creating an easy way for buyers to connect with multiple artisans for competing bids on custom orders.
-
Creating a more thorough form for custom requests to help sellers price quotes more reliably.
Process
Research
Competitive Analysis
The first step in the research phase was to compare similar sites that offer users the option of customizing their items. These sites were evaluated on their elements, features, and also qualitatively.
Element Analysis
-
Comparative apps are photo-heavy
-
Navigation laid out in menu bar
-
No more than 5 items per menu
Feature Analysis
-
Apps that offer custom designs only offer this option for their own products
-
Competitors did not allow for efficient filtering of product pages
Qualitative Analysis
-
Limited user profile function
-
Checkout processes were often slow or felt incomplete
-
Competitor apps were lacking in the options available to users in terms of custom products
User Interviews
User interview questions were crafted to gain a better understanding of the habits and needs of the targeted demographic. Interview questions were directed specifically towards two demographics: Consumers who regularly customize their own products, and artisans who take custom requests from buyers.
User Journey Maps
Journey maps were created for both the buyer and the seller in order to better understand the current methods available to them regarding custom orders, and at which point in this method do the biggest pain points and frustrations arise.
Buyer
-
Buyer experiences lowest points during follow up communication with seller
-
Another point of frustration is finding the right seller
Seller
-
Seller also experiences lowest points during follow up communication
-
Another pain point comes when trying to understand buyer's request and coming up with quote
Ideation
Empathy Mapping
Once an understanding of the pain points associated with current processes was established, empathy maps were created for buyers and sellers to understand their needs, goals, frustrations, and environment.
Buyer
-
Willing to pay upfront
-
Concerned over communication process with seller
-
Feels strongly about having some sort of product guarantee
Seller
-
Wants a level of creative freedom
-
Interested in increasing customer base and positive feedback
-
Would like at least partial payment upfront
User Personas
User Personas were developed for the buyer and seller to clearly define the applications target demographic.
Buyer
-
Know exactly what they want
-
Tech Savvy and know their war around the online marketplace
-
Wants to establish a level of uniqueness about their work
-
Not a fan of mass production
Seller
User Flows
Once the target demographics were clearly defined, the ideation of the design began with the generation of the initial user flow that users were expected to take when interacting with the feature.
Design
Sketches
Hand drawn sketches were drawn up by all members of the team using the the information derived from the research and ideation phases. Sketches were then consolidated based on the team's preferences.
Lo-Fi Wireframes
Once the team came to an agreement regarding the designs, sketches were digitized into low fidelity wireframes. Which can be found in the prototype links below.
Interactive Prototypes
Low fidelity wireframes were compiled into an interactive prototype for testing purposes.
Testing
Usability Testing - Round 1
Test subjects were selected and observed as they interacted with both the buyer and seller flow prototypes. Subjects interacting with the buyer flow prototype were given the task of submitting a custom design requests and accepting a bid for it. Subjects interacting with the seller flow prototype were given the task of bidding on a design request.
Findings
Round 1 - Buyer Flow
- Trends
• Confusion over “Name Your Item” button
• Lack of terminology uniformity for choices like “Bids” vs “Orders”
- Suggestions
• Two text boxes to specify a price range
• Add quantity button on order form
• All users wanted a order review page
- Questions to address:
• Is shipping price included in bid?
• Way to communicate with seller before accepting bid?
- Pull Quotes
• Great flow. Change “Name your item” to “Name your order”
• At the upload pictures section, allow users to choose from pictures on Etsy.
- Prototype Testing Findings:
• Change text box instructions to “Design…”
• Split Design price box into two separate boxes for price range instead of single price
• Add a contact icon on the bids page
Round 1 - Seller Flow
- Trends
• Users consistently got through the tasks without major difficulties.
• Users felt the request boxes were slightly cluttered
- Suggestions
• Reduce clutter in request boxes
- Questions to address:
•What is most important info seller needs from request?
- Pull Quotes
• "Easy and intuitive"
• "Could I place a bid with all this info"
- Prototype Testing Findings:
• Add additional info aside from buyer's message in "additional info" link
• Reduce clutter in request boxes
Once the first round of testing was complete, changes were made to the designs on the basis of the findings from the first round of usability tests. Once changes were implemented to the buyer flow prototype, it was used for a second round of user testing.
Round 2 - Buyer Flow
Trends
• Too much text at top of form page
• Everyone got through flow quickly
Suggestions
• $ sign would be nice in or next to price text boxes
• Add suggestions based on the name
• On “My Requests” page, “Remove” button could be renamed “Cancel Request”
Questions to address
• Do artisans provide mockup of requested product?
Pull Quotes
• Confirm custom design details page
◦ “This feels very abrasive.”
• “Feels intuitive to the existing Etsy app.”
Prototype Testing Findings:
• Make fillable form more conversational
• Get rid of character count
• Fix confirmation page edit icons
• Option to delete added photos
• On bids page, make “Order Name” font bigger at top of page. Also separate the bar
that it sits on with “sort by” from the top header
• Fix font sizing for titles/headings
Iteration
Hi-Fi Wireframes
Usability test results were consolidated and then used to guide design decision for the subsequent set of wireframes
Hi-Fi Prototype
Once high fidelity wireframes were completed, they were compiled into an interactive prototype.
