Week 7: Prototyping and usability part 2

UXD720

---

This post is the continuation of prototyping and usability tests. In the last post, I discussed my first usability test based on the first version of my low-fidelity wireframe. I took the feedback and results to develop the designs to improve the user experience. This lead me to revisit the card sorting activity (see version 1 here) to organise and restructure the navigation.

Navigation structure

Figure 1: The diagram shows the updated navigational structure.

The features I will be designing in the prototype are the green cards. The items in the yellow cards are existing features that I will not be redeveloping because I want to focus on enhancing the app’s functionality in heart rate, augmented reality and accessibility. The schedule menu item has been designed quite well, and due to time constraints on this project, I have had to prioritise and focus on more demanding elements to fulfil the users’ goals and needs.

The navigation structure has been reworked to separate the stats and profile. The profile only consists of information regarding the users' data and the app's settings. This is where they can revisit the personalisation questions if they decide to skip it after the signup process or update their details.

Another change is removing the recipes menu item because the schedule includes the recipes tailored to the user, and they can also find new recipes through this option. I wanted to avoid duplication of content and only present information the user will find helpful.

The circle plus button initially showed shortcuts for the user to add their meals; however, I have changed it to scan food items. The scan includes scanning, speaking and searching an item to view the nutritional information. This feature meets the users' needs to access nutrition information quickly. This is shown in figure 2.

Figure 2: The original Nutricoach app vs the new developed design.

Innovative trends

One of the main elements of the product is to show innovation and flair. I researched and reviewed articles that discussed UX/UI trends to implement innovative features.

Augmented reality (AR) is digital information presented or overlaid in the physical world (Anthes 2019). According to research, AR is an emerging technology that is trending as it can help create personalised experiences increasing user engagement and productivity (Nguyen et al. 2021: 2–3). Integrating virtual components in the real world “removes all physical barriers to user-application interaction” and improves the communication between the user and the application (Kuznetsova 2021). This led me to discover AR technology in nutrition. Many health apps help track diets and support users to shop, cook, and eat better. It is also essential to avoid eating the wrong foods that may affect allergies or lead to health concerns. AR technology provides nutrition information in real-time to help users track what they are consuming quickly and easily (‘Nutrition’ 2017).

Another innovative feature I will be implementing is contactless interaction. The user will be able to input the food item using voice interaction. This trend has increased dramatically, especially during the COVID-19 pandemic (Kuznetsova 2021). Finding new ways to interact with devices without touching is innovative. I have designed the food input feature with various options such as AR scanning, voice interaction and search. This makes the product more accessible to a broader audience and increases engagement.

Furthermore, I will be designing animations in my product design. A great example is the Apple website, as they have continuous animated content as the user scrolls through the page, creating an engaging user experience. Animation is increasing in popularity and is also fun and entertaining for consumers (Kind-Envy 2021).

Usability testing part 2

Figure 3: The low-fidelity wireframe version 2

In the second round of usability tests, I conducted two moderated tests using the interactive version of my wireframe. I created a prototype using the low-fidelity mobile designs in Balsamiq. It was quite simple to implement, but it took time to complete. I knew that I would gain significant findings that would help develop the prototype further.

Video: Low-fidelity prototype

Figure 4: This shows the results from my usability tests.

Summary of results

To summarise the results, the number of errors in the tasks was significantly smaller than in the first usability test. The users could complete all of the tasks in a shorter amount of time. To improve the prototype, giving the users an option to type in their food aversions and diet types will give them more freedom than picking set options. Moreover, including nutritional information according to different servings will provide realistic data in the journal.

Another significant finding was when a user noticed that they could skip the personalised onboarding questions. They questioned this and asked how the app would be personalised if it didn’t obtain their data. This was an insight that I overlooked. I believed that the user wanted to use the app straight away, and allowing them to bypass the questions will create a better experience. However, this conflicted with creating a user experience tailored to the users’ needs and goals. Therefore, I will be removing the skip option in the updated designs.

Reflection

The development stage is an iterative process as I have had to revisit planning and design based on feedback to improve the product. This process can take some time, but it guides the project in the right direction saving time for a redesign later on.

Although it is good to test everything, it is more valuable to test the interactive prototype to understand how the user engages with the app. You can easily spot elements or frames missing within the flow, and it is much easier to measure the successes and failures. Moreover, the users interacted with the prototype without many prompts and guidance. I learned Balsamiq quite easily as it was a self-explanatory design tool that allowed me to sketch solutions quickly. Adding the interactions between the frames was worth the time and effort, as I gained valuable results from the usability tests. I have achieved my SMART goal 1 very well, and I am confident to use Balsamiq again for future projects.

I want to start creating high-fidelity prototypes in Figma and applying visual design such as colour and typography. Also, to create a design system for the product that is accessible and legible. I plan on speaking to my tutors about my designs and progress within the project to get expert guidance and advice to improve my prototype.

References

ANTHES, Gary. 2019. ‘Augmented Reality Gets Real’. Communications of the ACM 62(9), 16–8.

KIND-ENVY, Rita. 2021. ‘UI/UX Design Trends Of 2022 You Need To Сatch Up To’. UX Planet.org [online]. Available at: https://uxplanet.org/ui-ux-design-trends-of-2022-you-need-to-%D1%81atch-up-to-d02ff6623d5a [accessed 15 Mar 2022].

KUZNETSOVA, Anna. 2021. ‘14 Key Design Trends in 2021: What Professionals Need to Know about’. Testing Time [online]. Available at: https://www.testingtime.com/en/blog/ui-ux-trends-in-2021/?utm_term=&utm_campaign=DSA_Eng&utm_source=adwords&utm_medium=ppc&hsa_acc=7699520812&hsa_cam=15851815584&hsa_grp=133045371998&hsa_ad=574478907300&hsa_src=g&hsa_tgt=dsa-19959388920&hsa_kw=&hsa_mt=&hsa_net=adwords&hsa_ver=3&gclid=CjwKCAiA4KaRBhBdEiwAZi1zzoIAMuh4-EJzDxUaGKSjRxcn89yLVPUv0gANbjUX4wo3oSfykjrR_xoCIFUQAvD_BwE [accessed 15 Mar 2022].

NGUYEN, Tuong, M. REYNOLDS, R. KANDASWAMY and OTHERS. 2021. ‘Emerging Technologies and Trends Impact Radar: 2021’. Gartner Research Notes. Available at [online]. Available at: https://mcit.gov.eg/Upcont/Documents/Reports%20and%20Documents_632022000_Emerging_Technologies_and_Trends_Impact_Radar_06032022.pdf.

‘Nutrition’. 2017. AugmentedReality.Health [online]. Available at: https://augmentedreality.health/nutrition.cfm#:~:text=Augmented%20reality%20applications%20might%20identify,dietary%20goals%2C%20even%20while%20eating [accessed 13 Mar 2022].