Part 1: Healthy Meal Planning App - Persona and High-Fidelity Prototype

1. User Persona: Aisha Khan

Fig 1: Persona

Aisha Khan is a 32-year-old software engineer residing in the vibrant urban landscape of Faisalabad,
Punjab, Pakistan. She runs her business out of the house where she manages her intense job duties and
responsibility as wife and mother of a busy four-year-old child. Aisha demonstrates her modern nature
by feeling at ease when she uses technology to enhance her everyday operations. Her expertise in using
smartphones together with apps and online shopping proves her capability to adapt and operate
efficiently.

Aisha depends heavily on the connection Aisha has with supermarkets in her area. Online grocery
platforms in Faisalabad continue developing their delivery services as the sector expands within the city.
Efficiency plus reliability stand as the critical issues that need attention. Aisha requires an application
which provides easy partnerships with trusted supermarkets to deliver products efficiently and precisely.
She could improve her budget planning if the application provided the capability to evaluate pricing
against supermarket promotions simultaneously.

Aisha sets the main objective of keeping her family on a path of proper nutritional eating. The nutritional
requirements of her little one hold special importance to her as she strives to fulfill this objective. Due to
her high workload Aisha regularly feels short of time which creates problems when she attempts to plan
meals and shop for groceries. She seeks a solution which makes daily tasks easier so she can dedicate
additional time to family activities. The platform allows Aisha to personalize her menus by adding food
options that suit her household requirements and create meals suitable for children and maintaining
nutritional balance.

The combination of searching for recipes through old methods and hand-writing shopping lists uses
unnecessary amounts of time with unreliable results. The challenge she encounters when trying to
measure ingredients properly ends up causing unnecessary wastage of food. An unreliable aspect of
online shopping for groceries includes the many days it takes to deliver products which makes her
situation worse.

Through the combination of her professional dedication and family-focused life Aisha defines her daily
routine. Working from home allows her to be flexible because it merges work and personal boundaries.
She explores various new methods to simplify her daily activities because she uses technology to achieve
efficiency goals. She shows strong concern regarding both the nutritional aspects and the fasting quality
of her family's food nutrition due to her dedication toward their wellbeing. Aisha depends on digital
delivery applications because she often uses them to obtain food supplies and essential items.

Quote: "I need a simple way to plan healthy meals and get groceries delivered, so I can spend more time
with my family."

2. Task Flows and High-Fidelity Prototypes

Task Flow 1: Planning a Week's Worth of Family-Friendly Meals and Ordering Groceries

Description: Aisha wants to design the meals for her family during this week by choosing healthy food
that children will like. After she selects her preferred supermarket, she plans to place an order containing
her required ingredients online.

Screen Sequence:

1. Home Screen: The app opens with a welcoming interface; Users find all essential functions
accessible through the prominent "Plan Meals" button which includes a view of recently
viewed recipes in addition to a visual presentation with a "+" button for meal additions to
upcoming days. The central hub interface of the app lets users access essential functions
through this screen.
2. Users can survey available daily slots on the Meal Planning Screen through its week-based
calendar before choosing particular times for breakfast lunch dinner. Through the search bar
and filtering options Aisha can narrow down her recipe search to select only child-friendly
recipes that are quick to prepare and vegetarian options. The application shows tailored
food recommendations which consider her past eating choices together with nutritional
constraints.
3. Aisha can see all recipe information in the Details Screen which displays the exact recipe
name with an excellent picture together with complete ingredient lists as well as thorough
directions and nutritional values. Two interactive buttons let Aisha add recipes directly to her
meal plans as well as her grocery shopping list.
 4. The application shows a combined summary of weekly planned recipes through lists and
calendars on the Weekly Meal Plan Overview Screen. The Generate Shopping List button
automatically generates a complete shopping list that references selected meals.
5. Aisha sees the complete ingredient listing that forms the basis of her weekly culinary
requirements on the Shopping List Screen. She can modify number amounts as well as flag
purchased items and start placing orders.
6. After the shopping list transfer the user accesses the selected online supermarket screen
through Integration. Aisha will review the order while she can modify it along with viewing
delivery estimates and checking total cost before the checkout process begins.
7. The Order Confirmation Screen shows complete details of the order with its sequential
number as well as the projected delivery period and all selected products.

Task Flow 2: Finding a Quick and Healthy Lunch Recipe and Adding it to Today's Meal

Description: Aisha needs to quickly find a healthy lunch recipe for herself and add it to her meal plan for
the day.

Screen Sequence:

