Mercari Design Challenge

Mobile iOS design, user researchInterview Design Challenge

-

I redesigned a product page of a peer-to-peer marketplace app as part of a design challenge for Mercari, with the goal of positively impact purchases without sacrificing user experience and retaining the information on the sample screen.

I initially spent around 2.5 hours on this challenge, with a focus on aiding logical decision-making. I revisited the challenge and spent an additional 3 hours updating the design to facilitate quick decision-making, increase purchasing confidence, heighten item covetability, reduce friction between scanning and buying, and build trust between buyer and seller.

This challenge took me onsite and even got me an offer, but I was unable to pursue the opportunity due to personal reasons.

Overview

Given the peer-to-peer business model and second-hand nature of the listed products, to design a product details page that increased purchases, it was important to better understand how people made purchases.

Based on my primary and secondary research, I laid out some directions to guide the redesign:

Increasing purchasing confidence.

Aid quicker decision making.

Foster trust between buyer and seller.

Remove distractions and sources of friction from buying.

Provide greater sense of payment security.

Create covetability and urgency.

Promote impulse.

Problems

Current Issues

Distracting interface: A barrage of buttons and button-looking links take the user away from the product page (with a functional exception for "Buy"). The randomness of items included in the similar items section encourage browsing over purchasing.

Unclear actions: It is not immediately clear how to interact with the item photos; swipability is not expressly signified. The visual styling also creates some confusion; for instance, it's unclear whether the buyer guarantee is clickable.

Obscured information: Shipping time and price require a separate flow to define. Users need additional actions to discover shipping logistics, defeating the purpose of placing it so prominently on the screen. Obscuring this information creates friction between wanting and buying.

Information grouping and hierarchy: Seller details are sandwiched between item-related information. Grouping elements like text, price, and gradients with the product photo obscures the photos and contributes to cognitive overload. Irrelevant information like seller location and post time are positioned relatively prominently.

I also took note of some visual weaknesses like poor readability, emotional coldness, and inconsistent visual styling that creates a confusing language and surfaces ambiguity as to what elements are interactive.

Though the company is a mobile-only, secondhand marketplace targeting women in their 30s, due to time constraints and access to target users, I conducted primary research with UC Berkeley students and recent graduates on their mobile and desktop shopping processes and how they made purchasing decisions for both new and used products. I made some assumptions on the transferability of my interview insights to the app's target users.

Key Insights

From my primary research, the most important observation was that interviewees were able to decide if they wanted to purchase an item based on relatively little information. Given availability, item/style and price were enough to make a basic decision. They then scanned for shipping information and reviews or other UGC.

Given the peer-to-peer business model and second-hand nature of the listed products, the below factors were particularly important in buying decisions:

Promoting trust between buyer and seller and foster greater sense of security in the mobile marketplace in general.

Providing appealing choices to increase overall purchase volume.

Tweak UI for greater clarity.

Initial sketches.

Earlier Iterations

I realized that one of my assumptions when first approaching the task was to increase purchases, with the self-imposed constraint of designing to aid rational decision-making, and to give the user everything he or she needed to make a considered purchase. However, given the market that Mercari operates in, this was an inappropriate assumption to make. I instead shifted by direction to designing for less rational, quick, impulse-driven purchases.

Solutions

I sought to increase purchasing confidence by emphasizing product visuals and enabling users to share and get opinions from others, foster trust by making it easier to communicate with a seller and see a seller's track record, and focus on the action of buying itself by removing or diverting attention away from extraneous or unimportant elements. I also sought to better clarify parts of the interface with changes to information hierarchy and signifiers.

Secondary research advised my direction of promoting impulse over rational and considered decision-making and aiding quicker decision-making by surfacing the least amount of salient information as possible (item style, sizing/fit, condition, price, total price, logistics, and trust) to make a purchase. I also wanted to address general concerns about m-commerce by creating a greater sense of security through quality and payment-security guarantees. I also sought to create covetability and urgency through tweaking copy, introducing a competitive element, and enabling a desire to collect things.

