cover.jpg

UX Case Study - Redesigning the Etsy App

 
 

UX Case Study - Redesigning the Etsy App

Once upon a time… 

I have this habit of going on the Etsy app to check out my competitor’s listings as well as mine (#marketresearch as an Etsy seller). However, I noticed that the current design of the app frustrates me - not only is the UI outdated, but the way information is presented made it difficult for me to navigate as well. It is then that I realised - app development is not just about coding. As an engineering student we are taught the technical stuff, but no matter what new technology we use to make the product, if the user experience is not good, no one is going to want to use it. Engineering is for human, and thus it should be human-centered.

This not-so-pleasant experience introduced me to UX design, and ultimately inspired me to pursue this career path. And what could be better than to use this as my first ever case-study?

Overview

The Etsy app is difficult to navigate and frustrating to use. Through this case study I hope to pinpoint what is wrong with the current app, improve them, and design a better version that would benefit both Etsy sellers and shoppers.

*I am not affiliated with Etsy.

 

Step 1: Finding out what’s wrong

2 main ways were used to identify the problem present in the existing app - my own experience and the reviews of other users on Apple’s App Store.

I opted for these channels as I believe that the review section on App Store would give the best representation of what real Etsy users has to say. On the other hand, my own experience would act as a user testing case.

 
 

A. Reviews on App Store

Opinions can be summarised as below:

  • Not discover-friendly enough: difficult to find shops and discover new products from homepage

  • Unable to pay for purchases from different shops separately (more of a site-wise change)

  • Cannot filter the ‘loved items’ by categories

  • Reviews are for the shop in general but not item specific (This would be more of a site-wise change (rather than just the app) since it has more to do with how Etsy is organised in the first place)

  • Difficulty leaving reviews on the app

 

B. From my own experience

 
 
 
IMG_8043.PNG

1. It is not guest friendly - guest users should be able to discover what Etsy has to offer as well.

IMG_8068.PNG

2. ‘Etsy Picks’ and the homepage in general does not update frequently and is not in sync with the Etsy webpage.

 
 
 
IMG_8071.PNG

3. UI is outdated. Borders should not be used for a cleaner look.

IMG_8074.PNG

4. ‘Your Cart’ is overloaded with information and ‘Save For Later’ & ‘Remove’ does not look like a button.

 
 
 

So in general, the main improvements that could be made for the app are improving the display and organisation of information, keeping it in sync with the Etsy website and improving its UI.

With that I hope the final product would make it a pleasant journey for users to discover and support talented hand crafters around the world.

 
 
otehrapp.jpg
 
 

Step 2: Researching other similar apps

There are plenty of similar apps out there, but for this case study I’ve chosen Pinkoi and ASOS specifically. 

Pinkoi is very similar to Etsy, but it gears more towards the asian market (and I’m a Pinkoi seller too!). I thought it’d be a perfect example to use since its concept is very close to Etsy’s. ASOS is an online fashion retailer that has a great variety of brands (over 850 in fact) to choose from. It is similar to Etsy in a way that it hosts different sellers, so I picked it as the second research target.

 
 
 
  Pinkoi ASOS
Front page

Grid picture as front page, free delivery badge

Grid as front page with boxes for info like sales and delivery discount
Search page Front page as search page With interaction design, sale; very minimal
After search Grid pictures, no words or price, can change into list form with title and price, filter button and sort Minimal design, grid, filter and sort
Clicking on products Large image, add to cart large contrast, info displayed nicely, like button on picture large contrast, product info etc click to another new page, ask to sign in when add to bag
Adding to cart More info, gift card option listed, shipping info listed Vibrate, minimal, integrated with Apple Pay
Things I like Title and price not listed so customer will focus on the product itself Minimal and clear design, animation, info not all listed out for clean layout
Things I don’t like Too much information displayed Too much notification pop out, too much ad on first page
 
 
 

Step 3: Creating user persona & user flow

 
 
benjamin-combs-27619-unsplash.jpg

Thalia Cunningham

Thalia is a University student in Canada who love handmade articles and supporting independent artists. She recently purchased a new laptop for the new semester and would like to decorate it with some stickers. Knowing that Etsy is one of the largest online handmade market, she decided to download the app in order to search for laptop stickers.

Problem: cannot find nice laptop sticker on generic stores

Needs: affordable and unique sticker design

Goal: search and buy laptop stickers

 
 

Thalia wants to find some laptop stickers:

Untitled Diagram.png
 

Step 4: UI sketches

 
 
IMG_8259.jpg
IMG_8260.jpg
 
 

Step 5: Creating prototype and user testings

Screen Shot 2019-01-29 at 10.17.34 PM.png
 
 

I started creating a prototype on Adobe XD. The prototype consists of a mix of stock photos and wireframes since Etsy hosts different sellers and it’s not practical to show different images at this point, but still I want to make it as realistic as possible.

I did my first user testing after a simple draft (with a lot of unclickable buttons). The objective was to find an item and add it to cart. Check it out here:

1st round of testing

 
 
 
 
 
 

The prototype is clearly not quite function-able yet, but this testing also gave me insight on how someone else would approach with using the app.

Then, I worked on making all buttons clickable with pages linked to it. It is still quite flawed, after multiple times of testing it myself I was able to pinpoint where the errors were and fixed them.

 
 
 
 
 

I followed the goal of ‘finding an item and adding it the cart’, so the user testing will end at that point (meaning there’s no action that can be taken once the product is in the cart).

For the second round of user testing I’ve decided to just use wireframes to represent products except for the homepage as it would give a model closer to the real app. In general, I did not change the hierarchy and flow of the app at all because it was doing well already.

The things that I improved were:

  1. UI and how information is displayed

  2. Adding filter for ‘loved items’

  3. Option of paying for shops separately

  4. Making it more guest friendly - guests can like items and have a randomly generated homepage

Also another thing I noticed was the app loads pretty slowly, but this is more of a coding thing so I couldn’t really fix it with the prototype.

2nd round of testing

I asked 2 other people to test the improved prototype and also the original app. The general feedback is that the original app is not guest friendly enough that it would discourage guests to browse Etsy. They also noticed some functions present in the original app (such as the option button under each listing) that could be adapted to the new one. And also a ‘back to top’ button would be convenient too, but since Adobe XD has yet to include such function I could only add a ‘fake’ button to the prototype.

 
 
 
 
 
 

Test out the prototype here.

 
cover.jpg
 

Overall, Etsy already has a very nice user flow. By fixing it’s UI, making it more guests friendly and changing up a couple of other things, we can improve it so that people would have a nicer experience shopping there.