KitchenMate - a Health & Sustainability App
Overview
This project aimed to create an Echo Show 10 application to encourage people to improve their health, well-being and sustainability. With our overarching methodology underscored by the Double Diamond framework, this project recruited 12 participants using purposive and snowball sampling to comprehend user needs.
Using such insights to ideate solutions, create interactive prototypes, and conduct usability testing to improve the product, the main feature of our application revolved around creating user-tailored healthy and sustainable meal plans without the cognitive load usually associated with such a task. This feature was a solution that addressed the root issue identified in our research — ultimately generating a user-centred Kitchenmate application for the Echo Show 10.
Team: 3 Interaction Designers
Team Role: Interaction Designer
Project Duration: 10 weeks
Contents
-
User research methods included observations, contextual inquiries, and semi-structured interviews; from these, we analysed users' needs, goals, and pain points via thematic analysis, empathy maps, and a group affinity diagram, resulting in the creation of personas and user journeys to empathise and understand our user base.
-
For our conceptual design, using the Double Diamond Design Framework, we structured our user research insights by crafting Point of View (POV) and How Might We (HMW) statements to guide brainstorming & worst-idea possible sessions, creating primary and secondary concepts focused on health and sustainability.
-
Our detailed design was based on research and concept development; we designed Kitchenmate using Don Norman’s Design Principles of Visibility, Feedback, Affordance, and Consistency, creating paper-based prototypes for rapid usability testing.
-
Our results, based on the user research data, paper prototype testing, and outcomes, consisted of a medium-fidelity interactive prototype using Figma. Our iterations focused on developing an interface that is simple, clear, intuitive, and aligned with the user's mental model.
-
Upon reflection, we successfully delivered a high-fidelity prototype that aligns user needs with business and system goals by synthesising my insights from interviews and observations into personas, user journeys, and more.
User Research
We recruited 12 participants from diverse backgrounds and ages using purposive and snowball sampling methods.
2 Field Observations, 4 Contextual Inquiries, and 6 Semi-structured Interviews were conducted to explore users' cooking habits, sustainability knowledge, and their use of kitchen technology.
Before the sessions commenced, I created and distributed Informed Consent forms and a Participant Information Sheet, which was provided to the participants before the research began to ensure our research was ethical.
Research Deliverables
Individual Thematic Analysis and Empathy Maps helped identify user pain points, needs, and motivations.
A group Affinity Diagram using Miro was used to organise the findings into key themes for future ideation.
Findings from Affinity Diagram
Findings from Affinity Diagram
These insights guided the development of Personas and Current User Journeys. The personas were used to outline and understand our user base, and the user journeys provided further understanding of their current experiences and how our product can fit into their lives.
Using this data, I wrote both personas, with my team members adding visual elements to make them easy to read - ultimately helping engineers, designers, and other researchers understand our user base.
Grace - User Persona
John - User Persona
Conceptual Design
Using insights from the user research and following the Double Diamond Design Framework, we structured the synthesis & problem definition process into two key stages:
Discovering user challenges and needs.
Defining clear problem statements.
From our user research outcomes, we created POV (Point Of View) statements for the two personas to help us capture the design vision and challenges based on the personas' needs and insights. Following this, we started asking specific questions, starting with "How might we?" to help us navigate the broad scope by providing a wide range of workable solutions.
Table 1. Needs and Insights, Generated from POV statements and HMW questions,
These solutions were used to address issues related to health and sustainability and narrow down the scope to address specific issues faced by our user base.
Exploring solutions through divergent thinking, we evaluated ideas based on their feasibility and alignment with user needs and pain points identified through our research. We chose Brainstorming and the ‘Worst Idea Possible’ techniques during the ideation process to navigate the broad scope of our research, provide various workable solutions and generate as many ideas as possible. Due to having busy schedules, we decided to conduct the brainstorming activity digitally in a Zoom meeting using Miro, as it provided the digital facility to work with sticky notes. Each team member wrote ideas on different sticky notes based on our POV statements and ‘How Might We’ questions until we ran out of ideas.
Next, we wrote the worst ideas possible and flipped them as a convenient way to ideate without experiencing stress or anxiety. This activity occurred in person, and we wrote all the worst ideas we had suggested on a sticky note. These were based on two separate concerns, healthy living and sustainability, to help us generate more ideas on both concepts. We analysed each concept based on the feasibility and groupings from key insights from the affinity diagram:
Information,
Time Management,
Health Plan,
Inventory Management.
From this, we chose our primary concept and subsequently included secondary concepts that could be implemented during the future product development phase.
The KitchenMate team generating ideas using ‘Worst Idea Possible.’
Storyboard & User Flow
To create an informal narrative description, we chose John's persona as he had many concerns, as represented in his user journey map. To generate the scenario, we decided to focus on creating the user's task based on his concern about planning a budget-friendly and healthy meal for his family. Once we finalised the user task, we brainstormed to generate users' actions and thought processes and created a scenario.
Based on the scenario, we visualised John’s actions, his emotional state, and his thoughts while doing his task. Then, during our Zoom meeting, we used sticky notes on Miro to generate a rough draft of each scene. Following this, I created a storyboard using Sims 4, Miro and Procreate to detail John’s actions and interactions in a visually appealing and easy-to-understand design.
Storyboard - John's Scenario
After this, we created a User flow diagram to map every step the user will take to complete a task which helped us understand our user's cognitive pattern. First, we defined the user's task with the product. Once the task was finalised, we created a user flow diagram using Miro, which showed the different paths the user would take to carry out the task.
User Flow Diagra
Detailed Design
Based on the insights from our user research, POV statements, how might we statements, concepts and storyboard, we designed and prototyped the product's key features over two-weeks using Dorman Norman’s design principles (Visibility, Feedback, Affordance, Mapping, and Consistency), a paper-based prototype and detailed high-fidelity wireframes designed on Figma.
Design Patterns & Principles
As we developed an application for Echo Show 10, we listed the technical features and resolutions provided by the device. Furthermore, as the Echo Show 10 has a larger screen size, we decided to follow the design guidelines from the Android design guideline for large-screen devices. Moreover, we referred to the public pattern libraries to create interactive elements.
While developing the prototype, we decided to follow Don Norman's design principles as the foundation for designing our prototype. As information is too vast to process at a glance, we decided to follow design principles. We focused on Visibility, Feedback, Affordance, Mapping, and Consistency as the design's base rules. In addition, these principles were followed to reduce the cognitive load on the user.
Paper-Based Prototype
After meeting in person to brainstorm the features we would design and prototype, we first developed a paper-based, low-fidelity prototype as it was faster and helped us easily make changes without thinking about the visual aspects of our design. Each member shared ideas on how the users would interact with the product, what key inputs are required, and how our application would solve the users' problems.
To save time and effort, we decided to evaluate a low-fidelity paper prototype. This allowed us to stay flexible and make changes before embarking on the final design creation.
As such, I performed a moderated, face-to-face "Wizard of Oz" test using our paper prototype, documented via video. During the test, the participant was tasked with creating a meal plan and was observed for pauses or body language that suggested any trouble completing the task. I conducted a post-test interview to uncover any non-observable thoughts the participant had during the test, with Budd's (2007) Heuristics For Modern Web Application Development used as a reference for evaluations.
Wireframes
We created medium-fidelity wireframes using Figma based on Don Norman’s design principles, paper-based prototypes, and usability testing feedback. Then, we each constructed the critical features from the paper-based prototypes and improved the wireframe based on the feedback. I created the log-in and sign-up pages as well as the sign-up pop-ups within the prototype.
Prototype with annotations, using design principles of Visibility, Feedback, Affordance, Mapping, and Consistency.
Results & Evaluation
After completing the first digital prototype, we looked for potential issues the user could face based on Don Norman's principles. Based on initial assessments where each team member ran the prototype, we found navigation and cognitive load issues that users can face. Therefore, we reiterated the design based on our affinity diagram and focused on the essential features for the user. For example, following an iteration, we incorporated onboarding wireframes to enhance usability.
We followed Don Normans' design principles and Nielsen's usability heuristics to design our final prototype. According to Panchaud, K. (2021) the digital environment we build will be a means of communication between humans and machines. If those interfaces are poorly designed, this will impact users' engagement with the platform and make them perform activities less efficiently. Therefore, developing an interface that is simple, clear, intuitive, and aligned with the user's mental model was essential.
Kitchenmate Prototype
Reflections
Our user-centred design process for KitchenMate effectively produced an application that effectively reduced the cognitive load for its users by simplifying the tasks surrounding health and sustainability. Comprehensive research methods, like contextual inquiries, and outcomes such as personas and user journeys, helped ensure that the application was designed with the user in mind, while usability testing and feedback gathering helped refine the design and ensure it effectively met user needs.
In future iterations, I would conduct further usability testing using the detailed, interactive prototype to uncover further improvements for our application, which would be beneficial in refining the design and expanding features, particularly around sustainability metrics.
Overall, this project evidences the strengths of user research-based methods; the overall high-fidelity prototype below provides a glimpse into the application’s key functions.
