Helping Independent Grocery Market Owners Start Online Business
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.
ROLE + RESPONSIBILITY
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)
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.”
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
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.
the overall information architecture of the prototype first iteration
3 major features of the prototype first iteration
User Testing - Round 2
Internal testing + usertesting.com
User flow of certain tasks
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.
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.
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.
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.
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.