— CONTEXT

Bachelor's program group project

for the "Participatory Design" course


— ROLE

Interaction Designer (UX/UI)


— DURATION

3 months (2019)

Food allergies and preferences can make it difficult for users to check if a product is suitable for them. Reading every ingredient on a label is inefficient, frustrating, and can be dangerous due to complicated and unknown ingredients.


FoodFocus is a mobile app prototype that simplifies the process by allowing users to scan a product's barcode or QR code and have the app approve or reject the product based on the user's specifications, and even suggest alternatives.


Disclaimer: Due to our lack of medical knowledge and background, this app is merely a project concept focusing on the UX/UI design aspects of the app in the context of the Participatory Design method.

First off, we need a plan…


I created a project plan to ensure that our group stays on track with our goals, milestones, and schedule throughout the project. It also included assigned responsibilities for each member but the schedule was flexible enough to work on potential obstacles ahead of us.

Talking to the target group


My team and I conducted semi-structured interviews with 10 participants who had different types of allergies, such as lactose intolerance, nut allergies, and fruit allergies. During these interviews, I asked open-ended questions to better understand the challenges they face and possible solutions that would enhance their experience.

Observational Research

During the research phase, my team and I joined participants on their grocery shopping trips to observe their actions and experiences in real-time.


This allowed me to gain a deeper understanding of their behaviors and ask questions about their decision-making process, such as how they avoid or work around problem areas. By doing so, I was able to gain valuable insights that complemented the findings from the interviews and helped me better understand the challenges and difficulties that users face.

Key Insights

From the collected data,

I organized the recurring problems into three categories:

1) Availability

  • • Tendency to stick with what users already know and a reluctance to risk and try new products🤷‍♀️

  • • Frustration with the limited availability of options in local shops😒

  • • Users often face high costs for alternatives that meet their specific dietary needs or preferences💸


2) Inefficiency

  • • The process of going through each product's ingredient list is time-consuming and inefficient 🕒

  • • Small text sizes make it difficult for users to read all the ingredients listed🤓

3) Unfamiliarity

  • • Unknown scientific ingredients are listed on various products🤔


Personas

I utilized the insights gathered from the interviews to create three personas that represented our target audience. These personas were designed to capture the common pain points and goals shared by our users.


A major pain point that emerged from the interviews was the time-consuming process of reading ingredient lists and all personas expressed their concern and confusion over the various scientific names used in ingredient lists.


Now that we have a better understanding of the context, we held several workshops with our participants with the goal of working together to design a solution.


It was very important to me that we involved and engaged with our potential end-users to increase the probability of a usable design by giving them a voice in the design process. It also provides an equal platform where technical (designers) and non-technical (end-users) groups involved can learn from one another.


Phase 1: Preparation


  • • Ethical requirements were fulfilled via consent forms sent out to the participants before the workshop.

  • • The workshop started by introducing the purpose and goal of both the project and workshop.

  • • The brainstorming method was explained and a brainstorming warm-up was done to ensure that the participants understood the workshop.


Phase 2: Critic


  • • Brainstorming potential issues and areas of concern
  • • Task: Write down on post-its the keywords, concerns, and/or questions regarding the future app.


These post-its were then grouped together to create common themes of concern, questions, potential issues, and so on. An example is seen on the image above.

Phase 3: Implementation


  • • Brainstorming solutions for the problems in Phase 2
  • • The same task and process in Phase 2 were applied in Phase 3. However, now we focused on generating design solutions with the participants.


Phase 4: Follow-up team meeting


After the workshop, my team and I reviewed the data collected from the workshop and developed an action plan based on our findings. This included deciding on the key functions to be incorporated and how they would be integrated into our prototypes.


We documented these decisions and shared them with the workshop participants for feedback and approval.


Mid-Fidelity Wireframes


Beyond basic sketching, I created a mid-fidelity wireframe using the online prototyping tool, Marvel. The prototype screens below resembles the real-life product structure, using design components helped in aligning with real expectations.

Workshop Evaluation of the Wireframe


Task 1: Participants were given problem scenarios for them to solve using the prototype. They were also asked to “think-aloud” while trying to solve the problems so we understood their thought process.


Task 2: Participants were asked to write down the positives, negatives, desired functions, and unnecessary functions on post-its.


The discussions and notes from this workshop were then gather and discussed with our team to help us with the design implementation on Figma for the Hi-Fi prototype screens seen below.

Interview Evaluation of the Prototype


I conducted semi-structured interviews with each of our participants after they had explored the prototype, starting with basic questions like "What was your experience like while using the app?" and progressing to more detailed questions like "How can we make the app more useful for your needs?".


We carefully considered the feedback provided by our users during these interviews and I incorporated it into the design iterations of the project. Their insights helped me to create an app that met the needs and preferences of our target audience.

This is a promotion video I made for the application

An overview of the re-designed screens

KEY TAKEWAYS

This project was presented in a public exhibition and was noticed by an Innovation Support recruiter from Stockholm University who offered to work with us to develop the idea further. It was a great ✨accomplishment✨ to contribute a real solution for real-life people by listening and letting their needs guide us during the entire product lifecycle.

Thanks for reading!


For any questions or even just a chat, contact me at lasin.meryl.ann@gmail.com or on my LinkedIn😁