by Bernice Priscilla Toh

Low-Fidelity wireframes

View Figma

by Niveytha W​aran

Low-Fidelity wireframes

by Julia Christy Purba

Low-Fidelity wireframes

by Mandy Kaw Qi Hui

Low-Fidelity wireframes

View Figma

by Niveytha W​aran

Low-Fidelity wireframes

View Figma

by Julia Christy Purba

Low-Fidelity wireframes

View Figma

by Mandy Kaw Qi Hui

Low-Fidelity wireframes

by Seungjun Lee

Low-Fidelity wireframes

by Bernice Priscilla Toh

Low-Fidelity wireframes

by Seungjun Lee

Low-Fidelity wireframes

View Figma

CONDUCTED by Bernice Priscilla Toh

User Confirmation is important, ​which was lacking in my prototype.

Ensuring user confirmation features became evident during high-​fidelity prototype testing. In an instance where User 1 ​accidentally clicked 'Cancel' while submitting a review, the ​absence of a confirmation prompt led to the loss of the carefully ​composed content. User 2 also pointed out the lack of ​confirmation for the review submission button as a heuristic ​concern.

While the absence of confirmation prompts doesn't render the ​app unusable, it can lead to occasional user annoyance. ​Implementing user confirmation helps mitigate unintentional ​errors, fostering trust between users and the application. A ​strategic approach is needed to introduce prompts selectively, ​ensuring user safety without overwhelming the application with ​excessive confirmations.

Fonts need to be bigger and should ​not have too light colors.

During prototype evaluation, one user found the visuals ​satisfactory, while the second user identified concerns related to ​unclear visual elements. Specifically, the second user pointed ​out challenges with small fonts and excessively light gray-colored ​fonts, causing confusion in certain sections, such as the meal ​plan poster subtitle. A detailed examination on an actual phone ​screen revealed that 10px fonts were notably challenging to ​read. As a solution, a proposed enhancement involves increasing ​the font size to 14px and avoiding overly light colors, addressing ​the need for improved visual clarity in the prototype.

Clickable elements need to be more ​visible.

User 2, in particular, highlighted this concern during her heuristic ​evaluation, pointing out instances where certain elements (such ​as the meal plan cards on the Explore page) on the interface do ​not clearly convey their clickability. This underscores the need for ​enhancing visual cues and feedback mechanisms for interactive ​elements to ensure a more intuitive and user-friendly experience.

A possible improvement is to create hover effects that alter the ​background color of buttons. This dynamic visual feedback can ​signal to users that the card is clickable. Another possible ​solution is to implement borders around the cards, improving the ​visual affordance of it.

Simplicity is key in creating an ​inclusive application, which was ​appreciated.

Among the 2 users who reviewed my product, I was pleased to ​know that both shared a common appreciation for the ​straightforward and clean design of the prototype. These users ​belong to our primary target audience: Health-conscious Parents, ​who, notably, represent the older age group within our broader ​target demographic and may not have high tech literacy. One ​particular user provided feedback that the prototype is “not ​overwhelming, and not too many words that I have to read. Too ​many words can cause strain to my eyes over time.”

Their positive response to the simplicity of the design ​underscored the importance of ensuring that the final prototype ​remains intuitive and accessible to a diverse user base.

CONDUCTED by Niveytha Waran

When color is used to show things ​that go together, another way to ​show the same information is used.

The user explored the app's recipe and meal planning sections, ​and experienced a noticeable sense of organization and ​coherence in the presentation of information.

The user was pleasantly surprised by the apt utilization of color ​and grouping to enhance their interaction with the app. In the ​recipe section, the use of accordions to divide ingredients based ​on the dishes involved in the recipe is an ingenious feature that ​streamlines the user's ability to access ingredient details for a ​specific recipe while keeping the interface clean and uncluttered. ​Additionally, the meal planning section excels in effective ​information grouping, with each meal plan neatly encapsulated ​within a single, swipeable card. This arrangement offers the user ​an intuitive, at-a-glance view of breakfast, lunch, and dinner ​options within a single meal plan, which greatly enhances their ​ability to plan and visualize daily meals.

Examples are shown (additionally ​to descriptions)

As my user entered the "Smart Recipes" section in the app's ​fridge page, they were prompted to explore recipe suggestions ​based on ingredients available in their inventory. However, a ​crucial element was missing—images that visually represent ​these suggested recipes.

Problem: The user tried to envision the potential meals they can ​create but was thwarted by the absence of accompanying ​images. This not only affected the engagement and appeal of the ​recipe suggestions but also obstructed the user's ability to make ​informed decisions about what to cook.

Solution: To mitigate this issue, I should integrate high-resolution ​images alongside each recipe suggestion. These images not only ​tantalize the user's senses but also provide essential visual ​information about the dish's presentation, aiding in their ​decision-making process.

Errors are prevented rather than ​shown and corrected

