diamond and wolf case study website banner

Title

Gluten Free Advisor

Project Type

Concept project

Timeline

Begin -> 1st August 2022

Phase 1 -> 3 Week -> Research + user interviews

Phase 2 -> 2 Weeks -> User flow, wireframe, style guide, branding, mockups

Build -> TBC

My Role

Research, Branding, UX & UI Design, Frontend Development of React App

Project Brief

Design an app that will be the trip advisor of gluten free eating and travel. This app will be the ultimate travel companion for people living a gluten free life. It will help people find restaurants nearby that they can eat safely in.

design process

Define the Problem

gluten free app define the problem

Problem research & analysis

Is this is something others are also having problems with? Researched other apps, read app reviews, sent out a survey to the gluten free community

Key Findings

At a basic level I wanted to find out if people with gluten intolerances eat out regularly. From the survey I found that 5% eat out 2 or more times per week, 30% eat out once a week, 44% eat out once a month, 14% once every 6 months.

After this I asked them if they were guaranteed that a restaurant was Coeliac safe, would they eat out more often and the response was almost all a ‘yes’.

The app “find me gluten free” is a good app for gluten free but it lacks thought out user experience design and style. It is clunky and not very user friendly. The user is bombarded with options on each page and it is difficult to find where to do the basics such as post a review.

The app depends on having active users, if there are no reviews in any of the restaurants nearby, the user may not know which ones are safe to eat out in.

From the survey it was clear many people are wary of travel since being diagnosed

There are often limited choices for gluten free when eating out. Also a big problem is lack of knowledge and awareness of restaurant staff of Coeliac and gluten intolerance

Key findings from research of other apps and their reviews:

Users wanting other dietary restriction options/filters

The app will say they have GF but when they go to the restaurant they will not be GF

App crashes and bugs happen often

Design is outdated and not a joy to use

The app should only be for coeliac/gluten sensitive people

The Solution

I looked at the problems and challenges and came up with solutions. I thought about what features must the app have to solve these problems:

The app should be very user friendly and easy to use.

The app depends on having active users - How to encourage users to add reviews? Make it free after x number of reviews. Gamify it - have different levels and achievements for having a lot of reviews.

Issues for people who want to travel - Community page that can be location specific so users can see all the local recommendations and reviews.

Limited choices - there should be an option for reviewers to add tags for the number of GF options, this will be available for a filter option when searching for restaurants also.

Restaurant staff awareness -The review process will have ratings for Staff Awareness and service so users can make more informed choices.

Users wanting other dietary restriction options/filters - option for reviewers to go into detail with these in the review process, they can also filter by these in the search.

Some apps will say they have GF options but when they go to the restaurant they will not be GF - App will have a feature to show ‘last verified’ and a ‘recent reviews’ search option.

App crashes and bugs - app will have a feature to quickly and easily report bugs and issues.

Should only be for celiac/gluten sensitive people - There will be a filter option to only show reviews by people with Coeliac etc.

User Flow

A good flow chart will show you what ways a user can accomplish a task, define the actions they will need to move through the app and spot any underlying issues such as where they might get stuck.

gluten free app user flow diagram

Before beginning any design, I always create a user flow chart. This one shows what ways a user can accomplish a task, define the actions they will need to move through the app and spot any underlying issues such as where they might get stuck.

Wireframe

They are great for figuring out where elements are going to appear on the pages - no need for styles or colors or images. These are meant to simple so you can easily map out each page and how the elements will function.

gluten free app wireframe screens

The use of this wireframe meant I could quickly map out all the screens and easily make changes where necessary.

Mockups

Once the pages were all mapped out and the functionality planned on each page, it is necessary to create hi fidelity mocksup so that the developers can visualise how the app should look.

gluten free app mockups

An important aspect of this app is to collect vital information about the restaurants via the reviews uploaded. This will require a lot of questions being asked of the user during the review process. In order to display all this information in a visually pleasing and user friendly way, I have added the options as circlular buttons that the user can tap

The use of icons and micro interactions to add to the user experience and keep them engaged so that they answer all the questions.

gluten free app mockups

The reviews on the profile page are layed out in linear path, gives the users an impression of a journey that they are on. This is a visual representation of the journey they are on and the achievements they can pick up along the way.

Style Guide

Before starting the build, it’s important to create the UI style guide. This really helps communicate and collaborate better with the developers and create consistency throughout the app.

gluten free app style guide

Development

Currently in the Development phase, building the app with React & Typescript.

User Testing

I plan to make the app in stages. The Map/List page and adding reviews first. Once the app developers have this ready, I will be able to test and give it to a small group of users to start testing. The reason for this is to build the most important part of the app first - for cost reasons and to get the testing underway as soon as possible. I want to test with real time users which will help us figure out bugs and issues, and also understand what changes are needed or if new things need to be added.

The second stage will be the community part to the app and once this is ready it will have a lot of user testing.