1. Home Screen: The initial screen contains both the Lunch Ideas quick button alongside a
search bar that enables Aisha to launch her search instantly.
2. Recipe Research Screen: Aisha picks her desired recipes through the search bar with filters
that match "quick" and "healthy" and also "lunch." A page shows recipe thumbnails
including title and preparation duration.
3. Recipe Details Screen: Aisha views all the necessary details about each recipe on the Recipe
Details Screen including ingredients and instructions as well as nutritional info. The "Add to
Today's Meal Plan" button makes it easy for her to add the recipe directly to her daily meal
scheduling.
4. Today’s Meal Plan Screen: Users can view Aisha's current daily schedule of scheduled meals
on this screen of their Today's Meal Plan. The current lunch recipe takes center stage while
users have access to note and modification features.
5. Shopping list update screen: Users can view their updated shopping list on the screen which
allows quick access to the list through an available button.

High-Fidelity Prototype Notes:

 Consistent and clear typography, color schemes, and icons are employed throughout the app.

 Buttons and interactive elements are designed to be easily tappable.

 Visual feedback is provided for user actions, such as button press animations and loading
indicators.

 Real images of food and ingredients are used to enhance the user experience.

 Text is readable in both Urdu and English, catering to user preferences.

 Supermarket integration screens are designed to resemble the actual online supermarket
interfaces for a seamless transition.
By adhering to these guidelines, a comprehensive user persona and a functional high-fidelity prototype
can be developed, effectively demonstrating the app's core features and user-centric design.

Part 2: Justification of Design Decisions

Introduction

The design of the healthy meal planning app was driven by a user-centered approach, prioritizing the
needs and goals of our primary persona, Aisha Khan. The high-fidelity prototype was meticulously
crafted to address her challenges in meal planning and grocery shopping, aiming to provide a seamless
and efficient user experience. This section will justify the key design decisions, referencing established
user interface (UI) and user experience (UX) principles, theories, and guidelines.

1. Information Architecture and Navigation

The application has a clear yet logical information structure that lets Aisha move between various parts
effortlessly. The main hub of the application functions as a central access point through which users can
easily initiate core tasks that include planning meals, recipe exploration and creating shopping lists. The
principle of discoverability enables easy access to all key features as per Norman (2013).

 Screenshot 1: Home Screen

Fig 2: Home Screen

o The "Plan Meals" button takes center position on the interface so Aisha can instantly
initiate her main goal. The app demonstrates its immediate worth through both the
display of recently viewed recipes and upcoming meal planning section which enhances
user engagement.
 o The application follows Jakob Nielsen's "match between system and the real world"
usability heuristic (Nielsen, 1994) through its simple and easy-to-read icons and labels.

The application's simple flat structure enables users to reach their intended destinations through
minimal steps. The relationship between moving distance and target dimension defines how fast targets
can be reached as per Fitts's Law (Fitts, 1954). Our streamlined navigation structure decreases both
distance and time needed for Aisha to carry out her tasks.

2. Visual Design and User Interface Elements

The application design presented modern elements for building an engaging and clean user experience.
The application appearance reached consistency through repeated use of a minimal color scheme and
typographical style and standardized visual elements throughout its design. Nielsen's principle of
consistency and standards guides the application design because it allows users to recognize and
understand elements throughout the user interface (Nielsen, 1995).

 Screenshot 2: Meal Planning Screen

Fig 3: Meal Planning Screen

o Through a weekly calendar view Aisha can easily understand and control her meal
planning tasks. Clear date labels along with color-coding functions improve both the
readability and understanding of the meal information on display.
o The application provides Aisha with visible search bar and filter tools that help her
conduct rapid recipe inquiries. The principle of flexibility and efficiency of use allows
users to customize their application needs according to Nielsens (1995) framework.
All buttons along with interactive components were made large for easy taps following mobile device
touch target guidelines (Apple, 2023). The app design enables Aisha to use the application easily at any
time while in motion.

3. Recipe Search and Selection

Aisha can search for healthy recipe options rapidly through an intuitive and efficient interface of the
application. Customer convenience comes through the search bar and filter tools which let her focus her
search according to her dietary needs and cooking preferences and planned spending time. User control
principles support Aisha through this system because it allows her to personalize the way she searches
for recipes (Nielsen, 1995).

 Screenshot 3: Recipe Details Screen

Fig 4: Recipe Details Screen

o Aisha makes well-informed meal decisions through the detailed recipe information
which supplies ingredient lists instructions and nutritional breakdown. The website
enables Aisha to add recipes to her meal plan and shopping list seamlessly through two
prominent buttons that integrate with both functions.
o High-quality food images in the application align with Gestalt visual perception rules
specifically manifesting as the concept of Pragnanz for good form. As per this principle
human beings naturally group visual components into basic stable structural elements.
An image of high quality enhances the detectability and appeal of meals to users. (Ware,
2013).

