Overview
Foodies: Find the perfect restaurant! It’s the inclusive mobile app that helps to find the perfect restaurant, based on the dietary requirements and food preferences of your guests.
My Role
Design the whole product from the ideation phase to the early implementation stages. This project is a part of the Interaction Design Specialization from the University of California, San Diego on Coursera.
Design Brief
The challenge was to solve a problem that could be found in people’s daily lives, based on:
- Time — Mission: Redesign the way we experience or interact with time.
- Change — Mission: Design an interface that facilitates personal or social behavior change.
- Glance — Mission: Find people and design a personal dashboard tailored to their needs.
Designing an interface that facilitates social behavior change, was the chosen one, because the following reason:
London is an exciting and diverse city, where people from around the world with different backgrounds religions can be found. Thanks to that cultural mix, there are hundreds of restaurants and food markets. Plenty of places to enjoy a nice meal.
For that reason sometimes it gets tricky to find a place that it will please everyone. Either people spend lots of time looking for the restaurant that it would suit all dietary requirements or simply part of the group would not find a suitable option in that restaurant.
The goal is helping people to make more inclusive and thoughtful choices when they are going to have lunch, dinner or brunch with friends, family or colleagues.
Needfinding
Needfinding is the art of talking to people and discovering their needs — both those they might explicitly state, and those hidden beneath the surface. It is only in truly understanding people that we can gain meaningful insights to inspire and inform a final, impactful design. — Rizwan Javaid, UX Designer.
A list of people that might be interviewed and situations to observe was done. This interview and observation plan was done to come up with the design insights.
Interviews & Observation
A total of three people were interviewed and observed during this part of the process. The people observed were in these three different situations:
- A Colleague of work in a social work lunch.
- A Manager organizing a dinner for a team.
- A Friend organizing a Birthday Party (+8 people)
All three people were observed during the whole process. From looking for a restaurant to the event itself. Most of the constraints and time consuming issues were found on dietary requirements based on religion, allergies and lifestyle.
Top findings
- The most time consuming part of the process was when dietary requirements were based on religion, allergies and lifestyle were involved.
- One or more of the dietary requirements were “ignored” when there was an “out of the blue” work lunch. This was due to the lack of time to make a decision and distance.
Ideation
Observing people gave a perfect base to brainstorm specific opportunities for design innovation. Some ideas were brainstormed:
- Searcher with different food filters.
- GPS Location with a filter system.
- Suggestion app for restaurants.
- Wearable bluetooth with your dietary requirements.
- Social App for dietary requirements.
- Restaurant searcher more dedicated to allergy/ dietary requirements.
- QR code at the door of restaurants.
- Upload menus of the restaurants.
- Website dedicated to inclusive restaurants.
Point of View
Some Point of view were focused in a couple of winning brainstormed ideas. Do these ideas address a deep user need? What is the point of view? What we would like to achieve?
Having lunch with friends and family is important to our social life. Finding a place to eat when a group of people have different dietary requirements due to their religion, diet or background. The task it does not get easy…
Creating a Social App where the users can add their friends & preferences, with an organized searcher, user-friendly and all the data from the restaurant. It would make easier for people to find the right place to eat and enjoy their meals.
Inspiration board
What this Social App should be? What words could relate relate to the design idea or point of view. A list of “words” or “concepts” was created:
- Inclusive: Should be available for different backgrounds, diets and religions.
- Social: People could join, create their profile, add friends and explore new places to eat.
- Fun: Eating outside is fun, so looking for a restaurant and try new places also should be a fun experience.
- Dedicated & Simple: Product specified, no diversification or a lot of useless features.
- Integration: Easy to integrate with other platforms like Open table or TripAdvisor.
Also some competitive analysis was done. Different apps were found catering different dietary requirements or religious backgrounds.
Storyboard
Storyboards, are an effective and easy way to understand and explore the experiences of the users in the process.Two scenarios were this “social app” could work were created.
1.- Dedicated & Inclusive
- Janine and her friends decide to have a dinner.
- Janine fancies a burger, but her friend Michael is vegan and Jamil wonders if the meat is halal.
- Janine checks the app, with the requirements for the restaurant that they need. Should be burgers, halal meat and vegan option.
- The app came with 7 restaurants that meets the requirements of Janine and her friends.
- They decide for the restaurant with higher rating
- Janine are her friends are enjoying a delicious burger!
2.- Social & Fun
- Next Saturday is Alex’s birthday. He wants to organise a dinner. He asks in the WhatsApp group, who wants to join to the plan.
- Everyone is happy to join. But now starts the big deal. Where? Everyone starts to propose restaurants, dietary requirements etc. It’s a mess!
- Alex remembers the app that allows to select restaurant based on preference on your friends requirements.
- Alex open the app, and creates a group with all his friends.
- The app came app with different results, Alex chooses the one with the best match.
- Alex is having a lovely Birthday party!
Design
Once the idea and the research was done, it was time to move to the early stages of designing.
Features & User Flow
Before starting to sketch any User Interface or Prototypes, it was important to set up what main features, based in the research, should be included in the App.
The main features for the App were:
- Create Profile.
- Create an Event.
- Add Friends
- Add favorite Restaurant.
Furthermore, it was decided what actions the user could take at each feature. Based on the features, goals and research a first User Flow was designed.
Sketching & Rapid Prototyping
The main features of the App were setup, first sketches and rapid prototyping was done. These sketches helped to visualize and think out the strengths and weaknesses of each design, and how well they achieve the goals.
In order to prepare for the first round of testing, a paper prototype was prepared. Testing a paper prototype was useful for early-stage conceptualizing of the interactions.
Heuristic Evaluation
A Heuristic Evaluation was conducted on three users. Two in-person and one Online. All the feedback and flaws were compared and based off Nielsen’s heuristic. The severity ratings were between 0 and 4 (0 = minor violation, 4 = major violation) to each violation.
Access to the clickable paper prototype. Made with Adobe XD:
Top Findings
- Some important information and features were missing. Providing a Sign in to the existing users, back button, and some Call to Actions.
- Improve the input fields and use of more clear and plain language.
- Clearer actions and icons would improve the flow of the app.
- Some features like “Add Friends” were not very clear.
- Lacking of other actions or information in the main page.
Conclusions of the Heuristic Evaluation Test
Some important usability problems were found. Mostly because of the constraints of the paper prototype, but also the flow needed to be improved.
The following improvements would be included in the next stages of the process:
- Information in the main page: like “Plans for the week”
- Voting system for the restaurants.
- Include assistance to the events.
- Include more actions to add friends
Wireframes
At this stage of the project, the main features and interactions were tested. It was time to move forward to the digital and start wireframing and layout the app. All improvements mentioned earlier were included at this point.
Prototyping & Interaction Design
At this phase of the project a fully fleshed out interactive prototype with interaction-design was completed and ready for testing.
The prototype wasn’t fully functional due the limitations of the Prototyping tool. The goal was to get a navigational skeleton up there so the users could click around and get the feel of the application flow.
Access to the prototype:
Testing
At this stage of the project two tests were performed. The first one was a User Test and the second one was a A/B Test
User Testing
In this study, a clickable prototype of the new app called Foodies: Find your Perfect Restaurant was tested.
The App helps to search restaurants based on the profile of the dietary requirements of the users. The app ask a few questions: Add friends, budget and location, And match the dietary requirements with the restaurants in the located area.
Users were asked to perform tasks using an interactive prototype of the new app and provide feedback. While the users worked, they were observed and their actions, comments and performance were recorded by screen recording program.
Project Methodology
Four users were invited to test in person or remote through via Skype to participate in a usability study of the app Foodies: Find the perfect Restaurant.
During the test session, users were asked to perform several tasks including create an event, select a restaurant or add friends. Users’ errors, comments, and satisfaction ratings were observed and recorded during the study. Each test session lasted up to 30 minutes.
Testing environment
The system evaluation was conducted on a computer running Windows 10 for x64 based system, and viewed at a 1920 x 1080 pixel screen resolution using the Mozilla Firefox. The review was conducted using clickable prototype made with Adobe XD and recorded with Flashback Recorder Express.
Users Profile
An effort was made to recruit 4 users who fit the background. The participants were all in-between 24–40 years and working. They represent different market types and sizes, and Internet experience.
Top Findings
Main page needs more interaction/information
Some users have complained about the lack of action or useful information that can be found on the main page. Adding a nearby restaurants based on your dietary requirements, or favorites. It will make them return to the App and use it.
The work flow through the site is often unclear for some users.
Some issues about the discoverability and next steps during the “Create event” process.
Better wording and maybe separating into two new features could improve the understanding.
Add Friend interactions & flow should be reviewed.
Some users have struggled to add a friend. The flow was unclear and the lack of interactions didn’t help.
Some names & CTA should be reviewed
Most user had doubts or hesitation finding some information or go through
all the process. The system should clearly present the information and use vocabulary related.
Dietary Requirements could be more specific.
Some users have pointed it out what happen when they are omnivores or just don’t certain type of meat. These kind of scenarios have to be included.
Recommendations
- Improve the “Main Page” adding more valuable information like: Restaurants Nearby, Upcoming Events.
- Change the menu position to the bottom.
- Include the new feature: Invitations.
- Include the new feature: Find a Restaurant and Make a plan.
- Improve the flow for Adding a friend.
- Improve the wording of the CTA.
Access to the full Testing Report:
A/B Test
In this study, two clickable prototype of the new app called Foodies: Find your Perfect Restaurant were tested. The aim of this A/B experiment was to test what call to action has more conversion ratio.
One component of the prototype was identified and redesign. In this case the features “Create an event” was the selected one. In previous testing it was found difficult to understand. So an alternative “B” was proposed for testing: “Find a Restaurant”. The
Project Methodology
Four random testers were selected through UserTesting.com. Users performed the test remotely via UserTesting.com.
During the test session, users were asked to perform one tasks: Find a Restaurant. With two test different call to actions, users’ errors, comments, and satisfaction ratings were recorded during the study. Each test session lasted up to 12 minutes.
Testing environment
The system evaluation was conducted inside the platform UserTesting.com. The users recorded themselves through the platform and performed the task previously created. Also, they were asked to think a loud during the testing.
Users Profile
An effort was made to recruit four users who fit the background. The participants were all in-between 24–40 years and working. Two users were randomly assigned the A test, and the other the B test.
Prototype A
Prototype B
Top Findings
Top Findings — Test A
- Event button doesn’t trigger to “Find the perfect Restaurant” . Different actions were expected and not completed, or take more time to figure it out.
- Because the limitations of the prototype, some information wasn’t clear enough.
- More information at the main page would be helpful.
Top Findings — Test B
- “Find a restaurant” it works much better than”Event” button. The path is more clear and the user goes through without any struggle.
- Adding some reservations feature it will improve the user returning to the app.
- More detailed data it would be easier to navigate.
- Connecting the App to Google Calendar to remember the events.
Conclusion
Overall there was a huge difference between the test A and B. Just re-naming the option different, It made the user journey easier. And setup clearly the mind of the user about what is the app goal.
UI Design
The last stage of this project was grouping all the data collected and the prototype and design the User Interface.
This is the first stage of the UI Design, because is still being designed, but these are the first Hi-Fi Designs of the App.
Final UI & Interaction Design
Meanwhile the UI Design is under developing, the main feature has being implemented in a Hi-Fi Prototype.
