Find Me Gluten Free
Concentrating a sprawling app experience
Client: Personal
Role: Product Designer
Year: May – July 2017
Product Design / UX Research / Branding
Find Me Gluten Free (FMGF) is an app that helps individuals “easily find gluten-free friendly restaurants, anywhere [they] go.”
Challenging assumptions
I was a frequent user of the Find Me Gluten Free (FMGF) app and appreciated that I could easily find restaurants and cafes with items that matched my dietary needs. However, certain aspects about the app didn’t seem to fit with the main experience. How could the experience of the app be made better overall? In order to figure this out, I needed to challenge my own biases and assumptions in order to determine if other users of the app felt the same way about their FMGF experience.
Thanks to a gluten-free sub-Reddit, I was able to find other people who used the app to learn about their experiences with it. Some questions I asked included:
What do they use the app for?
What existing features do they use the most?
Are there any frustrations they experience when using the app?
Would they recommend the app to a friend? Why/why not?
After chatting with these users, it was established that the experience could be more direct and simpler to navigate. When opening the app, many users skipped over the news section that was initially presented, favouring to go to the restaurant search. Their main goal for using the app was to find restaurants they could enjoy without worrying about their intolerances or allergies.
How might we make the FMGF experience more concentrated on exactly what users want—to find food they can safely eat?
Left to right: Landing screen when you first open the app; A restaurant profile; Example of restaurant listings (organized by distance from the user).
Analyzing the current app
At the time of this redesign, the FMGF app contained a wide variety of information that users had access to: gluten-free products and coupons, Celiac community news, restaurant reviews, a dining card, and gluten-free recipes. The app’s menu was dense with information and some sections seemed misplaced in the context of a restaurant finding app. Based on feedback from the user surveys, I decided to relegate some of the information to the app’s associated website, including the gluten-free products, coupons, and recipes.
When the user first logged-in, they were shown a news feed with events, research findings, and new products in the Celiac community. At the top of this screen, there was a tab menu showing the options “Search Near Me,” “Search by Name,” and “Main Menu”. If the main purpose of the app is to search for restaurants, why are these search options not made more obvious?
Left: Tabs showing how users can filter their restaurant search criteria. Right: Screenshot of pull-out menu.
The restaurant listings were also information heavy, including: ratings, price range, type of food, and distance from the users’ current location. However, the listings did not include images of the restaurant or the food available. Images like these have become a standard pattern in mobile app design.
Left: Example of restaurant list. Middle & right: Full restaurant profile with all immediately visible sections.
Beginning the redesign
The app’s wireframes were created by comparing the main user goal to the information already in the existing app. Sections of information were reorganized so the restaurant search feature (map and list views), restaurant profiles, menus, and reviews became the main information present. Other features, such as sponsored gluten-free products and recipes, were moved off of the app so they could be housed on the FMGF website where they were still accessible to users. If business stakeholders required the sponsored products to be re-added, they could potentially be formatted as ad breaks between the main blocks of information.
Click user flow to enlarge.
Building out the restaurant search and profiles
Restaurant profiles are the most important feature of this app. On the landing screen, restaurants are represented in two ways—either as a card with a large image, or in an elongated map card, allowing places to be seen in relation to the user’s location. This map card features different inner tiles for each restaurant (ordered by distance) that the user can tap on to view that restaurant’s profile. Users are given two layout options when viewing their search results: to use a map view or list format. This allows users to search in multiple ways (by location, name, food-type, etc.) and view the search results in a format that works for them.
Left: Main landing screen when the user opens the app. This screen shows examples of cards used to represent individual restaurants and restaurants located nearby. Middle: Restaurant search results shown in a list view. Right: Restaurant search results shown in a map view by proximity.
When a user navigates to a restaurant’s profile, they’re greeted with a large image of the food the venue makes, contact details, business hours, and menu. Below this first section are the latest reviews by other users. If users tap the “Menu” button, they are given a list of each menu item offered at the restaurant. If the user wants more information about the item, they can tap the menu item and view a larger image of the item and read a description. This allows the user to further check that the menu items meet their dietary needs.
An updated restaurant profile with a menu item overlay describing the dish.
Additional sections
Even though a large portion of the app has been devoted to restaurants and their menu items, including the news section could be beneficial. News articles and reports pertaining to Celiac research or updated restaurant menu items, would help users keep track of new discoveries related to their health and the restaurants they eat at most often.
While these reports and articles took the main focus in the previous version of the app, they could now appear below the restaurant cards on the main landing page. This would allow them to be easily viewed, but still allow the restaurant listings and map view to take the presidency.
Left: News cards at the bottom of the home screen. Right: A list of news items on the main latest news screen.
Challenges
A major challenge during the redesign of this app was the amount of information that needed to be displayed for each restaurant. Each listing needed to include the restaurant’s name, location, price range, operational hours, menu items, customer reviews, and website link. How can you decide which pieces of information are more important than the others? Ultimately, I looked at similar apps (i.e. Yelp, Zomato) to learn how they displayed the restaurant information in their apps, and how this related to the information that FMGF needed to present. I would need to conduct A/B testing on the restaurant cards and profiles to ensure that the information presented is helpful to users.
Results and next steps
With this new design, the distribution of information is more logical and organized, according to some user feedback. If I were to continue with this redesign, usability testing would need to be completed to validate all of the design decisions presented above.
Business stakeholder input would also be needed in order to make sure those were met in conjunction with the user requirements. This might include a second phase of design incorporating the sponsored products and recipes, as those features were in a beta release at the time of this remake.