4. Meal Planning and Shopping List Integration

The app joins food planning with shopping list management so Aisha does not need to create shopping
lists manually. Every ingredient for upcoming weekly recipes becomes automatically listed in one
document using the "Generate Shopping List" feature. The principle of error prevention ensures Aisha
will not forget necessary ingredients which is supported by Nielsen (1995).

 Screenshot 4: Weekly Meal Plan Overview

Fig 5: Weekly Meal Plan Overview

Aisha can assess and adjust her weekly meal choices through the single consolidated view. A
button called "Generate Shopping List" stands out immediately after which it starts building
an all-inclusive shopping list.

The shopping list functions with built-in editing capability as well as quantity adjustment
features. The system implements principles of forgiveness together with recovery which
permit users to modify entries and recover from mistakes. (Norman, 2013).

5. Supermarket Integration and Online Ordering

Aisha benefits from the integrated supermarket features of the app since it permits her to order her
entire grocery list with just several taps. The chosen supermarket's interface shows a shopping list
obtained from Aisha's selection which provides a review and editing feature during order modification.
Aisha experiences reduced mental strain because recognition overfalls recall (Nielsen, 1995) as the
foundation of this design.

 Screenshot 5: Shopping List Screen

 Fig 6: Shopping List Screen

o The application's smooth transition to the supermarket interface creates an integrated

system for users' efficient usage experience. The visual presentation of total costs with
delivery time estimates lets Aisha decide whether she should proceed with the
purchasing process.

6. User Feedback and Error Handling

The application gives immediate feedback through visual cues that notify users about their actions by
showing button animations paired with loading progress indicators. The app uses visibility of system
status to inform Aisha about its ongoing activities (Nielsen, 1995). The error messaging system offers
Aisha both direction and useful instructions when she encounters system failures.

 Screenshot 7: Order Confirmation Screen

 Fig 7: Order Confirmation Screen

o The order confirmation screen shows all order information to Aisha which builds her
trust in the application's dependability.
o The application shows users clear indicators when loading and presents relevant error
messages which help the heuristic process of error diagnosis and recovery. (Nielsen,
1995).
o A Thank you Screen at the end with tracking code, order number, total amount and
name of user with two buttons. One to track the order and the other to view the whole
order once again.

7. Accessibility Considerations

The app adopts features for accessibility which include right implementations of color distinction
alongside effective text size selection to enable vision-impaired users. The design principles of inclusive
design seek to establish interfaces which reach all user groups as per (BS 8878:2010 | 30 Nov 2010 | BSI
Knowledge 2010).

Conclusion

The design decisions for the high-fidelity healthy meal planning app rely on recognized theories along
with established rules and principles of user interface and user experience. We designed the interface
with user needs first and simplified task sequences to deliver Aisha Khan and other users an effective
tool to manage their meal planning and grocery purchases.

Part 3: Testing and Evaluation of the Design

Introduction

The evaluation of the healthy meal planning app high-fidelity prototype utilizes Nielsen's usability
heuristics and think-aloud testing as its primary assessment methods. The testing process focuses on
detecting design weaknesses apart from enhancing the usability of the interface.

1. Evaluation Using Nielsen's Usability Heuristics

Nielsen's 10 usability heuristics provide a framework for evaluating user interfaces. Each heuristic will be
applied to the app's prototype, identifying strengths and weaknesses.

1. Visibility of System Status:

o The app generally provides clear feedback for user actions, such as button press
animations and loading indicators.

o However, during the supermarket integration, the loading time could be more explicitly
communicated.

o Recommendation: Implement a more prominent loading indicator during supermarket

integration and provide estimated loading times.

2. Match Between System and the Real World:

o The app uses familiar icons and terminology, aligning with users' mental models.

o The meal planning calendar and shopping list mimic real-world analogs.

o Strength: The app strongly matches the real world.

3. User Control and Freedom:

o The app allows users to easily navigate between screens and modify their selections.

o The ability to edit shopping lists and customize meal plans provides users with control.

o Strength: The app allows very good user control and freedom.

4. Consistency and Standards:

o The app maintains a consistent visual design and terminology throughout.

o Icons and buttons are used consistently across different screens.

o Strength: The app is highly consistent.

5. Error Prevention:

o The app minimizes errors through features like automatic shopping list generation.

o However, there is potential for errors in quantity selection during supermarket

integration.
 o Recommendation: Implement quantity confirmation prompts during supermarket
integration.

6. Recognition Rather Than Recall:

o The app displays relevant information on each screen, minimizing the need for users to
recall information.

