Paste your design here
A closer look using the usability principles.
Paste your design here
A closer look using
the usability principles.
Case Study
Role
UX/UI Designer, Researcher, Strategist
Tools
Figma
Project Duration
4 Days
At a glance:
Conducted a heuristic evaluation to identify and assess the severity of usability problems.
Brainstormed and proposed solutions to enhance the app’s usability.
Redesigned the pages by implementing the proposed improvements.
App Context
App Context
‘What's Cooking’ is a culinary app from the house of kraft Heinz designed with an engaging, TikTok and Instagram-inspired platform. It lets users explore a diverse array of delicious dishes, from quick and easy recipes to more intricate creations. The app empowers users to master new cooking techniques, experiment with ingredients, and elevate their culinary skills.
‘What's Cooking’ is a culinary app from the house of kraft Heinz designed with an engaging, TikTok and Instagram-inspired platform. It lets users explore a diverse array of delicious dishes, from quick and easy recipes to more intricate creations. The app empowers users to master new cooking techniques, experiment with ingredients, and elevate their culinary skills.
This case study examines the evaluation and redesign of three key pages in the 'What's Cooking' app: the Home Screen, Recipe Reels, and My Recipe page. I chose this app for its creative and engaging format, which holds great potential for aspiring cooks and culinary enthusiasts. However, during my interactions with the app, I noticed that its purpose needs refinement to provide a smoother user experience that matches its focus on making cooking creative and enjoyable.
This case study examines the evaluation and redesign of three key pages in the 'What's Cooking' app: the Home Screen, Recipe Reels, and My Recipe page. I chose this app for its creative and engaging format, which holds great potential for aspiring cooks and culinary enthusiasts. However, during my interactions with the app, I noticed that its purpose needs refinement to provide a smoother user experience that matches its focus on making cooking creative and enjoyable.
Scope of Evaluation
Scope of Evaluation
I Observed the Following Heuristic Laws:
User Control and Freedom
Providing users with a sense of control and freedom to navigate the system.
Consistency and Standards
Adhere to consistent standards and conventions to avoid confusion, ensuring that similar actions and elements have the same meaning throughout.
Flexibility and Efficiency
of Use
System should cater to both novice and experienced users by providing shortcuts and adaptable features.
Aesthetic and Minimalist Design
Interface should be simple and uncluttered, avoiding unnecessary information that can distract or overwhelm users.
I Observed the Following Heuristic Laws:
User Control and Freedom
Providing users with a sense of control and freedom to navigate the system.
Consistency and Standards
Adhere to consistent standards and conventions to avoid confusion, ensuring that similar actions and elements have the same meaning throughout.
Flexibility and Efficiency
of Use
System should cater to both novice and experienced users by providing shortcuts and adaptable features.
Aesthetic and Minimalist Design
Interface should be simple and uncluttered, avoiding unnecessary information that can distract or overwhelm users.
Rating Evaluators
No Usability Problem
Cosmetic Problem
Minor Usability Problem
Major Usability Problem
Usability Catastrophe
1.User Control and Freedom
Before
After
Redesign 1: Video Controls
Observations:
3 = Major Usability Problem
Improvements:
User didn’t have the option to view the steps of the recipe directly from the home screen.
Users weren’t able to fast forward or rewind the video with the progress bar.
Due to lack of control from progress bar, users couldn’t restart the video.
Added a “View Recipe” button to have access of the full recipe with steps and ingredients.
Incorporated a functional progress bar that lets users control forwarding and rewinding of the video.
Because of the updated progress bar also allows users to now replay the video
2.Consistency and Standards
Before
After
1 = Cosmetic Problem Only
If the user deselects the bookmark icon to remove the recipe from their ‘My Recipe’ section, the app notifies “Removed from saved” however there is no saved section, only a ‘My Recipe’
The error message displayed, covers the controls of the navigation bar
The prompt was changed to "Removed from My Recipes" to provide a clearer and accurate message
The placement of the error message is also moved on top of the screen for better visibility
Improvements:
Observations:
Redesign 2: Misleading Notifying Message
3.Flexibility and Efficiency of Use
Redesign 3: Search Bar or Filter Icon
Lack of search bar or a filter option limits the user from finding any particular recipe they’re looking for
Added a search bar as well as a filter icon to help users quickly find specific recipes. Instead of scrolling, they can now type keywords or apply filters like cuisine type, cooking time, or ingredients, enhancing the experience by saving time and improving navigation
Observations:
Improvements:
3 = Major Usability Problem
Before
After
4.Aesthetics and Minimalist Design
1 = Cosmetic Problem Only
Redesign 4: Misaligned Typography
The chef profile username and picture, which are located underneath the recipe image weren’t aligned
We aligned the creator's name and avatar on the same line to ensure a consistent and tidy appearance, irrespective of the length of the recipe name above it
Due to adding multiple elements on top of the screen, we also removed the purple banner to eliminate busyness, creating more refined and comfortable look
Observations:
Improvements:
Before
After
5.Consistency and Standards
2 = Minor Usability Issue
Observations:
Improvements:
Before
After
Redesign 5: Brand Logo
We updated the ‘Explore’ icon to a standard search icon for better consistency and navigation
We added the ‘What’s Cooking?’ logo (a whisk) to the ‘My Recipes’ screen to enhance brand visibility
Logo on the ‘Explore’ icon had a different logo than the one of the app
The whisk logo of the app wasn’t showcased anywhere on the app
I Observed the Following Heuristic Laws:
User Control and Freedom
Providing users with a sense of control and freedom to navigate the system.
Consistency and Standards
Adhere to consistent standards and conventions to avoid confusion, ensuring that similar actions and elements have the same meaning throughout.
Flexibility and Efficiency
of Use
System should cater to both novice and experienced users by providing shortcuts and adaptable features.
Aesthetic and Minimalist Design
Interface should be simple and uncluttered, avoiding unnecessary information that can distract or overwhelm users.
Rating Evaluators
No Usability Problem
Cosmetic Problem
Minor Usability Problem
Major Usability Problem
Usability Catastrophe
1.User Control and Freedom
3.Flexibility and Efficiency of Use
4.Aesthetics and Minimalist Design
2.Consistency and Standards
Before
After
Redesign 1: Video Controls
Observations:
User didn’t have the option to view the steps of the recipe directly from the home screen.
Users weren’t able to fast forward or rewind the video with the progress bar.
Due to lack of control from progress bar, users couldn’t restart the video.
Improvements:
Added a “View Recipe” button to have access of the full recipe with steps and ingredients.
Incorporated a functional progress bar that lets users control forwarding and rewinding of the video.
Because of the updated progress bar also allows users to now replay the video
3 = Major Usability Problem
Before
1 = Cosmetic Problem Only
If the user deselects the bookmark icon to remove the recipe from their ‘My Recipe’ section, the app notifies “Removed from saved” however there is no saved section, only a ‘My Recipe’
The error message displayed, covers the controls of the navigation bar
The prompt was changed to "Removed from My Recipes" to provide a clearer and accurate message
The placement of the error message is also moved on top of the screen for better visibility
Improvements:
Observations:
Redesign 2:
Misleading Notifying Message
After
Redesign 3:
Search Bar or Filter Icon
Lack of search bar or a filter option limits the user from finding any particular recipe they’re looking for
Added a search bar as well as a filter icon to help users quickly find specific recipes. Instead of scrolling, they can now type keywords or apply filters like cuisine type, cooking time, or ingredients, enhancing the experience by saving time and improving navigation
Observations:
Improvements:
3 = Major Usability Problem
Before
After
1 = Cosmetic Problem Only
Redesign 4:
Misaligned Typography
The chef profile username and picture, which are located underneath the recipe image weren’t aligned
We aligned the creator's name and avatar on the same line to ensure a consistent and tidy appearance, irrespective of the length of the recipe name above it
Due to adding multiple elements on top of the screen, we also removed the purple banner to eliminate busyness, creating more refined and comfortable look
Observations:
Improvements:
Before
After
5.Consistency and Standards
Observations:
Improvements:
Redesign 5: Brand Logo
We updated the ‘Explore’ icon to a standard search icon for better consistency and navigation
We added the ‘What’s Cooking?’ logo (a whisk) to the ‘My Recipes’ screen to enhance brand visibility
Logo on the ‘Explore’ icon had a different logo than the one of the app
The whisk logo of the app wasn’t showcased anywhere on the app
2 = Minor Usability Issue
Before
After
What Did I Learn?
Throughout this project, I deepened my understanding of UX design and evaluation, particularly in the context of high-traffic, user-centric applications. The case study highlighted the crucial role that methodological evaluation and user-focused design play in creating intuitive and effective digital experiences.
Conducting a heuristic evaluation provided a structured approach to identifying usability issues, revealing that even minor changes can significantly enhance user experience. Redesigning key pages of the 'What's Cooking' app emphasized the importance of understanding user needs and behaviors, reinforcing the necessity of aligning the interface with user experiences for improved engagement and satisfaction.
This process also underscored the importance of continuous testing and refinement, illustrating that effective UX design is an ongoing, iterative journey guided by user feedback.
Rating Evaluators
No Usability Problem
Cosmetic Problem
Minor Usability Problem
Major Usability Problem
Usability Catastrophe
1.User Control and Freedom
3.Flexibility and Efficiency of Use
4.Aesthetics and Minimalist Design
5.Consistency and Standards
2.Consistency and Standards
Before
After
Redesign 1: Video Controls
Observations:
User didn’t have the option to view the steps of the recipe directly from the home screen.
Users weren’t able to fast forward or rewind the video with the progress bar.
Due to lack of control from progress bar, users couldn’t restart the video.
Improvements:
Added a “View Recipe” button to have access of the full recipe with steps and ingredients.
Incorporated a functional progress bar that lets users control forwarding and rewinding of the video.
Because of the updated progress bar also allows users to now replay the video
3 = Major Usability Problem
Before
After
1 = Cosmetic Problem Only
If the user deselects the bookmark icon to remove the recipe from their ‘My Recipe’ section, the app notifies “Removed from saved” however there is no saved section, only a ‘My Recipe’
The error message displayed, covers the controls of the navigation bar
The prompt was changed to "Removed from My Recipes" to provide a clearer and accurate message
The placement of the error message is also moved on top of the screen for better visibility
Improvements:
Observations:
Redesign 2: Misleading Notifying Message
What Did I Learn?
Throughout this project, I deepened my understanding of UX design and evaluation, particularly in the context of high-traffic, user-centric applications. The case study highlighted the crucial role that methodological evaluation and user-focused design play in creating intuitive and effective digital experiences.
Conducting a heuristic evaluation provided a structured approach to identifying usability issues, revealing that even minor changes can significantly enhance user experience. Redesigning key pages of the 'What's Cooking' app emphasized the importance of understanding user needs and behaviors, reinforcing the necessity of aligning the interface with user experiences for improved engagement and satisfaction.
This process also underscored the importance of continuous testing and refinement, illustrating that effective UX design is an ongoing, iterative journey guided by user feedback.
Redesign 3: Search Bar or Filter Icon
Lack of search bar or a filter option limits the user from finding any particular recipe they’re looking for
Added a search bar as well as a filter icon to help users quickly find specific recipes. Instead of scrolling, they can now type keywords or apply filters like cuisine type, cooking time, or ingredients, enhancing the experience by saving time and improving navigation
Observations:
Improvements:
3 = Major Usability Problem
Before
After
1 = Cosmetic Problem Only
Redesign 4: Misaligned Typography
The chef profile username and picture, which are located underneath the recipe image weren’t aligned
We aligned the creator's name and avatar on the same line to ensure a consistent and tidy appearance, irrespective of the length of the recipe name above it
Due to adding multiple elements on top of the screen, we also removed the purple banner to eliminate busyness, creating more refined and comfortable look
Observations:
Improvements:
Before
After
2 = Minor Usability Issue
Observations:
Improvements:
Before
After
Redesign 5: Brand Logo
We updated the ‘Explore’ icon to a standard search icon for better consistency and navigation
We added the ‘What’s Cooking?’ logo (a whisk) to the ‘My Recipes’ screen to enhance brand visibility
Logo on the ‘Explore’ icon had a different logo than the one of the app
The whisk logo of the app wasn’t showcased anywhere on the app
What Did I Learn?
Throughout this project, I deepened my understanding of UX design and evaluation, particularly in the context of high-traffic, user-centric applications. The case study highlighted the crucial role that methodological evaluation and user-focused design play in creating intuitive and effective digital experiences.
Conducting a heuristic evaluation provided a structured approach to identifying usability issues, revealing that even minor changes can significantly enhance user experience. Redesigning key pages of the 'What's Cooking' app emphasized the importance of understanding user needs and behaviors, reinforcing the necessity of aligning the interface with user experiences for improved engagement and satisfaction.
This process also underscored the importance of continuous testing and refinement, illustrating that effective UX design is an ongoing, iterative journey guided by user feedback.