Mercari

Redesigning the item page to increase purchases

Overview

The Challenge

How can I improve the design to positively impact purchase rates without negative impact to the long term user experience?

My Role

This was a design challenge provided by Mercari. I am not affiliated with the company.

Methods/Tools Used

Usability Testing | Competitive Analysis | Card Sorting | Wireframing| Prototyping | Sketch | Photoshop | Principle


My Process

Understanding the User

Before starting the task, I needed to understand who I was designing for. Since Mercari is an app centered around the buying and selling of second-hand goods (with a majority of items being clothes and accessories), I made the assumption that their main demographic is females in their 20s and 30s.


USABILITY TESTING WITH TARGET MARKET TO UNDERSTAND BUYING HABITS

I asked five females to think outloud and walk me through a hypothetical purchase using the original design. Here were a few insights I gathered from the tests:

CARD SORT TO UNDERSTAND USER VALUES

To understand what users felt were most important when making a purchasing decision, I did a card sort with eight females ranging in age from 24 to 32, who often shop online and have bought second-hand items.

Here are some of my takeaways based on the card sort findings:

  • People favored seeing the number of likes an item has over the ability to like an item themselves
  • People did not care too much about "Message Seller" although it is one of the main CTAs on the original screen
  • The photo is one of the most important items but is cluttered with other elements on top of it
  • Price is another element that is most important but it can be overlooked because of placement and size
  • Similar items ranked very low on the list but the "Similar Items" text is heavily bolded and is large in size, giving it a lot of prominence and may be distracting to the user

COMPETITIVE ANALYSIS

To have a better understanding of the market, I looked at several popular ecommerce apps including Amazon, Ebay, Poshmark, OfferUp, Etsy, Tradesy and Wish to get an idea of what others were doing well and what could be improved.

  • All of the apps placed heavy emphasis on the photos with photos taking up most of the retail space
  • Some apps did a good job of creating a sense of urgency
    • Wish uses "54 viewing now"
    • Most apps also have a heart with number of likes
    • Ebay tells users how many products have already been sold and how many are left
    • A few apps also list the retail price so customers can see how much they're saving
  • Ways other apps increase purchasing confidence
    • Amazon has tags for best sellers in each category (i.e. #1 best seller)
    • Several apps also have a section for refund policy

Wireframing

To brainstorm different layouts, I created some wireframes. I put a lot of the emphasis on arranging the most important information in a way that makes sense.

The Redesign

DESIGN PRINCIPLES & GOALS

  • Establish trust early and maintain trust throughout the process to increase purchasing confidence
  • Improve text hierarchy and UI to make page easily comprehensible
  • Reduce or eliminate elements that may confuse or distract user from making purchases

Takeaways

Redesigning the Mercari app was a fun challenge that I really enjoyed because the ecommerce industry is one I can personally relate to having started my own online store and a space I find very interesting. Having a good understanding of the user was very important and influenced a lot of the design decisions I made. Although I would be considered Mercari's target market since I am a young female who has used apps to shop, I made it a point not to design based on assumptions of my own shopping habits. I was surprised to learn through the card sorting that 'message the seller' ranked very low on the list, but was a main CTA in the original version.

If I were to move forward with this project, I would validate the new design through user testing and make additional iterations to it.