o Recipe details and shopping lists are readily available.

o Strength: The app strongly emphasizes recognition.

7. Flexibility and Efficiency of Use:

o The app provides filter options and search functionality to enhance efficiency.

o However, advanced users might benefit from keyboard shortcuts or voice commands.

o Recommendation: Explore the feasibility of implementing keyboard shortcuts and voice

commands.

8. Aesthetic and Minimalist Design:

o The app's design is clean and uncluttered, focusing on essential information.

o However, the visual hierarchy could be further refined to guide users' attention.

o Recommendation: Refine the visual hierarchy to prioritize key information.

9. Help Users Recognize, Diagnose, and Recover from Errors:

o The app provides clear error messages and guidance on how to resolve issues.

o However, more detailed error descriptions could be provided.

o Recommendation: Provide more detailed error descriptions and troubleshooting tips.

10. Help and Documentation:

o The app could benefit from a comprehensive help section or tutorial.

o Tooltips and contextual help could be added to guide users.

o Recommendation: Implement a comprehensive help section and contextual help

features.

The A4 size prints are as follows:

2. Think-Aloud Testing

Think-aloud testing was conducted with three participants, mirroring Aisha Khan's persona. The
participants were asked to complete two task flows:

 Task Flow 1: Planning a week's worth of family-friendly meals and ordering groceries.

 Task Flow 2: Finding a quick and healthy lunch recipe and adding it to today's meal.

The participants were asked to verbalize their thoughts and actions as they interacted with the
prototype. The sessions were recorded for later analysis.

Findings from Think-Aloud Testing:

Task Flow 1:

 Participants found the meal planning calendar intuitive and easy to use.

 The automatic shopping list generation was highly appreciated.

 However, some participants struggled with navigating the supermarket integration screen,
particularly with quantity selection.

 Participant 1: "The shopping list is great, but I'm not sure if I selected the right quantities on the
supermarket screen."

 Participant 2: "I like the calendar view, but it would be nice to have a way to add notes to each
meal."

 Participant 3: "It would be nice if the meals had a rating system, so I could see what meals other
people liked."

Task Flow 2:

 Recipe Search Efficiency:

o Participants found the search functionality efficient and were able to quickly locate
suitable lunch recipes.

o The filter options were effective in narrowing down search results.

 Recipe Details Comprehension:

o The recipe details were generally well-received, but some participants found the
nutritional information challenging to interpret.

o The lack of explanations for certain nutritional terms caused confusion.

 Meal Plan Integration:

o Adding the selected recipe to the daily meal plan was straightforward and intuitive.
 o Participants appreciated the seamless integration with the existing meal plan.

 The ability to quickly add a recipe to the daily meal plan was appreciated.

 However, some participants found the nutritional information difficult to understand.

 Participant 1: "The recipe search is very fast, and I found a great lunch option quickly."

 Participant 2: "The nutritional information is a bit confusing; I'm not sure what all the numbers
mean."

 Participant 3: "I wish there was a way to see similar recipes or variations."

Analysis and Recommendations:

 Supermarket Integration:

o The supermarket integration screen needs to be simplified and streamlined.

o Quantity selection should be more intuitive, with clear visual cues and confirmation
prompts.

o Recommendation: Redesign the supermarket integration screen with a simpler layout

and clear quantity selection controls.

 Nutritional Information:

o The nutritional information should be presented in a more user-friendly format.

o Explanations and definitions should be provided for key nutritional terms.

o Recommendation: Redesign the nutritional information section with clear labels and
tooltips.

 Additional Features:

o Participants expressed interest in features like meal ratings, notes, and recipe variations.

o Recommendation: Consider implementing these features in future iterations.

 Help and Guidance:

o The participants, while able to complete the tasks, all expressed that some form of help
section, or tutorial would be helpful.

o Recommendation: Implement a tutorial, and a help section that contains common

questions, and a FAQ.

Reference to Literature:

 Usability Testing:

o Think-aloud testing is a widely recognized usability testing method (Nielsen, 1993).

 o It allows researchers to gain insights into users' cognitive processes and identify usability
issues.

 Heuristic Evaluation:

o Nielsen's usability heuristics provide a valuable framework for evaluating user interfaces
(Nielsen, 1995).

o They are widely used in the field of human-computer interaction.

Conclusion:

The prototype of the healthy meal planning app underwent usability evaluations using Nielsen's usability
heuristics together with think-aloud testing methods and revealed multiple opportunities to enhance the
application. The recommendations presented in this section have the potential to improve the app
usability which will enhance both the user experience for Aisha Khan and other users of the system.

Think-Aloud Testing: A Detailed Report

