99 Ranch Market
re-build one of the largest Asian Grocery App from scratch
Overview
99 Ranch Market is one of the largest Asian supermarket chains in the US. It offers a wide variety of Asian groceries and products. With the end of their contract with Alibaba, 99 Ranch Market decided to rebuild the app. This decision provided an opportunity to enhance user experience with a new design system and diverse shopping methods. Ultimately, the design team created the design systems and delivered a high-fidelity prototype within 2 months. The revamped app was officially launched in January 2024.
Role
Lead UIUX Designer/Consultant
Timeline
August 2022 ~ December 2022 (5 mos)
Tools
Figma, Adobe Illustration, and Notion
Problem
The current state of the application is characterized by a multitude of features and activities, leading to a complex and confusing user experience. This excessive functionality not only overwhelms users but also creates congestion and traffic within the app.
Goal
Create an app that provide an easy and simple shopping experience for our customers, especially elders
Approach
Conducted user research with 8 interviews, developed affinity map to establish Job to be done, built userflow and wireframe and finally deliver hifi prototype
Outcome
Rapid Design Process - created app from scratch, and delivered hifi prototype within 2 months. App launched on January 2024🚀
Design Timeline
Building an app from 0 to 1 in 2 months
WEEK 01
WEEK 02
WEEK 03
WEEK 04
WEEK 05
WEEK 06
WEEK 07
WEEK 08
Product
Understand User
- User research
- User interview
- Affinity mapping
Strategy
Build Design Strategy
- Jobs to Be Done
- Heuristic Analysis
- Design System (3 wk)
Design
Start building app
- User flow (1 wk)
- Wireframing (1 wk)
- Lo-fi Prototyping (1 wk)
- Hi-fi Prototyping (2 wk)
As a result of the termination of our contract with Alibaba, our design team was propelled into immediate action. The situation necessitated a swift transition into the design process without delay. In light of this, we decided to adopt the Agile methodology for our product development. Agile methodology is renowned for its flexibility and responsiveness, key traits that we believed would be instrumental in our design process. This approach would enable us to rapidly adapt to any changes and efficiently respond to any challenges that might arise, thereby facilitating a more effective and dynamic design process.
Design Process
Clarity, the One and Only Goal
User Interview
Due to time constraints, we prioritized understanding our main target audience deeply. This was crucial to tailor our design to their needs, aiming for a user-centric app. We interviewed 8 participants selected based on our existing customer demographics.
Affinity Mapping
Valuable insights showed pricing as vital in customer decisions. Their preference for online shopping, driven by convenience and price comparison, led to considering coupons as a key strategy for attracting and retaining customers.
Customers highly valued a clear, intuitive categorization system for easier product discovery. Recognizing that users generally have a clear idea of their purchase, we prioritized enhancing search functionality in our design process.
Job To Be Done
To understand user motivations for using the 99 Ranch app, we relied on the invaluable Jobs to Be Done framework. It streamlined understanding user goals and simplified the user journey mapping process. Focusing on three main MVPs—grocery shopping, item searching, and order tracking—ensured our design met users' core needs, enhancing their overall experience with the 99 Ranch app.
Heuristic Analysis
In our heuristic analysis of competitors, Amazon's blend of shopping experiences, Walmart's diverse shopping methods, Weee's sales ads, and Target's loyalty rewards stood out. Visually, they all use a simple, minimalistic style with limited colors or color only on icons, like Weee, for a smoother user experience.
Solution
Sophisticated Simplicity
After conducting extensive user research, creating affinity maps, defining Jobs to be Done, and performing heuristic reviews, our objective is to develop the 99 Ranch app with a 'Sophisticated Simplicity' design strategy. This approach is focused on bringing heightened clarity to our customers, ensuring an intuitive and refined user experience.
Straightforward Sign Up/ Sign In Process
Embarking on the account creation journey can be time-consuming. That's why we've crafted a seamless sign-up process, with just one straightforward question on each screen. Our goal is to minimize any chances of users leaving during the process. We've tailored the questions to be simple and easily understandable, especially catering to the needs of older users. Your account creation experience is designed to be smooth, efficient, and user-friendly.
Home Page: Non-stop Shopping
The Home Page holds significant importance as it serves as the first visual encounter with our platform. We seize this opportunity by incorporating a strategically placed promotional ad in the center. This allows customers to instantly discover ongoing sales and ensures a one-page experience for uninterrupted shopping, presenting everything at a glance.
Find your item like walking down aisles
The Category Page functions like the aisles in a market, offering a streamlined experience for customers to find what they need swiftly. Our goal is to enhance accessibility, and to achieve this, we've designed the screen with two intuitive navigation options. Customers can seamlessly explore categories by swiping right from the top or effortlessly discover more by swiping down, ensuring a user-friendly and efficient browsing experience.
Keep Track of Order
Our account page is meticulously crafted to empower users with the ability to effortlessly review their shopping history. We understand the importance of keeping our users informed about their orders to minimize confusion. To achieve this, we've designed an interface where users can quickly assess their order status through tags and easily distinguish between different types of shopping through intuitive icons. Your experience is tailored for clarity and convenience.
