Redesigning 3 core tasks for 7Dish’s Meal Planning App


Increased user satisfaction by enhancing usability, providing appropriate flexibility, and introducing user-requested features.

Increased user satisfaction by enhancing usability, providing appropriate flexibility, and introducing user-requested features.

Sep - Jan 2024

Redesigning 3 core tasks for 7Dish’s Meal Planning App


Redesigning 3 core tasks for 7Dish’s Meal Planning App


Increased user satisfaction by enhancing usability, providing appropriate flexibility, and introducing user-requested features.

Increased user satisfaction by enhancing usability, providing appropriate flexibility, and introducing user-requested features.

Increased user satisfaction by enhancing usability, providing appropriate flexibility, and introducing user-requested features.

Increased user satisfaction by enhancing usability, providing appropriate flexibility, and introducing user-requested features.

Sep - Jan 2024

Redesigning 3 core tasks for 7Dish’s Meal Planning App


Increased user satisfaction by enhancing usability, providing appropriate flexibility, and introducing user-requested features.

Increased user satisfaction by enhancing usability, providing appropriate flexibility, and introducing user-requested features.

Sep - Jan 2024

Sector: Consumer, Meal planning mobile app

Team: Company CEO, Digital Marketing Director, UX Researcher, 2 developers

Client: 7dish, 5-employee startup, Quebec-CAN

My Role: UX/UI Designer, 12 weeks

User group: Working parents, head of household

Impact: Positive user feedback during testing indicates higher satisfaction, likely leading to increased app recommendations and organic growth.

Background & Project Goals

Background & Project Goals

I was hired by 7dish to redesign 3 core user tasks

I was hired by 7dish to redesign 3 core user tasks

Considering the majority of its user base access 7dish on mobile, 7dish hired me to introduce a native mobile app for meal planning. This initiative opened the door to tackling the existing design debt while addressing usability challenges in the previous design. 

7dish users struggled when performing core tasks, often stemming from feeling confused or having a sense of getting lost throughout their journeys.

I was hired to determine the root causes behind users' struggles and to redesign 3 core user tasks:

  1. Creating a meal plan

  2. Saving a recipe, and

  3. Creating a shopping list

Considering the majority of its user base access 7dish on mobile, 7dish hired me to introduce a native mobile app for meal planning. This initiative opened the door to tackling the existing design debt while addressing usability challenges in the previous design. 

7dish users struggled when performing core tasks, often stemming from feeling confused or having a sense of getting lost throughout their journeys.

I was hired to determine the root causes behind users' struggles and to redesign 3 core user tasks:

  1. Creating a meal plan

  2. Saving a recipe, and

  3. Creating a shopping list

Considering the majority of its user base access 7dish on mobile, 7dish hired me to introduce a native mobile app for meal planning. This initiative opened the door to tackling the existing design debt while addressing usability challenges in the previous design. 


7dish users struggled when performing core tasks, often stemming from feeling confused or having a sense of getting lost throughout their journeys.


I was hired to determine the root causes behind users' struggles and to redesign 3 core user tasks:

  1. Creating a meal plan

  2. Saving a recipe, and

  3. Creating a shopping list

Existing design

Existing design

Homepage

Ineffective navigation

  • Blocked buttons

  • Long and unclear copy

Shopping List

Non-compliant contrasts

Non-compliant contrasts

Homepage - Carousel

Lack of consistency

  • Most buttons use the same color regardless of state

Non-compliant contrasts

Previous design

Homepage

Ineffective navigation

  • Blocked buttons

  • Long and unclear copy

Shopping List

Non-compliant contrasts

Homepage - Carousel

Lack of consistency

  • Most buttons use the same color regardless of state

Non-compliant contrasts

1

Non-compliant contrast

2

Lack of consistency: Most buttons use the same color regardless of state

3

Ineffective navigation: Blocked buttons & long and unclear copy

Homepage

3

Shopping List

1

Homepage - Carousel

1

2

Existing design

Homepage

Ineffective navigation

  • Blocked buttons

  • Long and unclear copy

Shopping List

Non-compliant contrasts

Homepage - Carousel

Lack of consistency

  • Most buttons use the same color regardless of state

Non-compliant contrasts

1

Non-compliant contrast

2

Lack of consistency: Most buttons use the same color regardless of state

3

Ineffective navigation: Blocked buttons & long and unclear copy

Homepage

3

Shopping List

1

Homepage - Carousel

1

2

Designing

Designing

Redesigning core task #1: Create a Meal Plan

Redesigning core task #1: Create a Meal Plan

After conducting a design audit, I identified two key issues:

  • Creating a meal plan was laborious, requiring several clicks/actions

  • Adding recipes to a meal plan lacked order, and it did not help the user plan when to prepare meals

Addressing these concerns, I redesigned the flow and introduced:

  • Organized daily meal planning

  • Meal type selection: Breakfast, lunch, snack, & dinner

  • A straightforward approach to add meals from saved folders

After conducting a design audit, I identified two key issues:

  • Creating a meal plan was laborious, requiring several clicks/actions

  • Adding recipes to a meal plan lacked order, and it did not help the user plan when to prepare meals

Addressing these concerns, I redesigned the flow and introduced:

  • Organized daily meal planning

  • Meal type selection: Breakfast, lunch, snack, & dinner

  • A straightforward approach to add meals from saved folders

Solutions

Solutions

A/B Testing

A/B Testing

I had 2 competing ideas for "creating a meal plan"

I had 2 competing ideas for "creating a meal plan"

When redesigning ‘creating a meal plan’, my main focus centered around weekly planning, offering users an efficient way to organize meals.

