Mobile application

LiberEat

Mobile application

LiberEat

Reworking a successful start-up app to empower people with allergies to make easier decisions in restaurants, supermarkets and at home.

A mobile application allowing individuals with allergies and intolerances to find foods suitable for themselves, friends and family members. LiberEat highlights the allergen content of food in restaurants, supermarkets and recipes, making it easier to make safe decisions.

An Introduction to LiberEat

LiberEat launched their initial app with the intention of taking allergen data directly from supermarkets and restaurants, providing a safer experience for people with food allergies. The existing allergy apps on the market would often used screen-scraped data, meaning it wouldn’t always be accurate or updated frequently enough to be safe and useful. LiberEat became the first mobile application to use data directly from the food providers.

The Project

After a successful launch, the start-up realised the need for a fresh look and feel to the app to move forward in the investment and business growth phase. Through a Santander internship, I joined the team to research the user experience and improve the existing app. Initially, the team planned for a simple redesign to give it a ‘cleaner’ look but after my investigation and interviews with users, I advocated for a much deeper, more meaningful change to the app.

The project goals
  1. Develop a fresh, clean UI through a strongly developed brand
  2. Bring a sense of community into the app and highlight the ability to favourite, share and comment on recipes
  3. Increase user retention with a better user experience 
The outcome

Over the course of three months, I worked closely with the Lead Architect to develop the LiberEat app into something that would be future proof and encompass the project goals.
I worked in the Agile methodology to balance time and resources between the four main features of the app: barcode scanner, product discovery, recipe library and restaurant exploration. Harnessing this methodology allowed me to look at the app holistically, as well as diving into details about the specific features of the app. 

Often, I would look at each feature in a process of UX audit, competitor analysis, user interviews and team workshopping to formulate the best course of action. Once the key goals were outlined, I’d move into the wireframing stage before ultimately developing a high-fidelity prototype in Adobe XD to use as an Alpha version of the app to use for user testing and comparison to the previous app. 

My process

1

Research

Competitor analysis, mood-boarding, user interviews (new and early adopters)

2

UX audit

Internal analysis of previous mobile app, testing theories and ideas with users

3

Iterative wireframes

Working closely with the developer and other team members to craft the perfect look and feel

4

Prototyping

Creation of working prototypes in Adobe XD ready for user testing and investor presentations

5

User testing

Closed user testing of prototype with team members friends, family and early adopters of the app 

6

Continuous improvement

Staged launch due to the development of large features which were a big change from the previous version

Project highlights

Managing multiple users

The problem

A key USP of the LiberEat app was the ability to manage multiple ‘profiles’ with one account, making it easier for families to manage multiple dietary requirements simultaneously. However, research showed that in the initial app design, only around 3% of users utilised this feature.
After exploring the possibilities and listening to some early adopters of the app, we realised the way multiple profiles were handled wasn’t very user-friendly. These interviews revealed a couple of key objectives that needed to be included in the new app to make this feature more prominent:

  1. Make it obvious that you can create additional profiles
  2. Don’t crowd the screen with the profiles
  3. Add the ability to disable profiles, as sometimes there may not be a need to filter for all the profiles on the account
Screenshots from the first version of the app
The solution

Don’t overcrowd & let me control it

To answer objectives 2 and 3, I tucked the profiles away into a handy button shortcut to a profile management screen. This allowed the user to see how many profiles were active at that time, and a dropdown on tap allowed them to quickly toggle profiles on or off, no matter where they were in the app. 
To add profiles, the dropdown also included a button to make it clear that more than one profile could be added. The design of this shortcut button drew on the principles of familiar apps, such as social media platforms, by using the profile picture of the user to represent profiles. Using this prevented the learning curve of the feature to be shorter and more instinctive. Test interviews showed that the users quickly picked up on this feature without guidance or much guesswork.

Screenshots from the new version of the app

Make it obvious
To solve problem number 1, I proposed we created a wizard helper tool that would appear on the first load of the app, pointing out key features. However, due to budget and time constraints, we were unable to fulfil this idea and instead created a slider welcome screen before users logged in to showcase a few important features.To add profiles, the dropdown also included a button to make it clear that more than one profile could be added. The design of this shortcut button drew on the principles of familiar apps, such as social media platforms, by using the profile picture of the user to represent profiles. Using this prevented the learning curve of the feature to be shorter and more instinctive. Test interviews showed that the users quickly picked up on this feature without guidance or much guesswork.

Screenshots from the new version of the app and proposed designs

App walkthrough