About:
Atlanta Meal prep is a food prep and delivery service in the heart of Atlanta, USA.
Challenge
WordPress service designed by a graphic designer, which made UX cumbersome, slow, and somewhat limited.
Impact
I redesigned the service reducing order time completion by 300% and increased the ordering success rate 4x.
Team
Client
Me as designer
1 BE engineer
1 FE engineer
Client
Me as designer
1 BE engineer
1 FE engineer
Client
Me as designer
1 BE engineer
1 FE engineer
My role
User research & analysis
UX and UI redesign
Design library kit
Usability testing
User research & analysis
UX and UI redesign
Design library kit
Usability testing
User research & analysis
UX and UI redesign
Design library kit
Usability testing
Timeline
April 2020 - July 2020
April 2020 - July 2020
April 2020 - July 2020
Order success rate increased
Order success rate increased
4x
Reduced time spent per order flow
Reduced time spent per order
300
%
%
SUS score from
47,5 (F) to
SUS score from
47,5 (F) to
SUS score from 47,5 (F) to
82(B)
82
(B)
Assessing UX before the redesign
Assessing UX before the redesign
Assessing UX before the redesign
Example
Interviews
Heuristic analysis outlining the key usability problems and improvement opportunities.
Interviews & usability testing with 10 loyal customers on top tasks + SUS benchmarking.
Example
Interviews
Heuristic analysis outlining the key usability problems and improvement opportunities.
Interviews & usability testing with 10 loyal customers on top tasks + SUS benchmarking.
Example
Interviews
Heuristic analysis outlining the key usability problems and improvement opportunities.
6 areas for improvements
6 areas for improvements
6 areas for improvements
1.
Improve visual hierarchy
Improve visual hierarchy
4.
2.
From a hard-coded menu to a contextual
From a hard-coded menu to a contextual
2.
3.
Redesign clunky scanning UX
Redesign clunky scanning UX
5.
4.
Add affordances and system feedback
Add affordances and system feedback
3.
50 shades of button into consistent IxD
50 shades of button into consistent IxD
6.
Introduce missing features and loyalty
Introduce missing features and loyalty
Exploring & designing
Exploring & designing
Exploring & designing
Challenge #1
Redesign a menu type selection.
19 hard-coded options to contextual flow.
Example
Concept #2
Concept #3
Concept #4
Layout
2 column progressive layout
Logic
Based on the menu type (weekly/custom), the customer sees different submenus.
Challenge #1
Redesign a menu type selection.
19 hard-coded options to contextual flow.
Example
Concept #2
Concept #3
Concept #4
Layout
2 column progressive layout
Logic
Based on the menu type (weekly/custom), the customer sees different submenus.
Challenge #1
Redesign a menu type selection. From 19 hard-coded options to contextual input-based flow.
Example
#2
#3
#4
Layout
2 column progressive layout
Logic
Based on the menu type (weekly/custom), the customer sees different submenus.
Concept decision
I've landed on a hybrid solution between concepts #1 and #4. Combining the convenience of progressive menu selection, but keeping submenu options in the same left column.
Concept decision
I've landed on a hybrid solution between concepts #1 and #4. Combining the convenience of progressive menu selection, but keeping submenu options in the same left column.
The choice
I've landed on a hybrid solution between concepts #1 and #4. Combining the convenience of progressive menu selection, but keeping submenu options in the same left column.
Design flow
Challenge #2
Redesign an order flow, keep the logic:
1 entry meal + 2 side dishes selection.
Example
Concept #2
Layout
Top bar + 1 column + Summary
Logic
From a number of meals, guests land on 1 column centered content with accordions for entries/sides. Accordions collapse as soon as the right number of meals is selected.
Challenge #2
Redesign an order flow, keep the logic:
1 entry meal + 2 side dishes selection.
Example
Concept #2
Layout
Top bar + 1 column + Summary
Logic
From a number of meals, guests land on 1 column centered content with accordions for entries/sides. Accordions collapse as soon as the right number of meals is selected.
Challenge #2
Redesign an order flow, keep the logic:
1 entry meal + 2 side dishes selection.
Example
Concept #2
Layout
Top bar + 1 column + Summary
Logic
From a number of meals, guests land on 1 column centered content with accordions for entries/sides. Accordions collapse as soon as the right number of meals is selected.
Decision time
I chose concept #1 because switching the tabs between entry meals and side dishes can feel disruptive.
Decision time
I chose concept #1 because switching the tabs between entry meals and side dishes can feel disruptive.
The choice
I chose concept #1 because switching the tabs between entry meals and side dishes can feel disruptive.
Design flow
Before/After the redesign
Before/After the redesign
Numbers of meals
Meal selection
Add addons
Review order
Checkout
Numbers of meals
Meal selection
Add addons
Review order
Checkout
Other design details
Other design details
Other design details
Numbers of meals
Meal selection
Add addons
Review order
Checkout
Numbers of meals
Meal selection
Add addons
Review order
Checkout
Before/After
Before/After
New features
Add-ons before checkout
Gift card
Loyalty program
Meals duplication
Unifying design library
Unifying design library
Usability testing insights
Usability testing insights
Usability testing insights
Usability testing insight #1
A/B testing on mobile navigation
A/B variants
Results
Context
I wasn't sure about mobile navigation patterns, choosing between bottom breadcrumbs and contextual accordions.
Solution
I threw an unmoderated prototype testing on 2 different groups of users.
Usability testing insight #1
A/B testing on mobile navigation
A/B variants
Results
Context
I wasn't sure about mobile navigation patterns, choosing between bottom breadcrumbs and contextual accordions.
Solution
I threw an unmoderated prototype testing on 2 different groups of users.
Usability testing insight #1
A/B testing on mobile navigation
A/B variants
Results
Context
I wasn't sure about mobile navigation patterns, choosing between bottom breadcrumbs and contextual accordions.
Solution
I threw an unmoderated prototype testing on 2 different groups of users.
Usability testing insight #2
Review meals before checkout
Data
Iteration
Context
Heatmap data suggested that when users were asked to go back and edit their selection on mobile devices, his led to 40% errors.
Main issue:
The start over button sounds ambiguous.
Usability testing insight #2
Review meals before checkout
Data
Iteration
Context
Heatmap data suggested that when users were asked to go back and edit their selection on mobile devices, his led to 40% errors.
Main issue:
The start over button sounds ambiguous.
Usability testing insight #2
Review meals before checkout
Data
Iteration
Context
Heatmap data suggested that when users were asked to go back and edit their selection on mobile devices, his led to 40% errors.
Main issue:
The start over button sounds ambiguous.
Usability testing insight #3
Duplication flow
Data
Iteration
Users were confused why they have to select the menu items again.
Additionally It was visually not clear what is entry, what is side dish.
I’ve also noticed that people ignored the ‘back’ arrow on the header.
Usability testing insight #3
Duplication flow
Data
Iteration
Users were confused why they have to select the menu items again.
Additionally It was visually not clear what is entry, what is side dish.
I’ve also noticed that people ignored the ‘back’ arrow on the header.
Usability testing insight #3
Duplication flow
Data
Iteration
Users were confused why they have to select the menu items again.
Additionally It was visually not clear what is entry, what is side dish.
I’ve also noticed that people ignored the ‘back’ arrow on the header.
Results
Results
Results
SUS Before
SUS Before