The user eagerly navigated to the "Smart Recipes" section with ​the hope of discovering enticing meal ideas. However, as they ​scanned the page, it became evident that there are no distinct ​cues indicating which elements are interactive.

Problem: Frustration set in as the user tries to click on recipe ​suggestions without success. The absence of clickable ​affordances blurs the line between passive text and interactive ​components, confounding user’s expectations and impairing ​their ability to engage with the suggested recipes.

Solution: I can rectify this issue by implementing unmistakable ​clickable elements (e.g., buttons or icons) alongside each recipe ​suggestion. These affordances serve as clear indicators of ​interactivity and offer users an efficient means to explore the ​recipes without any ambiguity.

Tasks are designed taking previous ​users' mental models into account:

The user anticipated a fridge page that mirrors the visual ​representation of a conventional refrigerator, replete with ​compartments, shelves, and ingredient icons. However, when ​they landed on the page, it bore an uncanny resemblance to a ​shopping cart, causing perplexity.

Solution:

Reconfigure the fridge page's visual layout to align more closely ​with a traditional fridge, using graphics and cues that mirror ​refrigeration features. This adjustment fosters a more intuitive ​connection between the user's mental model and the interface. ​Clearly demarcate and separate the fridge and pantry sections ​on the page, ensuring that users can easily identify which ​ingredients are in the fridge and which are in the pantry. This ​solution tackles the problem of categorizing ingredients correctly, ​enhancing the app's overall usability.

CONDUCTED by Julia Christy Purba

Undo Functionality

User has voiced his frustration over the inability to undo meal log ​deletions. Once a meal is removed, there is no way to recover it. ​This has resulted in accidental data loss and reduced user ​engagement. To address this, we recommend implementing a ​temporary 'Trash' feature to store deleted meals and a ​confirmation dialog to prevent accidental deletions.

Require More User Work Than ​Needed

The absence of a quick undo option after the user clicks the ​back button during customization preference changes has left ​users dissatisfied. They currently need to save changes and then ​click the saved recipe to edit them, which is inefficient and ​frustrating. We propose adding an additional alert message when ​users click the back button in the customization preferences ​interface, so that users can easily resume their customization ​without the need to save it first. By addressing these issues, we ​aim to enhance user satisfaction and usability while maintaining ​user engagement and retention.

System Provide More Features than ​Needed

User has identified a usability issue when users have minimal ​preferences to configure. Although users have the flexibility to ​skip or disregard features that do not align with their ​requirements, users find themselves repeatedly clicking the ​"next" button, making the process cumbersome. This issue not ​only frustrates users but also reduces efficiency. To enhance the ​user experience, we recommend implementing a dynamic ​navigation system that adapts to the number of preferences ​users need to set. By addressing this issue, we aim to provide a ​more streamlined and user-friendly preference configuration ​process, contributing to a more positive user experience.

Fonts Size and Readability

User has raised a prevalent concern related to font size and ​legibility in our application, which particularly affects users with ​visual impairments or eye problems. Users have reported that ​the font size can be too small, making it challenging to read ​content comfortably. To enhance the user experience, we ​propose increasing font size and selecting clear, non-decorative ​fonts to improve legibility. Addressing this issue is pivotal to our ​goal of providing a more inclusive and user-centric experience, ​ensuring that all users, regardless of visual abilities, can access ​and enjoy our application with ease.

CONDUCTED by Mandy Kaw Qi Hui

Excessive clicks for navigation

User 1 pointed out the laborious sequence of clicks needed to ​access information about kitchen tools, outlining a multi-step ​process that involved navigating back and forth within the app. ​This design flaw introduces unnecessary complexity, making it ​less user-friendly despite achieving the intended goal.

This feedback sheds light on the importance of streamlining the ​accessibility of critical information, particularly details related to ​kitchen tools that play a crucial role in recipe selection. To ​address this issue, a proposed enhancement involves ​incorporating visual icons next to recipe thumbnails, signaling ​the availability of kitchen equipment information. Alternatively, a ​clickable icon, akin to an 'i' icon, could provide a quick overview ​of relevant details, ensuring that essential information is easily ​accessible with minimal user effort.

Lack of User Confirmation

Both User 1 and User 2 raised concerns about the lack of user ​confirmation. User 1 noted that all changes made would ​immediately be erased if a user left the compose review section, ​even if the action was accidental. Similarly, User 2 indicated the ​absence of user confirmation upon publicising or privatising ​one’s recipe. Not anticipating user error can result in users ​losing valuable content or committing an unintended action, thus ​leading to frustration.

One possible solution is to implement a confirmation prompt. ​When a user attempts to exit the compose review section ​without saving their changes, the app should prompt them to ​confirm if they indeed want to discard their modifications. A ​similar design can be implemented when a user chooses to ​make their recipe public or private. This can help to provide a ​safety net for unintended actions.

Clickability issues due to small ​button sizE