Design Decisions

Increasing Purchasing Confidence and Trust

I wanted to immediately surface key information about item style, price, fit, condition, and shipping price and logistics. I moved the icons above the text and grouped the text for each category together so that the user could glance for information with less distraction.

I added a "Share" button in the top navigation to make it easier to get a second opinion from friends and family. Though a second opinion potentially increases purchasing confidence, a negative second opinion may dissuade some buying and reduce impulse purchases.

I included the Buyer’s Guarantee below the seller profile to reinforce trust in the app and the seller. I also added a Secure Payment Guarantee to address user concerns about security for m-commerce. By being explicitly reminded that their payment info is secure, users might be more willing to make purchases.

Removing Distractions

I moved the “Sell” CTA from the page to within the menu. Since increasing purchases is the goal, the prominent prompt to enter seller mode is distracting. Though this makes it more hidden, my interviews revealed mobile shoppers tended to either buy or sell in peer-to-peer apps. They did not switch between the two often, if at all.

I also moved the "Message" CTA from the static footer onto the page to bring more focus to the main action of buying. Having the option to ask a question readily available makes it easy to ask any potential questions they have as soon as they land on the product page, without have the secondary messaging flow distract from the main action of buying. I added another "Message" CTA below the seller information due to contextual relevance, to give the user another chance to clarify their questions without having to swipe up again, before they presumably scroll down to related products.

Enhancing Visual Focus and Interactivity

I removed overlaid text on the Product photo I added an an “Expand” icon to allow users to zoom in on photos directly on the product details page. This would replace the “Close up/ Zoom” view in the current Mercari app and reduce navigation depth.

The current design is also weak at indicating swipability. I used a dot carousel to better signify image swipability and also indicate the number of photos available. Because impulse buyers are not driven by exact specifications, I focused more on visual elements on product pages than on written descriptions. Users care about seeing photos—they may be more convinced to buy if they see there are more photos available, but the specific number of photos available matters less.

Promoting Impulse and Investment

I added text like “Items You Might Love” and “Popular Items” to appeal to the influence others have on a user’s buying decisions and create covetability. To add a sense of urgency, covetability, and encourage buying, I added text that showed other users’ interest in the product (based on “Likes”). I used a fire icon to try and nudge impulsivity. This element would not appear if no one liked the item.

I also added the “Like” and an “Save” function. Liking a item expresses interest while saving it to a collection creates more investment in the item and can increase future purchases.

Providing Appealing Choices

The business goal of the product details page is to inform and convert—to get the user to buy the item. Though I considered an extended scroll, this gave too much weight to product discovery over purchasing so I changed it to a card carousel design. Cards were a clean, aesthetically pleasing way to present related products. They also provide more information with thumbnails. I removed the “Back to Top” floating action button.

I added text like “Items You Might Love” and “Popular Items” to appeal to the influence others have on a user’s buying decisions and create covetability.

Improving UI Clarity

“Share” and “More” icons are adjacent in the nav as they initiate action sheets. I moved "Like" and "Bookmark" options into a separate row along with popularity. I reorganized color and text styles to improve information hierarchy and visual cohesion.

Other Considerations

Though I considered other design elements that were more "novel" and "creative", these alternatives didn't translate well into iOS design guidelines. Users spend most of their time on other sites. Thus, anything that is a convention and used on the majority of other apps will be burned into the users' brains and deviation can create major usability problems.

Ultimately, it was more important to solve the problem at hand--increasing purchases--in a way that respected consistency and platform conventions, rather than pushing experimental and stylistic boundaries at the cost of an intuitive user experience.

Here are some scrapped designs and elements that didn't make the final design.

Essential Information

Action Buttons, Tab Bars, and CTAs

Takeaways

Designing for different cognitive processes take wildly different directions.

Design decisions are much easier to make when they are grounded in research.

Though excitement and novelty are nice to have, good design also respects the intuitive user experience that comes with adhering to platform conventions.