top of page

Helping Independent Grocery Market Owners Start Online Business

Group 7.png
Group 8.png



Independent local grocery stores have been experiencing a decline in profits. What can we do to help independents make more profits and better engage with the community? Meanwhile, how to make seasonal healthy groceries more accessible to people?


A holistic online grocery selling / shopping system - “eFresh”. It includes 4 different apps targeting different user types - local grocery market owners; individual customers; local restaurant owners and delivery drivers.


I designed the app for local grocery market owners. It’s a platform that helps independent market owners make more profits and engage better with the community by starting their own online business. 


Primary UX / UI Designer


JTBD, wireframing, user interview, lo-fi & hi-fi prototyping, user testing, UI design


Ellen Huang / app for market owner

Andrew Nguyen / app for driver

Rui Sun / app for customer

Siyu Hou / app for restaurant owner


Sep 2018 - Dec 2018 (3 months)

Design Process

Timeline (2)-17.png



Industry Research



With decreased dollar sales, flat margins and higher expenses, the independent grocery sector saw net profit before taxes decline to 0.09% in 2017 from 0.98% the year before. EBITDA also fell to 1.4% from 1.85%, yet NGA(National Grocers Association)’s report said that result shows that independents remain cash-flowing. 

User Research - Interview with Market Owners


Owner, Raxakoul Coffee & Cheese

“Yeah, we’d love to start online business. But we don’t know how to do it and we don’t want to put too much efforts to maintain it.”


Owner, Monterey Market

“We used to be in partnership with a local Berkeley pizza place, but they canceled it after two years because we do not support delivery.”


Manager, Berkeley Natural Grocery

“Online store with events marketing will be a nice way to engage with the community! Especially now since everything has gone online.”






Job-To-Be-Done Statement

JTBD new.png



Ideate And Wireframe

Targeting different user needs, I designed 4 major features to help users achieve their goals:

Feature - Customer needs 

  • My Market - Enable online selling

  • Chat - Assist customers in time

  • Events - Better engage with the community

  • Track Delivery - Enable reliable grocery delivery



User Testing - Round 1


Testing Format

In-person Interview

Test Goal

  • Value proposition

  • Information architecture

  • User flow of major features

User Testing Takeaways

  1. Users want to show personality / history of the market.

  2. Users want to highlight items.

  3. Users want to check order status in a more direct way. 

  4. Users want a more effective way to list items. 




prototype iteration.png

the overall information architecture of the prototype first iteration

prototype iteration.png

3 major features of the prototype first iteration



User Testing - Round 2



Testing Format

Internal testing + 

Test Goal

  • User flow of certain tasks

  • User interface

User Testing Takeaways

  1. Users failed to highlight the items through the flow I designed.

  2. Users felt unnatural when adding items they are directly taken to camera page.

  3. Users felt they can’t identify different orders only through numbers.

  4. Users wanted to see more detailed information about different events.

  5. Users felt confused about some icons. 

  6. Overall interface does not seem holistic. 



User Experience Iteration



  • Adding Items - Adjusted Flow


After clicking “Add items” button, instead of being directly taken to camera page, users are presented with a template page so that they can get an overview first. Then they can choose if they want to take a live photo or use existing photo.

final prototype ux new-04.png


final prototype ux new-03.png

  • Highlighting Items - Additional Flow


Users are given more options in performing the task - highlighting items. They can either mark it during adding process or highlight it directly on market main page by clicking the star next to it.

final prototype ux new-02.png
final prototype ux new-01.png




  • Checking Events Details - New Flow    


Users can check events details by clicking the arrow at the bottom of each events card. 

final prototype ux new-06.png



  • Checking Order Status - Simplified Flow

After consulting the team member who did interviews with delivery drivers, we both agreed that contacting drivers directly can be very distractive. Instead, they can contact delivery service to help them with order status. And I also added more specific information about orders (like customer name) to the main page, so that it’s easier for users to identify different orders.



final prototype ux new-07.png
final prototype ux new-08.png






User Interface Iteration



In order to reach alignment between the 4 apps in our team, we developed a UI design library. 


The iterated interface provides a more holistic experience - warm and inviting. I further improved all the icons to make them consistent.

Screen Shot 2019-01-19 at 11.01.19 AM co
final prototype info archi.png

Final Prototype





What didn’t make it:

  • Till the end, we were still in lack of logical alignments between the 4 apps.

  • The interview session was lack of focus. 

  • UI design library came at a very late stage of the project. It could be more holistically integrated into design process.

What we did right: 

  • 2 different user testing sessions were very fruitful in providing me with insights on different aspects.

  • We learned a lot from each other through the collaboration process.

bottom of page