Case Study — Food Allergy Tracker Easy. Eat

Overview

My goals were to:

  1. Understand if there was a better way to educate people with food allergies and prevent allergic reactions 
  2. Create and validate potential design solutions
  3. Communicate my design thinking and process
  4. Learn about conversational User Interfaces

Personal project, peer reviewed

I worked on my own, but solving a real-world problem of living with a food allergy. Peer reviewed by fellow UX designers. 

Duration

Two weeks. Week one: discovery, definition, and design. Week two: visual design, and usability testing. 

Tools

Sketch, Invision

Why Easy.Eats?

The problem:

There are no cure for food allergies other than time. Strict avoidance of food allergens and early recognition and management of allergic reactions to food are important measures to prevent serious health consequences. And a few conditions could be outgrown. Cow’s milk, egg and soy allergies typically begin in childhood and eventually may be outgrown. In the past, most children outgrow these allergies by school age. A recent study, conducted by researchers at Johns Hopkins University School of Medicine, indicated that children are taking longer to outgrow milk and egg allergies. Fortunately, the majority are allergy-free by age 16. Unfortunately, peanut and tree nut and seafood allergies are usually lifelong. 

Taking the right steps to manage food allergy and learn more about them can help lower these risks and be prepared when a reaction randomly occurs. 

Hypothesis:

The solution will be conversation based application designed for the vulnerable young adults & teen population. This project will be broken into two main parts. 

First, this app will help the user track their food allergies, and be given reminders on how to master critical skills for allergic individuals. 

Second, what will be introduced is a native chatbot. Since teens are familiar with sharing interfaces (like snapchat, and instagram) they should quickly relate interface. The chatbot will provide a quick introduction, and answer basic questions regarding food. For example, if an individual is sitting in a restaurant and is uncertain a food ordered was safe. They open app ask the bot a question. The chatbot then asks a few clarifying questions like name and how the food appears. Then quickly the chatbot either provides sufficient info about ingredients, or suggests potential steps for clarifying ingredients. The chatbot can be used for most food-based scenarios.

Empathize

Before I got started, I needed to learn about 2 important topics Food Allergies and Conversational UI’s.

1. Food Allergies

Building Empathy with Users. To understand the lifestyle/ habits of people who have allergies or other dietary restrictions. To build empathy with them and find out potential opportunities to generate value for them.

Methodology

  1. Contextual Inquiries: Observe participants when they purchase/ order food on a daily basis, record their behaviors, and reflect on their mindset and problems.

Questions I asked:

  • Why they need an easier approach?
  • What are people allergic to?
  • How do they normally navigate through the food landscape?
  • What problems do they face?
  • How can a food allergy app cater to their needs?
  • How do they already solve their allergy/ dietary problems?

Analyze

Define

I used empathy mapping to group themes and pain points. I took note about user actions to dig deeper into their lives and understand why they make certain decisions in the food atmosphere. 

For initial research, I interviewed 3 separate people who have grown up with food allergies who are now adults.

At the initial start of the conversation, I was able to create a concept map to work out where the crucial elements of and main problems stemmed from. I was able to see that there was more than one element to the problem.

Pain point 1: Susceptible to Allergic reactions. Living with a food allergy requires constant attention as to what is in the food to prevent life-threatening reactions.

Pain point 2: Inconvenience and repetition. Users need to read every single label, remember to bring Epipen where ever they go, and asking how food was made at restaurants.

This led me to believe that an app would be more appropriate for this situation given age group I’m solving a problem for who are ‘busy students’.



2. Conversational Interfaces


Learning about the Technology

Goal of research: To understand conversation interfaces. How it works, and how it can be used.

What I learned: 

  1. Conversational User Interface is an interface that uses a back and forth conversation as the model for interaction. Human types or says something to a machine, and the machine responds back with actionable information in a conversational manner in text, voice or both. This post deals with the visual side of Conversational UI and the way it is mis/used by different apps and services.


