top of page
iPhone 14.png
logo.png

Role

UX/UI Designer

UX Researcher

Timeline

Aug 2022 --- Jan 2023 (Launch)

Jan 2023 --- Jan 2024 (Iteration)

Skills

Wireframing & Prototype

Market Analysis

UX Research

Stakeholder

Product Manager

Front-end Developer

Software Engineer

Market Analyst

timeline_groc.png

PROJECT CONTEXT

Groc, revamp in-Store Checkout Experience: streamline shopping journey for customers

The Groc mobile app is dedicated to transforming the self-checkout experience, driving efficiency, and increasing sales for in-store businesses. The primary goal is to revamp the product design, creating a seamless end-to-end shopping journey that enhances user acquisition and conversion rates 

Frame 22861_edited.png

WORK IMPACT

In 6 month

Design being delivered and launched in app store 

Rated top 30

Most promising SaaS B2B2C product at Global 2023

Gain 96%

Positive feedback rate in beta-testings

iPhone 15 Pro.png
iPhone 15 Pro.png

DISCOVERY

Before I joined Groc, the team lacked data on users. I led rapid discovery research and meet with stakeholders to identify our target audience and define the product's core needs

10+

data source

5

interviews

5+

observation

2.png

Amelia, 25

Tech-savvy, open for innovation but rooted in pragmatism

USERS WANT

"Would love a in-person shopping experience that combines security, efficiency to save time and offer a refreshing approach to retail"

1_edited.png

Steve, 38

Product manager, aims for cost-effectiveness & quick delivery

STAKEHOLDER WANT

"I'm hoping for a product that is simple, functional, and aesthetically pleasing. Something feasible to develop and not overly complicated"

THE PROBLEM

The Groc App saw high abandonment on the key 'Scan and Shop' page. I interviewed 6 target customers, who noted usability issues and questioned the feature's reliability

😫

"The scan and shop function is so difficult to use and looks sketchy... Is it reliable?"

🤔

Why is the current design not working? Why would it look sketchy? Umm... I need to run a quick design audit to find out

Customers

Me

Groc_作品集 (2)_edited.png

Shop N Scan 1.0

lack of efficiency and consistency

IDEATING LOFI SOLUTION

When ideating design solutions, I focus on simplifying interactions and visual aids and reorganizing element hierarchy to improve efficiency and boost task completion rates.

Frame 22858.png

Solution 1

Scan-focused design

Advantage

Trade-off

Frame 22859.png

Solution 2

Item-review focused design

Advantage

Trade-off

Frame 22860.png

Solution 3

Simplified item-review design

Advantage

Minor trade off  (future iteration)

HIFI MOCKUP

updated swipe to delete gif.gif

Shop N Scan 2.0

Improved structure and interaction

OTHER KEY ITERATION 

card previous login.png
white_gif_login.gif

Registration 2.0

Emphasize call to action and navigation

card shop checckout 3.png
gif shop checkout.gif

Check out 2.0

Streamline informational value and check out efficiency

ITERATED USER FLOW

workflow 2.png

Product manager, 12:44PM

Now that we have our design let's launch it in the app store!!

Me, 1:12 PM

Wait a minute...let's run some research to find out if the iterated design improves user flow and targets users' primary needs

USABILITY TESTING - DESIGN VALIDATION

4 grocery stores visits with 30 customers ages between 17-48

I implemented a mixed-method research approach, combining both usability testing and a questionnaire, to evaluate our product in a real-world setting before its initial launch

Add a little bit of body text.png

7.7%

92% of customers rate 5/5 for page navigation

The design demonstrates a good understanding of users’ journey, and the labeling and presentation of our information are on the right track.

92.3%

61.9% of customers express their willingness to purchase our service

Our service successfully target one potential pain point of in-store shoppers, and we are confident that our service will fill in a current market gap.

Add a little bit of body text (1).png
Add a little bit of body text (2)_edited

But around 46.2% of participants have difficulties activating scanning

The most important feature—barcode scanning, still has some remaining usability issue for customers and need further iteration

What's up with scanning? Finding root cause

"The instruction wasn't clear... I thought the camera would just scan the bar code by its own🤔🤔!"

Customer A, 3:12 PM

"Umm, the dev team doesn't have much time to implement over-complex onboarding feature"

Developers, 4:22 PM

Gif 1st guide.gif

NEXT STEP - BALANCING CONSTRAINTS WITH OPPORTUNITY

Frame 22868.png

BRIEF LOOK BACK

My key takeaways

  • There's never a perfect scenario—constraints will always arise when designing. The key is to be adaptable and find creative ways to work around them.

  • Support proposals with solid evidence and data—numbers speak louder and foster clear, effective communication across teams

f2c222d54995dc60-sticker.PNG

​Other works...

Donit

cover2.png

MongoDB

Untitled design (21).png

That Sweet Lyfe

bottom of page