.png)
Sneaker Trading Mobile App
UX/UI Designer
User Research, Interaction, Visual design, Prototyping and Usability Test
Duration: February 2022 - June 2022
Tools: Adobe Illustrator, Figma, Miro
Course: Google UX Design Professional Certificate
Overview
An easy way to enter the sneaker resale game for buyers.
Problems- Research based on my work experience at sneaker trading platform
Since the transaction logic of the sneaker trading industry is completely different from that of general e-commerce shoe stores, novice buyers are often confused about the operation process (from browsing shoes to placing an order). This is because consumers are not familiar with the sneaker trading market, so they spend a lot of time understanding the entire operation process.
In particular, sneaker trading industry has just emerged in the Taiwan market, so many Taiwanese consumers do not understand the operating logic on the platform, and most of them end up buying deadstock shoes from streetwear brick-and-mortar stores at unreasonable prices.
Solution
An ideal solution focuses on providing comprehensive and intuitive pricing information to avoid confusion for users at each step of operating the mobile app. For example. Highlight product price overviews, or design call-to-action button colors based on stock markets.
Design Concept
In recent years, with the rise of sneaker culture in Taiwan, many Taiwanese still do not fully understand the sneaker resale market.
While working at AREA 02, a sneaker trading startup in 2021-2022, I had the opportunity to understand the issues consumers face in the sneaker market, especially beginners trying to get into the sneaker resale game. This work experience prompted me to build a sneaker trading mobile application that enables users to place orders smoothly.
Define User Problems
To define users' need and problems, I conducted in-depth interviews and user research.
The research encompassed:
-
Pain points
-
Personas
-
Competitive Audits
Pain points
Productivity pain point
Consumer spend lots of time on understanding how to place order since they are unfamiliar with the sneaker trading market.
Support pain point
Consumers are not given a clear order status.
Persona
Based on empathizing on users, I categorized 2 main personas as presenting user needs. By extracting insights from each persona, the project focuses on how to easily search for products, place orders, and track orders through the app.
Competitive Audits
Since this mobile app is mainly aimed at users in Taiwan, and currently the sneaker market is most prosperous in the United States. So, for analysis object selection, I chose the most widely used apps in the US and Asia- StockX, Goat, and Novelship, respectively. In addition, AREA 02, a Taiwanese sneaker trading app, was established three years ago.
Value Proposition
MIO is a sneaker trading app that allows Taiwanese users to enter the sneaker resale game easily and quickly.
Ideate Design Solutions
I started by creating two storyboards to ideate user flow. The scenario focuses on conveying a concept- a sneaker trading app that helps beginner users/buyers to place orders efficiently and quickly. The big picture storyboard presents the situation that triggers the user to open the app, and the user flow from browsing the product to placing an order. While the close-up storyboard mainly presents the user interface design, which helps users clearly understand how to operate this app.
The paper wireframe focuses on solving users' 3 main problems:
-
Spend lots of money on purchasing dead stock shoes with unreasonable price
-
Spend too much time on placing order
-
Cannot know a real-time order status
The solution designs included:
-
Bid function → allowing buyers to negotiate product price with sellers
-
Search function → diversified search methods, allowing users to quickly find products according to their own habits
-
Clear product info → a complete size conversion & product price table
-
Real-time order tracking
.png)
Low-fidelity Prototype
The goal of the low-fidelity prototype is to design a smooth ordering process that guides the user to complete the order easily. In addition, the design of the above-mentioned four main schemes is also integrated into it, such as a calendar page that provides info on newly released products.
After unmoderated usability research, the order tracking page was modified, and the order confirmation was added. The schematic diagram of order tracking was changed to a vertical display, providing more specific details to users.
Design Adjustments
After doing usability research on the mockup, I made some design adjustments mainly focuses on providing comprehensive and intuitive pricing information.
1. Highlight product price overview
Place the complete size conversion and product price table on the first page of product pages.
.png)
2. Clear product & price information
-
1st page: Display the lowest price
-
2nd page: The price of buy/bid & sell/list will dynamically change based on the selected size
.png)
3. Intuitive call-to-action button
Change button color to mimic the stock market
Prototype Design
Home Page
The home page first displays the on-trend product banner, then the product category which provides users with an overview of all products. Also, the personalized recommendation for users can create customer intimacy, building a closer relationship between the brand and users.
.png)
Search Page
Search page provides a variety of search methods and filters to guide users to find products. Also, each screen displays 6 products with the current minimum resale price. Visually clean and clear layout, so that users will not feel visual fatigue due to various product colors.
.png)
Calendar Page
Calendar page provides products released date and launch calendar. If users are interested in the product, they can press the small icon in the upper right corner to keep track of its market price and get a notification once the price changes/drops.
.png)
Profile Page
The profile page displays the user's personal information, including details of products ordered, listed, and followed.
.png)
Product Page- the size selection process
Product page highlights call-to-action buttons, in colors align with stock market. In addition, the product page also provides size conversion details consistent with the product price so users can get a holistic view of the product.
.png)
Order Placement Process
Three-dimensional call-to-action-button design helps guide users to place an order.
.png)
Order Tracking
Buying page displays the order detail and a real-time order status.
.png){kind=tracking}
Take away & Next Steps
Impact
-
The clear and direct user flow allows user/buyers to enter the sneaker trading market easily and quickly.
-
Detail-oriented product information enables users to understand the sneaker market effectively and comprehensively.
-
Personal order tracking function builds a mutual trust between brand and users, which can enhance customer loyalty.
What I learned
-
The UX design process: Gain in-depth knowledge of the design system, from user research to testing prototypes.
-
The logical thinking of the sneaker trading market: Users care about the product price first, so the price of each product size should be clearly listed.
-
The usability research: Those researches allows me to create a better UX design. For example, prioritizing the information in each screen helps users to operate app smoothly.
Next Steps
-
Measure effectiveness: Analyze the time duration between the customer's registration as a member and the first order to test the effectiveness of the app.
-
Build a community section: Create a forum area in the app where users can share their outfits, consolidating the relationship between users and the brand.