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:
Creating a meal plan
Saving a recipe, and
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:
Creating a meal plan
Saving a recipe, and
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:
Creating a meal plan
Saving a recipe, and
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:
Creating a meal plan
Saving a recipe, and
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:
More flexible: Day-by-day planning with specific prep and cook times, offering a granular time-focus design.
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:
More flexible: Day-by-day planning with specific prep and cook times, offering a granular time-focus design.
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.
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: More controlled
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: e.g., easy dropdowns and horizontal scrolls
High-level daily planning view
Short instructions
I then focused on redesigning the app's homepage. Users were confused on starting 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: e.g., easy dropdowns and horizontal scrolls
High-level daily planning view
Short instructions
I then focused on redesigning the app's homepage. Users were confused on starting 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.
Before
Middle positioning
Takes half the screen
Long copy
Takes more time for user to scan
After
Top positioning
Taking less real estate
Top positioning
Taking less real estate
Short copy
Easy to scan, following a top to bottom approach
Short copy
Easy to scan, following a top to bottom approach
Designing
Designing
Redesigning core task #2: Saving a recipe
Redesigning core task #2: Saving a recipe
My next task was to redesign ‘saving a recipe’.
Users consistently save and search through recipes, which is an integral part of their recipe browsing before finalizing weekly meal plans. However, the existing recipe-saving flow lacked a connection between the 'Saved' and 'Meal Planner' screens.
Users expressed concerns about managing a growing list of saved recipes. This finding led me to incorporate the following features in the design, addressing user concerns:
A dedicated search bar on the 'Saved' screen
A sorting button
Smaller food cards, adding consistency throughout
A single-page user flow
My next task was to redesign ‘saving a recipe’.
Users consistently save and search through recipes, which is an integral part of their recipe browsing before finalizing weekly meal plans. However, the existing recipe-saving flow lacked a connection between the 'Saved' and 'Meal Planner' screens.
Users expressed concerns about managing a growing list of saved recipes. This finding led me to incorporate the following features in the design, addressing user concerns:
A dedicated search bar on the 'Saved' screen
A sorting button
Smaller food cards, adding consistency throughout
A single-page user flow
My next task was to redesign the ‘saving a recipe’ flow.
Users consistently save and search through recipes, which is an integral part of their recipe browsing before finalizing weekly meal plans. However, the existing recipe-saving flow lacked a connection between the 'Saved' and 'Meal Planner' screens.
Most users expressed concerns about managing a growing list of saved recipes as they use the app consistently. This finding led me to incorporate the following features in the design, addressing user concerns:
A dedicated search bar on the 'Saved' screen
A sorting button
Smaller food cards, adding consistency throughout
A single-page user flow
My next task was to redesign the ‘saving a recipe’ flow.
Users consistently save and search through recipes, which is an integral part of their recipe browsing before finalizing weekly meal plans. However, the existing recipe-saving flow lacked a connection between the 'Saved' and 'Meal Planner' screens.
Most users expressed concerns about managing a growing list of saved recipes as they use the app consistently. This finding led me to incorporate the following features in the design, addressing user concerns:
A dedicated search bar on the 'Saved' screen
A sorting button
Smaller food cards, adding consistency throughout
A single-page user flow
'Saved' comparison
Saved - Step 1
Mostly empty screen
Saved - Step 2
Non-compliant contrast
Difficult-to-read food titles
Excessively large image
Visually overwhelming scroll
Streamlined 'Saved'
Saved - Step 1
Mostly empty screen
Saved - Step 2
Non-compliant contrast
Difficult-to-read food titles
Excessively large image
Visually overwhelming scroll
Streamlined 'Saved'
1
Mostly empty space
2
Non-compliant contrast: Recipe titles are difficult to read.
2
Excessively large imagery: overwhelming to users.
Saved - Step 1
1
1
Saved - Step 2
2
3
2
3
Streamlined 'Saved'
Testing & Iterating
Testing & Iterating
Testing: The new navigation worked well, but we were still missing something
Testing: The new navigation worked well, but we were still missing something
I put together the first two redesigned core tasks with a new navigation structure. Users were happy with the new navigation as it solved the problem of finding older recipes and meal plans. However, there was a need for users to categorize their saved recipes as well as contextualize their reasons for saving them in the first place.
To address this, I implemented the Saved Folders feature.
This new feature provides an efficient way to separate recipes into two main categories:
Fixed folders like ‘Meals Made’ and ‘My Recipes’
Custom folders like ‘Christmas 2024’ or ‘Halloween Recipes’
This enhancement provides users with the flexibility to explore and pre-plan for future events without the commitment of weekly or daily planning.
I put together the first two redesigned core tasks with a new navigation structure. Users were happy with the new navigation as it solved the problem of finding older recipes and meal plans. However, there was a need for users to categorize their saved recipes as well as contextualize their reasons for saving them in the first place.
To address this, I implemented the Saved Folders feature.
This new feature provides an efficient way to separate recipes into two main categories:
Fixed folders like ‘Meals Made’ and ‘My Recipes’
Custom folders like ‘Christmas 2024’ or ‘Halloween Recipes’
This enhancement provides users with the flexibility to explore and pre-plan for future events without the commitment of weekly or daily planning.
Saved recipes
Saved meal plans
Saved recipes
Saved meal plans
Prototype
Saved recipes
Saved meal plans
Prototype
Saved recipes
Saved meal plans
Prototype
Saved recipes
Saved meal plans
Saved screens
Saved recipes
Saved meal plans
Designing
Designing
Redesigning core task #3: Making a shopping list
Redesigning core task #3: Making a shopping list
Having a shopping list at the end of their meal planning is a fundamental step in completing the user journey.
I noticed three main usability issues in the flow:
The absence of an option to delete one item at a time
The use of type-in bars instead of dropdowns causes miscalculations (misspellings)
Adding items and categories was excessively flexible (basic items confused)
In the redesign, the primary focus was to:
Achieve easy access to editing and deleting items.
Incorporate predetermined categories attached to items for efficient additions.
Simplify the main screen by clearly separating item categories.
Having a shopping list at the end of their meal planning is a fundamental step in completing the user journey.
I noticed three main usability issues in the flow:
The absence of an option to delete one item at a time
The use of type-in bars instead of dropdowns causes miscalculations (misspellings)
Adding items and categories was excessively flexible (basic items confused)
In the redesign, the primary focus was to:
Achieve easy access to editing and deleting items.
Incorporate predetermined categories attached to items for efficient additions.
Simplify the main screen by clearly separating item categories.
Existing Design (Before)
Users mentioned:
From the existing design, users mentioned:
"I don't understand what "+ usuals" means"
"I can't delete my items, but the whole category and I have to start that category over..."
"I hadn't even seen that first icon!"
"I hadn't even seen that first icon!"
Testing & Iterating
Testing & Iterating
I couldn’t figure out the most effective behavior for checked items, so I tested
I couldn’t figure out the most effective behavior for checked items, so I tested
Initially, I designed ‘making a shopping list’ so that checked and unchecked items would be on the same screen. However, 4/5 users expressed a preference for a clearer separation between ‘checked’ and ‘unchecked’ to keep track of purchases more efficiently.
Recognizing the shortcomings of the initial concept, a second screen was designed and tested, including the following enhancements:
Separating checked and unchecked items for a consistently clean list
Introducing color-coding separators
Streamlining the process of adding items while allowing room for future options.
Initially, I designed ‘making a shopping list’ so that checked and unchecked items would be on the same screen. However, 4/5 users expressed a preference for a clearer separation between ‘checked’ and ‘unchecked’ to keep track of purchases more efficiently.
Recognizing the shortcomings of the initial concept, a second screen was designed and tested, including the following enhancements:
Separating checked and unchecked items for a consistently clean list
Introducing color-coding separators
Streamlining the process of adding items while allowing room for future options.
Searching for items
Searching for Items
Visual instructions
Redesigned shopping list (After)
Searching for items
Visual instructions
Redesigned shopping list (After)
Final Testing
Final Testing
Testing all 3 tasks together revealed a much better app experience!
Testing all 3 tasks together revealed a much better app experience!
Users were able to test the app as a whole and give final feedback before launching.
Some of the feedback that we received:
“I love how I can now personalize more than I was able to before.”
“I really liked the previous app already, but this new one feels so fresh, and I can’t wait for it to be out.”
Users were able to test the app as a whole and give final feedback before launching.
Some of the feedback that we received:
“I love how I can now personalize more than I was able to before.”
“I really liked the previous app already, but this new one feels so fresh, and I can’t wait for it to be out.”
Success!
10/10 of users rated the new app design 8 or above
Overall user satisfaction survey
Functionality
1
2
3
4
5
6
7
8
9
10
Poor
Great
User-friendliness
1
2
3
4
5
6
7
8
9
10
Poor
Great
Aesthetic
1
2
3
4
5
6
7
8
9
10
Poor
Great
Collaboration
Collaboration
There were moments of team controversy
There were moments of team controversy
Some of the most controversial features/concepts were:
Eliminating the previous “Inspiration” page to open the door to a new homepage, giving users quicker and more intuitive access to recipe browsing.
The addition of the “saved recipes folders” feature: This feature enables users to achieve a higher level of organization within their saved recipes.
Positive user testing results helped convince my client of these major changes.
To convince my 3 stakeholders the redesign indeed followed the right approach, I shared quotes and data from concept tests. Hearing about the value and utility from our prospective users was enough to convince them that these features should be developed.
Some of the most controversial features/concepts were:
Eliminating the previous “Inspiration” page to open the door to a new homepage, giving users quicker and more intuitive access to recipe browsing.
The addition of the “saved recipes folders” feature: This feature enables users to achieve a higher level of organization within their saved recipes.
Positive user testing results helped convince my client of these major changes.
To convince my 3 stakeholders the redesign indeed followed the right approach, I shared quotes and data from concept tests. Hearing about the value and utility from our prospective users was enough to convince them that these features should be developed.
Weekly update meeting
Expected Impact
Expected Impact
We expect users to have a significantly better experience navigating through the app
We expect users to have a significantly better experience navigating through the app
User impact: Positive user feedback from 8/10 users during testing indicates higher satisfaction, likely leading to increased app recommendations and organic growth.
Personalized Options: The addition of features like toggle buttons and content-specific search bars provides users with more personalized and customizable experiences.
Improved Shopping List Experience: Users experience a more straightforward and accessible shopping list creation process. The focus on easy item editing and deletion, predetermined categories, and a clean separation between checked and unchecked items contributes to a better shopping list experience.
User impact: Positive user feedback from 8/10 users during testing indicates higher satisfaction, likely leading to increased app recommendations and organic growth.
Personalized Options: The addition of features like toggle buttons and content-specific search bars provides users with more personalized and customizable experiences.
Improved Shopping List Experience: Users experience a more straightforward and accessible shopping list creation process. The focus on easy item editing and deletion, predetermined categories, and a clean separation between checked and unchecked items contributes to a better shopping list experience.
Let's Chat?
Email: torrespoloc@gmail.com
Jackeline Torres © 2024
Designed and built on Framer
Let's Chat?
torrespoloc@gmail.com
Jackeline Torres © 2024