While User 1 had no issues with the button size and clickability, ​User 2 encountered difficulties in this regard. Specifically, User 2 ​found the buttons, such as the bookmark and sharing icons to ​be too small. The close proximity of these buttons further ​increases the likelihood of accidental clicks, potentially leading ​to user frustration.

A suggested improvement is to enlarge the buttons, making ​them more comfortable for users to click. This adjustment ​ensures accessibility and reduces the risk of misclicks, thereby ​enhancing the user interaction experience.

Readability issues due to small ​font size

While User 1 did not express concerns about font size, while ​User 2, an older adult, faced challenges with the text due to ​small font size and light font weight. User 2's experience ​highlighted the importance of readability, especially in an ​application targeted at a diverse user demographic.

To address this, an improvement would involve adjusting the font ​size and weight to enhance text legibility for users of various age ​groups. Ensuring good readability is crucial for accommodating a ​broad audience and providing an inclusive user experience.

Readability issues due to poor ​visual contrast

Both users concurred that the low visual contrast in the ​application, notably the use of white text on a translucent grey ​background situated at the bottom of the image thumbnails, ​made it difficult to decipher the words. This issue directly ​impacted the clarity and readability of the content.

To mitigate this problem, a suggested solution is to employ a ​solid dark grey background instead. An improved visual contrast ​ensures that text is easily readable for all users, enhancing the ​overall visual experience and usability.

Good adherence to the mental ​model

While User 1 did not express concerns about font size, while ​User 2, an older adult, faced challenges with the text due to ​small font size and light font weight. User 2's experience ​highlighted the importance of readability, especially in an ​application targeted at a diverse user demographic.

To address this, an improvement would involve adjusting the font ​size and weight to enhance text legibility for users of various age ​groups. Ensuring good readability is crucial for accommodating a ​broad audience and providing an inclusive user experience.

CONDUCTED by Seungjun Lee

Dashboard is hard to read: Too m​uch information on the screen

Both User 1 (User review 1) and User 2 (User review 2) ​highlighted a common concern during their feedback sessions — ​the difficulty in comprehending the statistics presented on the ​dashboard. Specifically, they mentioned the graph on the first ​page, noting that it lacked clarity in terms of the metrics it ​displayed, appearing as a series of numbers without additional ​explanations or context.

This feedback resonated deeply and signified a pivotal challenge ​in my UI design. The ambiguity in the presentation of statistics ​was a clear roadblock to user understanding and engagement. It ​became evident that our users needed not just data but also ​contextual information to make sense of the figures and graphs. ​As such, I will work on redesigning the graph on the first page to ​include clear labels and a legend that would elucidate the ​metrics being displayed, ensuring that users would no longer be ​left guessing and could readily interpret the data and its ​significance.

Design should be intuitive.

During the two rounds of user reviews, a recurring and ​empirically observed issue emerged — users consistently ​encountered difficulties in identifying clickable objects within the ​UI. User 1, in particular, offered insightful comments, noting that ​the distinction between clickable and non-clickable elements was ​not easily discernible. This lack of clarity resulted in users having ​to make unnecessary clicks to determine whether an element ​was, indeed, a functional button.

This user feedback shed light on a critical aspect of UI/UX ​design: the importance of clear and intuitive affordances. ​Affordances refer to the visual and interactive cues within the UI ​that signal an element's function. A well-designed interface ​should make it apparent to users what is clickable and what ​isn't, minimizing the need for guesswork and reducing user ​frustration. To address this issue, a series of design ​enhancements can be initiated. First, I can refine the visual cues ​for clickable elements, making them more distinct by using ​button-like styles, adding shadow effects, and employing clear ​color differentiation to clearly delineate interactive components.

Visuals need to be clearer.

During the user review process, User 1 provided valuable ​feedback suggesting that it would be beneficial to indicate ​certain numbers, particularly those of greater significance, using ​distinct colors. This feedback offered an insightful perspective on ​how color can be utilized as a visual aid to emphasize critical ​information within the UI.

In response to this feedback, I will revisit our color scheme and ​design choices to incorporate this enhancement. Important ​numbers and metrics will be presented in a distinct, attention-​grabbing color, while less critical information will be retained in a ​neutral color. This color differentiation offers users an immediate ​visual cue, guiding them to focus on the most significant data ​and aiding them in making informed decisions.

Readability stands as a ​cornerstone for effective ​communication and user ​engagement.

During the two rounds of user reviews, I was heartened to ​receive feedback from both User 1 and User 2 that converged on ​a common point of appreciation – the clear and readable design ​of the user interface. This shared sentiment validated the efforts ​made in the design process to prioritize readability and ​comprehension.

Their positive responses affirmed the direction we had taken in ​prioritizing readability, usability, and user-centric design. It ​validated the choice to focus on creating an interface that ​respected their cognitive resources, minimized confusion, and ​offered a seamless experience.