A think-aloud usability evaluation provided deeper insights for understanding the usability features of
the healthy meal planning app's design model. Participants who use this methodology express their
interface interactions out loud while the assessment yields insights regarding their thinking patterns and
user interface problems. The assessment involved three participants who matched the characteristics of
the persona Aisha Khan. The participants examined printed prototypes for both major tasks which
included meal and grocery planning for an entire family week (Task Flow 1) and quick lunch recipe
discovery alongside meal integration (Task Flow 2).

The research moderator administered these testing sessions inside a controlled quiet space by providing
artificial app responses during sessions. The evaluators felt no obligation to deliver answers that
matched accepted responses during the testing sessions. Auditory and visual recordings of each session
enabled complete post-test analysis and allowed screenshots to be used in this report.

Detailed Findings and Analysis

Task Flow 1: Planning a Week's Worth of Family-Friendly Meals and Ordering Groceries

All participants approved the initial steps for Task Flow 1 when users selected their meals and generated
shopping lists. The application's convenient calendar system together with its effective search
capabilities provided users with a smooth interface experience. Users found the feature which made
shopping lists automatically that substantially cut down the time needed for planning meals to be their
most liked aspect. Multiple usability problems surfaced during the supermarket integration stage which
followed the initial part of the process. The simulation of the supermarket interface proved difficult for
users because they experienced difficulties during the quantity selection stage. The user faced confusion
because visual signals were difficult to interpret while confirmation messages were not present during
the process. The results from this section demonstrated the requirement for simplifying and making
user-friendly the design approach for supermarket integrations.

Task Flow 2: Finding a Quick and Healthy Lunch Recipe and Adding it to Today's Meal
Task Flow 2 displayed how the app functions effectively by searching quick recipes while integrating
them into users' daily meal plan. Users found the search system useful along with the simple method for
including recipes into their daily plans. Some participants experienced difficulties understanding the
nutrient data provided through the recipes within the system. Implementation of clearer explanations
for confusing nutritional terms would improve the understanding of this material in the information
presentation.

Key Observations and Recommendations

Based on the think-aloud testing, several key observations and recommendations were identified:

 Supermarket Integration Refinement:

o The supermarket integration interface requires significant refinement to improve

usability.

o Clearer visual cues for quantity selection and prominent confirmation prompts are
essential.

o Consider implementing a step-by-step ordering process with clear instructions.

 Nutritional Information Clarity:

o The presentation of nutritional information needs to be simplified and made more

accessible.

o Include tooltips or explanations for key nutritional terms.

o Consider providing visual representations of nutritional data.

 User Feedback and Ratings:

o Participants expressed a desire for user ratings and reviews to aid in recipe selection.

o Implementing this feature could enhance user confidence and satisfaction.

 Help and Tutorial Integration:

o All users would have appreciated a tutorial, or help section.

o This should be added to the application.

Illustrative Examples from Recordings:

 During Task Flow 1, Participant 2, while navigating the supermarket integration, stated, "I'm not
sure if I've added the right amount of tomatoes. It's hard to tell from this interface."

 During Task Flow 2, Participant 3, while reviewing the nutritional information, commented, "I
don't understand what 'dietary fiber' means in this context."

Conclusion

The prototypes of the healthy meal planning app demonstrated their usability attributes through the
think-aloud testing approach. The application shows capabilities in both recipe search and meal planning
but requires substantial upgrades regarding supermarket connections and nutritional data presentation.
The implementation of recommendations within this report will lead to major usability improvements
that will deliver a more user-friendly experience for application users.

References:

 Nielsen, J. (1993). Usability engineering. Morgan Kaufmann.

 Rubin, J., & Chisnell, D. (2008). Handbook of usability testing: how to plan, design, and conduct
effective tests. 2nd Edition, Wiley Publishing, Indianapolis.

 Apple. (2023). Human Interface Guidelines: Touch Targets. Apple Developer.

 BS 8878:2010 | 30 Nov 2010 | BSI Knowledge 2010, Bsigroup.com, viewed 19 March 2025,
<https://knowledge.bsigroup.com/products/web-accessibility-code-of-practice>.

 F‌ itts, P. M. (1954). The information capacity of the human motor system in controlling the
amplitude of movement. Journal of Experimental Psychology, 47(6), 381–391
https://doi.org/10.1037/h0055392.

 Nielsen, J 1994, 10 Heuristics for User Interface Design, Nielsen Norman Group.
 Norman, D. A. (2013). The design of everyday things: Revised and expanded edition. Basic books.

 Ware, C 2019, Information Visualization: Perception for Design, Morgan Kaufmann, Waltham,
Ma.