MDH
Mercari.png

Mercari Mobile App

Overview
This past summer, I had the opportunity to work with the talented team at Mercari (SF Office) as a product design intern. Over the course of 7 months (internship program + fall semester extended offer), I helped work on multiple features + graphics, which were deployed on both the Android and iOS systems. 

When I entered the program, the design team had just revamped the entire app redesign (project double) as it released its version 2.0. During this time, the other interns and I helped with QA-ing UI components, type, colors, and iconographies using the updated design system guideline. 

Role:
Product (UI/UX) Design Intern
Tasks: UI features, graphic design, user interviews

uxd_fam.jpeg

10 Percent Off Item Banners

10_percent_off_banners.png

In Mercari 2.0, the home newsfeed became more organized by creating & stacking popular categories based on number of listings + popularity of searches.

By implementing these carousels, however, many sellers were frustrated with the reduced visibility of newly listed items + lack of sales compared to competitor apps. 

Solution: In conjunction with the Mercari Price Drop marketing campaign, the app would automatically attach 10% off banners to items for sellers that reduced their price, and feature them at the top most section in limited-time offers. 

By doing so, we help sellers promote items (increase GMV), encourage buyers to view new items, and re-use the UI component for smaller or larger scale price drops. 


Chat -
CS prevention of potential issue

After getting rid of the comments feature and introducing the new chat function between buyers + sellers, there was the potential issue of offline transactions, which are not permitted in the app. The objective of this project was to create a chat intervention UI + flow in the case that users attempt to facilitate offline transactions or share personal information.

Objectives:
• increase online safety + warnings
• improve customer satisfaction
• user education of Mercari policies
• proactive customer support

Ask:
• Create 2 UX flow
1. Inappropriate message / safety warning > deleted message view (seller & buyer) > automated message specific to case > link for more information > feedback
2. Word / phrase triggers question about transaction completion > FAQ "Learn More" > feedback  

Iterations of deleted messages by the CS admin

Iterations of deleted messages by the CS admin

Safety Message Chat Intervention (Left)


FAQ Chat Intervention (2 options)

After discussing with the react native engineers, we went with the right option, which will lead users to the Help Center page on the profile tab. This can also increase visibility and engagement with the customer experience team, and improve C-Sat scores. 


Delete Messages

delete_messages.png

Phase 1
Quick fix to delete messages individually by tapping the edit btn and displaying trash icons next to the chat container. Unable to do the swipe motion to delete messages due to secondary navigation on top (notifications, selling, buying).

Phase 2
Multi-message delete function.

 

New Buyer / Seller Email Series

After a user buys their first item / sells their first item, this email will be sent to share tips to get a better experience in the future.

 

For sellers:
• Taking the best photo
• Using succinct + clear item titles
• Including item descriptions / specific information if possible
• Responsiveness in chat feature

For buyers:
• Getting important notifications from sellers
• Utilizing the chat feature
• More info about the buyer's guarantee policy
• Escrow payment system - rate + complete transaction

 

Wireframing based on email benchmarking
Create both web + mobile views
Max width 500 px - Appboy email regulations

Icon Graphic Style

Mobile Email View

Web Email View


Web Homepage Redesign

In order to increase GMV on the web application and drive seller / buyer activity, we redesigned the outdated landing page to reflect the new mobile app release and better reflect the company's tagline "Buy & Sell Things You Love."

homepage_redesign.png
web_benchmarking.JPG
top_2_web.png

Saved Search

Currently, the saved search function is accessed through a toggle btn, which is not intuitive as it indicates similar functionality to a filter btn (& thus, updating the on-screen feed in real-time). This is crucial for users as the saved search allows users to quickly look up specific items after tapping the search bar, and sends in-app / email notifications for newly listed items and price drops regarding that specific item or category. 

 
saved_search.png

Other friction points presented itself such as:

• What if the user accesses a save search and adds / updates their preferences - size, brand, category?

• How should the save search btn be accessed without being mistaken for a "like" btn on similar competitive applications?

• How will this affect the current zero state search tab landing page?

• How should notifications be delivered when price drops / new items listed?


Follower Recommendation

Worked with the Data Analytics Team to redesign the follower recommendation modules on the home screen. The feature encourages users to check out seller profiles by taking data from item searches, likes, and similar items and curating a list of followers with a three-photo package. Users also get a small description as to why they're being recommended a specific follower to accommodate items in the seller's inventory that may not appear in the container yet is still available. 

follower_recommendation.gif

Rebranding (exploratory design)

Since Mercari's expansion into the US market in 2014, we analyzed ways in which Mercari can potentially rebrand itself by looking at the trends of other start-up companies, and focusing on our main value proposition as a second-hand shopping platform centered on buying / selling things you love.

The design team focused on two main visuals:

1. Unicorn
2. The Elf

And brainstormed a story concept for each to propose to the executive team.  

 
explore.png
emotions.png

Home / Newsfeed Redesign

Exploratory Design
To encourage more item exploration for first time users, reduce bounce rates, and allow updated feeds based on newly listed items, location, and user meta data

 
IMG_5090.JPG

 

I've also worked on:

• "My Sizes" Feature - to help buyers save their size preferences and quickly look for apparel as it is one of the highest driving GMV categories in the app

Feature Page - create a second-depth screen flow where popular category of items are further categorized into specific carousels (IE. Men's shoes > Adidas, Nike, Converse, Allbirds, etc)

User Suspension Modal - to educate users on why they were suspended, reinforce Mercari policies, promote customer support, reduce risk, and create a safe marketplace community  

• [Web] Item Details Page Redesign - reorganizing information hierarchy to encourage users to like item and ultimately checkout

• [FTUE] Sign-Up / Login Screen Video BG - to keep first time users engaged from the on-boarding entry point, our marketing team created a multimedia concept to use as our sign-up primary visual

• Super Seller Phone Interviews - inquire about competitor marketplaces that the sellers use / have used, typical selling behavior and best practices, buyer's protection guarantee, seller's profile

• Interview + Usability Test + Paper Prototype - gather feedback regarding item search process, components in the item listing details, seller's profile (understanding what information is essential / expected / nice to have's)

• Marketing Campaign Banners + Pop-Up Modals - produced banner + pop-up modal designs for Q3 campaigns