eFresh

Helping Independent Grocery Market Owners Start Online Business

Group 7.png
Group 8.png

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

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

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

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

usabilitydashboard_Page_1.jpg

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

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 + usertesting.com 

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

BEFORE

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

BEFORE

AFTER

AFTER

  • 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

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.

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

Final Prototype

final.png

 

 

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.