Foodie Friends
A mobile-first restaurant review site that provides a social quiz to match similar users to each other and suggest restaurants that match your user profile.
My Role:
Research, personas, sitemapping, user flows, task flows, sketching, wireframing, visual design, prototyping, user testing
Duration:
January 2023 - May 2023
Project Background
Moving to a new location can be exciting and stressful. When you move you are leaving behind all of your favorite spots where you feel comfortable and have built a community.
The Why
Identify user pain points and requirements to enhance the experience of relocating to a new area and acquainting oneself with the new community.
Project Goal
Discovering
A competitive analysis was conducted to gain an understanding of what is currently available and any gaps that may exist.
I examined the following companies since they also work to help individuals get to know their communities: Yelp, Foursquare: City Guide, Nextdoor, and The Nudge
Competitive Analysis
Insights Gained
Competitors rely on posts and reviews from real users.
Competitors provide a search function so that users can look up specific information.
Sponsored search results appear first one feed, but may not match users needs.
Personalized suggestions are not common practice.
Interviews were conducted to obtain qualitative data about the target user’s experiences, pain points, and needs.
Participants who had moved within the past years were recruited.
Interviews
3 females and 2 males between the ages of 25 and 35 were interviewed.
Following the completion of interviews, affinity mapping was used to identify and understand the patterns and relationships observed across participants.
Affinity Mapping
After moving participants were most interested in locating:
Basic necessities such as grocery stores and public transportation
Restaurants, coffee, shops, and other recreational spaces.
After moving participants struggled the most with:
Finding authentic business reviews
Accessing up-to-date business information
Feeling like an outsider
Insights Gained
Defining
How might we make discovering restaurant recommendations feel as natural as receiving suggestions from friends for someone new to a city, who lacks an established support system?
Based on the findings of my user research, I was able to define the following problem:
With a clearly defined problem in mind, personas were created to better understand the target user and to ground later design decisions.
Personas
Who is Foodie Friends For?
For individuals who are new to a city or neighborhood and prefer to get recommendations from friends.
What Will Foodie Friends Accomplish?
This tool connects them with others in their community who have similar likes/dislikes and preferences.
How Will Foodie Friends Accomplish This?
A survey at account set up uncovers user restaurant preferences then suggests similar users for them to follow for restaurant suggestions/reviews in their city.
Sitemap
The sitemap for Foodie Friends was designed in a flat layout. I did this because a flat sitemap allows for a clear and concise structure, making it easier for both users and search engines to navigate and understand a website's layout.
User Flows and Task flows were created to identify potential pain points and improve user experience. By mapping out user flows and task flows, I was able to better understand how users would interact with my product.
These flows focus on how users will connect with “friends” and save recommend restaurant while using the Foodie Friends site.
User Flow and Task Flows
Designing
I began by sketching low fidelity wireframes to explore what design patterns might be useful in the design of this product.
After, establishing the layout of my product I moved my designs to medium fidelity wireframes to establish a more accurate depiction of my product.
Initial Wireframing
Medium Fidelity Wireframes:
The color palette was selected to exude happiness and friendliness in-line with the values Foodie Friends is striving to exhibit.
The logo is based on the welcoming environment of the tool. The logo plays with the alliterative name “Foodie Friends” by incorporating the double “F” forms. The heart is featured in this design to further display a fun, welcoming attitude.
Brand Identity
Once the visual design elements were established, I created high fidelity wireframes. High fidelity wireframes were created so that I could obtain an accurate overview of the design, making it possible to test user interactions and make necessary adjustments to the visual design and the usability of the site.
High-fidelity Wireframing
Testing
5 participants were recruited to complete usability testing for the high fidelity Figma prototype of Foodie Friends. During in-person testing, participants were asked about the visual design of the site and then asked to complete 2 tasks.
Task 1: Complete the Foodie Friends quiz and follow 1 reviewer with similar preferences to you.
Task 2: View personalized restaurant recommendations and save 1 recommendation to view later.
Usability Testing
3 females and 2 males between the ages of 25-35 participated in usability testing.
Success Metrics:
Task completion
Error rate
Time on task
Satisfaction
Insights Gained:
Users felt the site was well organized and easy to follow.
Users appreciated the pairing of text and photographs through the design.
Users frequently experienced friction when returning to quiz results after viewing a profile.
Users expressed interest in knowing what they had in common with recommended reviewers.
Users were unsure what to select if no option applied while taking the quiz.
Users were not confident if they had saved a review correctly.
Feedback from usability testing was used to iterate on designs in order to increase user experience for the future.
Iterations
Back button added to profile pages so that users could quickly navigate back to their recommended friends after viewing a specific profile.
“None” options were added to “Dietary Needs” and “Features” quiz screens for users that did not have unique needs in order to clear up confusion on these screens.
Similarity tags were added to recommended friends profiles so that users could see what they have in common and decide who to follow.
Save icon was changed from a heart to make the action more recognizable.
Changes I Made:
Final Thoughts
The journey of exploring sitemapping through project completion has been both enlightening and rewarding. It has deepened my appreciation for this crucial aspect of web design and development. Sitemapping is not just a technical step but a strategic tool that fosters effective communication, user-centric design, and project success. I will carry the lessons learned from this experience forward in my future web development endeavors, knowing that a well-structured sitemap is the foundation upon which great websites are built.
Reflection
Practice and develop my sitemapping skills through mapping existing sites and applying my learning to new projects
Test iterations made for usability
Explore and develop further social features for Foodie Friends (badges, messaging, meet ups)