eFresh
Helping Independent Grocery Market Owners Start Online Business
THE CHALLENGE
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?
THE OUTCOME
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.
ROLE + RESPONSIBILITY
Primary UX / UI Designer
JTBD, wireframing, user interview, lo-fi & hi-fi prototyping, user testing, UI design
TEAM
Ellen Huang / app for market owner
Andrew Nguyen / app for driver
Rui Sun / app for customer
Siyu Hou / app for restaurant owner
DURATION
Sep 2018 - Dec 2018 (3 months)
Design Process
-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
Michael
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.”
Shahab
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.”
Vincent
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.”
Define
Job-To-Be-Done Statement
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
-
Users want to show personality / history of the market.
-
Users want to highlight items.
-
Users want to check order status in a more direct way.
-
Users want a more effective way to list items.
Prototype
the overall information architecture of the prototype first iteration
3 major features of the prototype first iteration
User Testing - Round 2
Testing Format
Internal testing + usertesting.com
Test Goal
-
User flow of certain tasks
-
User interface
User Testing Takeaways
-
Users failed to highlight the items through the flow I designed.
-
Users felt unnatural when adding items they are directly taken to camera page.
-
Users felt they can’t identify different orders only through numbers.
-
Users wanted to see more detailed information about different events.
-
Users felt confused about some icons.
-
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.
BEFORE
-
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.
BEFORE
AFTER
AFTER
-
Checking Events Details - New Flow
Users can check events details by clicking the arrow at the bottom of each events card.
-
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.
BEFORE
AFTER
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.
Final Prototype
Reflection
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.