Interviews revealed that users would like to try new foods at different restaurants while catering to their food preferences
Menuz
Discover the perfect restaurant!
Our goal was to create a better online menu for online users that accommodates their preferences and keeps track of favorite restaurants
In this bootcamp project I worked with a team of 5 other designers to create an app which helps users navigate online menus by providing a platform for them to input their preferences for a streamlined experience. I was involved in all aspects of the project from research to prototyping.
My role in the interface design was the primary designer of the the cards, pop-ups and layout for the mobile app. I also helped write the interview plan and conduct interviews
Problem
While searching for dining options online users are faced with cumbersome interfaces which are difficult to read and navigate. Information on these platforms is often incomplete and out of date. This presents a challenge for users, especially those who have specific dietary preferences or food allergies.
These difficulties led our design team to investigate how we might improve the online menu viewing experience so users can confidently and efficiently search for new dining options that are catered to their needs and preferences.
Solution
After analyzing our research findings, we proposed that the best solution for our users would be a mobile app and website designed to assist their research while looking for a restaurant to dine in at.
To meet the user’s needs the solution needed to provide interaction by providing an interface for the user to input information about their preferences and food restrictions while providing detailed information and imagery to assist in their decision making
Tools
Miro
Figma
Axure
Team
6 UX designers
6 UX researchers
6 UI developers
My Role
UX design
UX research
UI designer
Timeline
Overall: 3 weeks
Discovery & Research: 1-2 weeks
Design & testing: 2 weeks
Our Design Process
Interviews
During the ideation phase of the project, we conducted 6 user interviews regarding their online ordering and menu viewing experiences to build a proto-persona and to inform the design. Together with the team, we prepared an interview script with 8 open-ended questions, focusing on our target audiences’ motivations, habits and preferences. We referenced the user interview findings throughout the entire design process.
Our main objective was to find the pain points that our users encountered while researching different online menus and what features they would benefit from.
Surveys
Understanding the target audience and their challenges were our priority. To gain useful qualitative data we set up a Google Survey with 20 questions and received feedback from 31 participants. We were able to gather valuable insights about the process involved with researching a restaurant online and general eating habits.
The survey insights we gained provide guidance in crafting our user persona and highlighted a clear problem that we could address.
Armed with this research we were able to prioritize what features and interactions we could provide for the user of our platform.
Proto-Persona
We needed to reference our users' goals, needs, experiences, and behaviors. We created a proto-persona to humanize the data and focus our solution on the user as outlined in the interview and survey results.
Selina wants a quick and easy way to confirm her menu decisions based on her dietary needs. She also needs current and reliable information that she can confidently use to inform her choices.
Pictures of the items assist in her decision making and gives her an idea of the overall atmosphere of the restaurant and it's selections
We continued to update our persona as our research developed and referenced this key component as we built our product features.
User Journey
With the users goal of making informed decisions in mind, we made sure that our users find the search features and menu information without any roadblocks. We developed a new user journey map to identify the steps the user takes during their research on the app.
We identified how the user would find and use the product and how our design would benefit the user by providing them with the tools that were missing from their previous experience.
We discovered the ideal steps the user would take to ensure their research experience was efficient and informative.
Online menus can be difficult for users to interact with!
Potential Solutions
We began digitally sketching our user interface to include the most important features and how they would be presented. These wireframes were a way to quickly organize the information and develop the user flow without spending extra time with colors or images. Our sketches were the framework built from data from user interviews, the personas goal's, and the analysis of current layouts and limitation of other similar products.
Our menu should be responsive to different mobile and web layouts providing ease of access.
We prioritize the descriptions of menu items and appearance of images
Clear categories and sections that let the user know where they are in the menu
Complete ingredient lists, and food restriction information is provided on an expanding menu format
A filter for choosing food preferences will provide user input for their search
Wireframes
Using Figma, I translated my first sketches into low-fidelity wireframes. We began digitally sketching our user interface to include the most important features and how they would be presented.
These wireframes were a way to quickly organize the information and develop the user flow without spending extra time with colors or images.
Our sketches were the framework built from data from user interviews, the personas goal's, and the analysis of current layouts and limitation of other similar products.
Our menu is responsive to different mobile and web layouts providing ease of access.
We prioritize the descriptions of menu items and appearance of images
Clear categories and sections that let the user know where they are in the menu
Complete ingredient lists, and food restriction information is provided on an expanding menu format
Usability Testing for Low Fidelity
Our design team created a fully-functional, low-fidelity prototype of the new flows using Figma. This allowed us to test the navigation quickly without wasting valuable time before the colors and styles were incorporated. Once we established the users path, we began recruiting participants for the test who resembled our potential based on our persona. We did 5 usability tests in the first round and 4 after iterating on the issues that we’ve identified:
issue 01
For both for mobile and desktop users had problems with the layout of the filter on the page and were unsure about how that was used to make choices.
solution 01
Group content into smaller chunks and add hints about using the tools
We moved some of the items from the pop-up filter onto the main page for clarification and to minimize scrolling. This had a positive impact by making the features more discoverable based on content grouping
Based on user testing we moved the preferences from dropdown menus and took advantage of the size of the screen to display the options as buttons for quick identification and selection by the user
Mobile Iterations
The preferences list for mobile was cumbersome to some users and also caused confusion as it took up more of the screen and had too far to scroll. We simplified the interaction by moving some of the content to the homepage as icons which users verified was easier to navigate.
This is one of many iterations we made to the design before committing our style guide to the interface
Our team collaborated on a style tile to develop a unified look and feel while creating the interfaces for mobile and desktop
UI Design
Once the major usability issues were resolved, we moved on to design the final screens in Figma. Our goal was to create a visual identity that invites the user into the site with bold, vibrant colors with high contrast to break the selections into visual groups. This interface uses the material guidelines for the design of components and fields. Playful illustrations and full color imagery invites the user to engage with the product and provides the visual connection to the search results
UI design incorporated icons, pop-ups typography and colors to unify the look and feel for both mobile and desktop platforms
Usability Testing Mid-Fidelity
Once the main issues of the navigation were resolved, we created a fully-functional, mid-fidelity prototype with the new components and styles using Figma. We then tested these iterations with three more users who fit the criteria. We then confirmed the iterations before finalizing our design for
issue 01
Icons for Preferences are not all identifiable
To clarify what the icons for preferences were we added descriptive text and added images for food items that were easy to interact with and identify rather than having to search text lists.
solution 01
Filter on mobile is not obvious and users did were not sure of it's function
We made the filter icon a different color to act as an action button and also added hints about what the interaction provided to the user.
A pop-up and icons replaced the drop-down menu which users preferred and were more likely to interact with.
We added icons to the mobile app to make the pop up shorter. By adding color to the filter along with nudges about it's function we increased awareness to the interface and it's tools
A search button on the desktop page activates the filter choices which remain highlighted and visible to reinforce their function and increase trust in the preference filter
High Fidelity Prototypes
Our high fidelity prototypes are fully functional to give the user the experience similar to the final product. This presents the features and navigation the app would provide in it's final development.
Menuz is an application and website designed to give users an enjoyable and helpful experience when researching a restaurant to dine in and enjoy a meal.
We also include a robust filtering option to help “discover the perfect restaurant” to accommodate your lifestyle.
Reflections
One of the key lessons we learned from this project is the importance of conducting thorough research before proposing a solution.
At the outset, we each had different ideas about the direction the project should take and who our solution would benefit. However, we soon realized that diving in without first gathering insights and understanding the users' needs was creating a roadblock in our process.
Ultimately, our goal is to address the users' issues, not our own. By taking a step back and prioritizing user insights over immediate solutions, we were able to refocus and stay on track as a team.
Next Steps
We would like to build out more restaurant cuisine options to showcase different restaurant types.
A clearer example of how filter options affect the search functionality.
Create a function that opens directions to the restaurant with the user’s preferred navigation app.
A separate user flow for signing up for the mobile app, walking the user through how to best utilize the app and its primary functions
Thank you for reading my case study!
Want to work with me? Feel free to contact me!
...or just say hello on my social media.