I explored two design approaches:

  1. More flexible: Day-by-day planning with specific prep & cook times, offering a granular time-focus design.

  2. Less flexible: Quicker and smoother selection from saved recipes that provides users with greater efficiency by omitting time specifics.

I wasn’t sure which one would offer users the most value, so it was time to do a concept test.

When redesigning ‘creating a meal plan’, my main focus centered around weekly planning, offering users an efficient way to organize meals.

I explored two design approaches:

  1. More flexible: Day-by-day planning with specific prep & cook times, offering a granular time-focus design.

  2. Less flexible: Quicker and smoother selection from saved recipes that provides users with greater efficiency by omitting time specifics.

I wasn’t sure which one would offer users the most value, so it was time to do a concept test.

1

Multi-day selection: The majority of users were confused by multiple selections

2

Large food cards: Users felt "overwhelmed" by the real estate taken.


Concept A: More flexible

2

1

1

Single-day selection

2

Horizontal scroll: Combined with smaller images, usability became more efficient.

3

Unscheduled tab: Accessible and minimizable

Winning concept!
Concept B: Less flexible

1

2

3

1

Multi-day selection: The majority of users were confused by multiple selections

2

Large food cards: Users felt "overwhelmed" by the real estate taken.


Concept A: More flexible

2

1

1

Single-day selection

2

Horizontal scroll: Combined with smaller images, usability became more efficient.

3

Unscheduled tab: Accessible and minimizable

Winning concept!
Concept B: Less flexible

1

2

3

1

Multi-day selection: The majority of users were confused by multiple selections

2

Large food cards: Users felt "overwhelmed" by the real estate taken.


Concept A: More flexible

2

1

1

Single-day selection

2

Horizontal scroll: Combined with smaller images, usability became more efficient.

3

Unscheduled tab: Accessible and minimizable

Winning concept!
Concept B: Less flexible

1

2

3


Concept A: More flexible

Multi-day selection

  • Tested: Majority of users confused by selections

Large food cards

  • Tested: Users felt "overwhelmed" by the real estate taken.

Winning concept!
Concept B: Less flexible

Single-day selection

Unscheduled tab

  • Accessible and minimizable

Horizontal scroll

  • Combined with smaller images, usability became more efficient.


Concept A: More flexible

Multi-day selection

  • Tested: Majority of users confused by selections

Large food cards

  • Tested: Users felt "overwhelmed" by the real estate taken.

Winning concept!
Concept B: Less flexible

Single-day selection

Unscheduled tab

  • Accessible and minimizable

Horizontal scroll

  • Combined with smaller images, usability became more efficient.

1

Multi-day selection: The majority of users were confused by multiple selections

2

Large food cards: Users felt "overwhelmed" by the real estate taken.


Concept A: More flexible

2

1

1

Single-day selection

2

Horizontal scroll: Combined with smaller images, usability became more efficient.

3

Unscheduled tab: Accessible and minimizable

Winning concept!
Concept B: Less flexible

1

2

3

1

Multi-day selection: The majority of users were confused by multiple selections

2

Large food cards: Users felt "overwhelmed" by the real estate taken.


Concept A: More flexible

2

1

1

Single-day selection

2

Horizontal scroll: Combined with smaller images, usability became more efficient.

3

Unscheduled tab: Accessible and minimizable

Winning concept!
Concept B: Less flexible

1

2

3

Iterating

Iterating

While testing the full flow, I learned that giving too much flexibility wasn’t successful, so some changes were made

While testing the full flow, I learned that giving too much flexibility wasn’t successful, so some changes were made

Concept #2 won! This provided a clear direction to follow for the rest of the redesign.

I learned that users value:

  • Quick choice - eg. easy dropdowns and horizontal scrolls

  • High-level daily planning view

  • Short instructions

I then focused on redesigning the app homepage. Users were confused on how to start meal planning.

Initially, I discarded a three-step guide concept that previously proved to confuse users. This led to a successful redesign that addressed the main issues affecting the initial three-step guide design: colors, button size, and copy.

Concept #2 won! This provided a clear direction to follow for the rest of the redesign.

I learned that users value:

  • Quick choice - eg. easy dropdowns and horizontal scrolls

  • High-level daily planning view

  • Short instructions

I then focused on redesigning the app homepage. Users were confused on how to start meal planning.

Initially, I discarded a three-step guide concept that previously proved to confuse users. This led to a successful redesign that addressed the main issues affecting the initial three-step guide design: colors, button size, and copy.

Concept #2 won! This provided a clear direction to follow for the rest of the redesign.

I learned that users value:

  • Quick choice - eg. easy dropdowns and horizontal scrolls

  • High-level daily planning view

  • Short instructions

I then focused on redesigning the app homepage. Users were confused on how to start meal planning.

Initially, I discarded a three-step guide concept that previously proved to confuse users. This led to a successful redesign that addressed the main issues affecting the initial three-step guide design: colors, button size, and copy.

Concept #2 won! This provided a clear direction to follow for the rest of the redesign.

I learned that users value:

  • Quick choice - eg. easy dropdowns and horizontal scrolls

  • High-level daily planning view

  • Short instructions

I then focused on redesigning the app homepage. Users were confused on how to start meal planning.

Initially, I discarded a three-step guide concept that previously proved to confuse users. This led to a successful redesign that addressed the main issues affecting the initial three-step guide design: colors, button size, and copy.

Homepage comparison

1

Unnecessary use of space

2

Unclear instructions

2

Misleading descriptions

Before

1

2

3

1

Short instructions: Clear copy with prioritized placement

2

New food card: Food titles separated from images, for AAA compliant contrast.

3

New home button: All active-state navigation buttons include an indicator

After

1

2

3

1

2

3

Homepage comparison

1

Unnecessary use of space