MOBILE UX/ui 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?
THE PROBLEM
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.
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

A. Reviews on App Store

  1. It is not guest friendly - guest users should be able to discover what Etsy has to offer as well.
  2. ‘Etsy Picks’ and the homepage in general does not update frequently and is not in sync with the Etsy webpage.
  3. UI is outdated. Borders should not be used for a cleaner look.
  4. 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)
  5. ‘Your Cart’ is overloaded with information and ‘Save For Later’ & ‘Remove’ does not look like a button.

B. My own experience

MY GOAL
From summarising the problem identified above, I've decided to focus on improving the display and organisation of information, making it guest friendly and improving its UI with an emphasis on the 'purchasing' flow only (as it'd be too ambitious to tackle the whole app for my first UX project).

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.
DESIGN PROCESS
I started off with researching other similar apps, namely Pinkoi and ASOS. Pinkoi is very similar to Etsy, but it gears more towards the asian market, while ASOS is an online fashion retailer that has a great variety of brands (over 850 in fact) to choose from.

From looking at how they organise their home page and search page, to trying out their flow from 'choosing a product' to 'adding it to cart', I've dropped down notes and created a table illustrating their similarities and differences. It acts as a really good reference tool while I brainstorm solutions.


Then I created a sample user persona and user flow to act as a guide while I re-design the purchasing experience.

As mentioned in the 'Goal' section, I am only tackling the 'search, choose, add to cart and purchase' flow.


DRAFT SOLUTION
Based on the above flow, I started drawing and brainstorming screens. The overall app flow was pretty good already (of course, it is a launched app after all) so the main areas I was planning to improve were:

  • Making the home page guest friendly - there will be a randomly generated list of items, much like its current website
  • Updating the UI for a cleaner and more minimalistic look
  • Options of paying for shops separately
  • Adding a filter for 'loved items'

Here are some sketches I've done:
PROTOTYPING AND 1ST ROUND OF TESTING
Based on the sketches, I started prototyping 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.


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.
2ND ROUND OF TESTING & FINAL SOLUTION
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.

You can test out the prototype here.
FINAL TAKEAWAY
It was a great experience, especially since it's my first ever UX case study.
  • I did not realise just how many buttons and links there could be on a single page until I started prototyping
  • User testings always give incredible insights
  • UX is more like science than a 'traditional design field'

So as cliché as it sounds, I did learn a lot, and I'll continue to learn more as there are a never ending amount of new info in the UX design field. This project is far from perfect, so I hope that as time goes by I can look back and think of more ways to improve.

GET IN TOUCH

Contact me through my social media or via email! I'm open to internship opportunities, freelancing projects and more!
CONTACT ME VIA EMAIL
DESIGNED FROM SCRATCH WITH WEBFLOW.
COPYRIGHT @ 2019 NEROLI KO. ALL RIGHTS RESERVED.
COPYRIGHT @ 2019 NEROLI KO. ALL RIGHTS RESERVED. DESIGNED FROM SCRATCH WITH WEBFLOW.