GoldiBite

Developed a mobile app to assist travellers with food allergies and sensitivities.

TYPE
Mobile App • Case Study

ROLE
Frontend Developer, UX/UI Designer, Blogger

TOOLS
Figma, Illustrator, Wisp CMS, Expo, Google Gemini 1.5

DURATION
Three Months

VIEW CODE

A team member's best friend was diagnosed with celiac disease at 17, forcing them to adopt a strict gluten-free diet. During a trip to Mexico, the language barrier and unclear allergen labelling made dining overwhelming. Each meal brought uncertainty—was the food safe? What if an emergency occurred? What should have been a joyful trip turned into a constant source of stress.

After researching multiple online forums and blogs, we discovered this issue was far more common than we had realized. The lack of clear allergen labelling, especially when travelling internationally, was a widespread frustration among those with food allergies and sensitivities.

This experience highlighted the lack of support and ongoing struggles to find reliable information, especially as food allergies continue to rise globally.

How can we make dining and travelling safer and less stressful for those with food allergies or sensitivities?

What Makes Dining With Food Allergies Difficult?

Addressing this issue requires understanding travellers' needs, goals, and challenges. We interviewed 10 people with food allergies or sensitives such as celiac disease, lactose intolerance, nut allergies, and soy sensitivities. Dining out was consistently identified as the primary frustration due to unclear allergen labelling.

A study by Dalhousie University further emphasizes the issue, revealing that:

• Only 27.7% of respondents with food conditions believe that menus properly indicate allergens.
• Shockingly, 46% of these individuals reported having a reaction while eating at a restaurant, with 25.5% experiencing reactions more than once.

These statistics highlight the importance of clear allergen information for travellers with food allergies. To further narrow the issue, we explored personal stories on Reddit and blog discussions, where users shared recurring struggles, including concerns about cross-contamination risks at restaurants. These insights helped define the app's goals and shaped our user personas.

Based on the pain points and expectations of the user personas, it's clear that providing accessible allergen information and an easy way to manage dietary restrictions is crucial. With the increasing reliance on mobile devices, we need an app that offers quick and seamless access to real-time information. This app must address challenges like language barriers and unclear food labels, allowing users to navigate food options with ease and confidence.

Which led to the following key insights:

• Many travellers struggle with unclear allergen indicators on menus and products, emphasizing the need for quick, reliable allergen information.
• Travellers are concerned about cross-contamination when dining out or travelling internationally, especially in unfamiliar food environments and with language barriers.
• Travellers want a solution that provides allergen-specific filtering to quickly identify safe food options.

Defining the Solution and Scope

To address our persona's needs and frustrations, we focused on optimizing key features that offer the most value to travellers with food allergies while identifying additional enhancements for future development.

• Onboarding Process: A quick, personalized setup for allergen and language preferences to meet travellers' specific needs.
• Barcode Scanner: Scan product barcodes or enter them manually for accurate allergen information.
• Menu Scanner: Scan menus to identify allergens in food options, ensuring safer dining.
• Guides and Emergency Features: Offers allergy reaction management tips and an emergency button to contact local emergency services.
• Customizable Settings: Customize profiles for allergens, languages, and preferences like light/dark mode.

Early Concepts and Iterations

To refine the features and interface early, a lo-fi prototype was quickly developed and tested weekly with feedback from mentors, designers, and individuals with allergies.

This process provided valuable insights that led to several design improvements.

For example, the initial home page resembled a travel app too much and didn't effectively highlight the core features.

The floating emergency SOS button was also adjusted, moving from every page to its own dedicated section in the navbar to reduce accidental clicks, ensure quicker access during emergencies, and prevent interference with other content.

The most valuable feature of GoldiBite is the ability to scan or take a picture to quickly access food safety information. A basic happy path was mapped out for the barcode and menu scanner, considering the choices travellers might make and outlining various options for using the feature. This guided the design and structure of the scanner and ensured users could easily understand how it works.

Colour Choices

GoldiBite's palette is carefully designed to prioritize clarity, safety, and usability. Teal aligns with global food allergy awareness, deep orange and red highlight allergen warnings and emergency tools, and green promotes health and wellness. These choices enhance functionality while reinforcing travellers' confidence.

Final Product, User Insights, and Enhancements

After finalizing the visual design, we integrated colours, typography, and images into our hi-fi prototype, bringing the food safety app one step closer to the final product.

Using feedback from earlier testing rounds, we focused on enhancing the user experience by ensuring font sizes and colour contrasts met Web Content Accessibility Guidelines (WCAG), while also introducing dark mode for better accessibility.

To further refine the app, we conducted another usability test, which led to key layout improvements for features like the onboarding process, barcode scanner, menu scanner results page, emergency page, and settings. These changes contributed to a more seamless and user-friendly experience.

We gathered data and feedback from five participants, including four design and development instructors, two of whom have food allergies, and a friend with a severe food allergy.

The following key patterns were identified:

• 4 out of 5 participants found the onboarding process smooth but suggested clearer feature explanations.
• All participants liked the barcode/menu scanners and found the process smooth but noted bugs (mainly due to limitations in Google Gemini 1.5, such as slow processing times and potential resource exhaustion).
• 2 out of 5 participants recommended simplifying the emergency contact page and clarifying contact details.
• All participants found the guides section clear but suggested more spacing and less text for better readability.

Our goal was to ensure travellers could navigate the app with ease and complete tasks without confusion.

Key Challenges

The barcode and menu scanners rely on AI and machine learning, which can occasionally make mistakes. To address this, we've included a privacy policy, terms of service, and a disclaimer section for transparency and user awareness.

Some databases may lack essential allergen information, miss certain products, have limited calls, or be restricted by high paywalls.

The processing times can also be slow sometimes, and issues like resource exhaustion may occur when using tools like Google Gemini 1.5. To mitigate these challenges, we've integrated multiple APIs alongside Google Gemini, implemented backup API keys to prevent service interruptions, and added a loading animation to manage longer processing times.

Throughout the development process, we encountered collaboration challenges. To ensure we could deliver a functional MVP, we established new ground rules and accountability measures, alongside the signed project charter, to enhance team coordination and maintain project momentum.

Conclusion

Presenting at the D3 & FSWD 2024 Annual Student Innovation Design & Technology Showcase to over 100 people was also a valuable experience. The app was well received, with testers who had allergies or knew someone with allergies expressing strong enthusiasm for its practicality. Looking ahead, potential prospects include company analysis, food recall alerts, multiple user profiles, and AI chatbots, all of which could further enhance GoldiBite's functionality and user experience.