Existing design usability issues

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

3

Shopping List

1

1

Homepage - Carousel

1

1

2

Redesigning 3 core tasks for 7dish's meal planning app

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.

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.

Sep - Jan 2024

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

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

Sector: Consumer, Meal planning mobile app

Sector: Consumer, Meal planning mobile app

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

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

My Role: User interviews, competitive analysis, UX design, UI design - 12 weeks

My Role: User interviews, competitive analysis, UX design, UI design - 12 weeks

User group: Working parents, head of household

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.

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

Hello!

Hello!

This is my one of the many solutions I came up with

This is my one of the many solutions I came up with

Scroll down and see how these solutions drastically improved the meal planning experience, and the process that brought it to life.

Scroll down and see how these solutions drastically improved the meal planning experience, and the process that brought it to life.

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 most users access 7dish on mobile, they 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

Starting with the homepage, below is the final before vs. after.

Considering most users access 7dish on mobile, they 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

Starting with the homepage, below is the final before vs. after.

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

Before vs. after

1

Unnecessary use of space

2

Unclear instructions

2

Misleading descriptions

Before

1

2

3

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

Before vs. after

Before

Unnecessary use of space

Unclear instructions

Misleading descriptions

After

Short instructions

  • Clear copy with prioritized placement

New food card

  • Food titles separated from images, for AAA compliant contrast.

New home button

  • Includes an indicator

Before vs. after - Homepage

1

Unnecessary use of space

2

Unclear instructions

2

Misleading descriptions

Before

1

2

3

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

Before

Unnecessary use of space

Unclear instructions

Misleading descriptions

After

Short instructions

  • Clear copy with prioritized placement

New food card

  • Food titles separated from images, for AAA compliant contrast.

New home button

  • Includes an indicator

Process

Process

I started by auditing and pinpointing existing usability issues, giving a strong foundation to my design decisions

I started by auditing and pinpointing existing usability issues, giving a strong foundation to my design decisions

I conducted research based on 7dish's analytics and interviews with current users and realized they often did a "back and forth" in the process of completing core tasks. Users reported experiencing confusion while attempting to complete their tasks.

I identified the main reasons were due to:

  • Unclear instructions

  • Icon and common pattern inconsistencies

  • Ineffective navigation.

I conducted research based on 7dish's analytics and interviews with current users and realized they often did a "back and forth" in the process of completing core tasks. Users reported experiencing confusion while attempting to complete their tasks.

I identified the main reasons were due to:

  • Unclear instructions

  • Icon and common pattern inconsistencies

  • Ineffective navigation.

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

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

3

Shopping List

1

1

Homepage - Carousel

1

1

2

Before - Usability issues

Before - Usability issues

These usability issues prevented users from having a clear path to follow

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

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

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 and 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, and dinner

  • A straightforward approach to adding meals from saved folders

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

  • Creating a meal plan was laborious, requiring several clicks and 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, and dinner

  • A straightforward approach to adding meals from saved folders

Before: Meal plan page

User Flow Chart Task: Creating a meal plan

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 and cook times, offering a granular time-focus design.

  2. More controlled: 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.

I conducted moderated testing and gave users a specific task: make a meal plan. Most users reported feeling confused with concept A.

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 and cook times, offering a granular time-focus design.

  2. More controlled: 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.

I conducted moderated testing and gave users a specific task: make a meal plan. Most users reported feeling confused with concept A.

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.