2. We can distinguish between two types of apps on the channel type dimension in this landscape:

  • Standalone apps that require an individual download (e.g Quartz news standalone app)
  • Parasite apps that appear as “channels” or “bots” within existing messaging apps (e.g Forbes Bot on Telegram)

In terms of the product development of this allergy chat app, it will first be a Standalone app, then later in the development it will transition into other platforms like ‘Facebook messenger’.

3. Designing the conversation

A team of individuals including Spencer Yang, studied over 200 Facebook Messenger bots to extract conversation dialogs for your reference: BotSpeak. Evaluating the output from bots, they adopted a pure data approach for lexical improvements and anecdotal advice on better presentation of the bot conversations.

4. Challenges of building a conversational UI

First, getting inspiration for how to build your bot based on how others build theirs. You can’t just search for bots based on the meta details in conversations, because there isn’t such a database. The second challenge is ensuring that the bot dialog is great and captivating. Other than what you know/ think your audience will like, there’s no easy way to see best practices across a wide range of bots.


Ideate

After developing my understanding of chat bots and food allergies, I moved onto getting my idea onto paper. With business goals to expand the technology in the future, we’ve decided to call our app Easy.Eat. For inspiration I looked at several nutrition, allergy, emergency, and conversational websites and applications.

From this research, I was able to better map out the key features of the app then create the initial sketches of the app. From the simplified user map, I was able to speak through the navigation of the app, key areas, and further explore one area. 

I pondered about the need for having a conversational interface as part of the app, and food scanning features. After having a discussion with a peer, these features seemed like a valid option. We came to a conclusion that a conversational interface would not only seem familiar, but enter the landscape of services when heading into the year of 2017. In which conversational interfaces will evolve, and gain traction with users. 

Prototype and Validate

From further research into the topics of both food allergies & conversational UI, I was able to create two user flows. Here is how I created the dialogue for the chat bot. I needed to develop the bots tone and speech around it’s key features. 

Second was design the user flow of the app. How users would interact, and respond through this app.


This initial app design shows key screens with variations in stages of the Chatbot conversation, and secondary features such as scanning. 

User Testing, Wireframe, and Prototype Reviews

After receiving feedback from my peers, it was time to create further iterations of the apps screens. I received feedback as to preferences and I started designing the wire frames in Sketch and designed a low fidelity Prototype with Invision. 

Version 1.0

After reviewing my wire frames with another designer, we noticed a couple areas for improvement. First was that the interface wasn’t visually engaging. Especially when keeping my persona in mind (a younger adult audience). Second, there were some minor awkward nuances to the conversational interface. I realized that I should take advantage with options when replying & relaying information within the conversation itself. 


Further Iterations from learning

Version 2.0

This version was a step into the right direction, however it had a few weaknesses. First, you’ll see a shift to a brighter color scheme that would invoke a friendly mood. Yet, there had been color clashes can be a burden to the eye. Second, was the attempt to add buttons to the conversational interface. The goal had been to make the interface engaging by adding buttons to the chat. The user would be able to tap to open a scanning feature or quickly select a default question to ask the chat bot. Still, after running usability tests this solution proved to be confusing to users. A major issue, was with the icons. Users tested had limited context about their function. Third was that conversation itself. Since this app’s main value is in its offering of foods ingredient information, if I were to provide every single ingredient within the chat cluttered the interface. Often, as what showed up in the usability testing, users would become overwhelmed with the clutter of the chat. 


Design Improvements for version 3.0

  1. Tone down the color pallet
  2. Evolve the conversational UI patterns
  3. De-clutter the screen
  4. Center actions around to the home Chat
  5. Scrap the initial mascot because user testing preference tests revealed it seemed un relatable

Version 3.0 





Conclusion

Based on validation of user feedback, there is a clear scope for development in the future. 

Some areas for future improvement: 

  • Expanding features to support vegan, paleo, vegetarian, and other eating habits.
  • Evolving the conversational interface to meet current standards of interfaces
  • Creating an interface for apple watch
  • Building upon popular platforms via an API in: Messenger, Slack, and Whatsapp.