An app to connect users to restaurants that share social values.
This app connects users to restaurants which share similar social values and helps promote user understanding of new social issues.
Role: UX/UI designer on a team with Ashley Carroll, Kelly Chin, Cynthia Jelke, and Ethan Sykes
Timeline: 3 weeks.
Context: Coursework
Motivation: Users need a place to connect to business and people who share similar values, while remaining open to learning about new social issues.
Our team researched potential users and their goals (social issues they care about), generated two concepts, created moodboards, drew wireframes, created low-fidelity wireframes, then designed high-fidelity wireframes.
Tools: Figma, Adobe Photoshop, Adobe Illustrator
OUr users
The activist.
Is a person who likes to spend their money in socially responsible ways and patron businesses that share their values.
the socal butterfly.
Is a social person who likes to eat out with friends and go to local events.
the traveler.
Is a person who loves to explore new areas and embrace the local culture.
Their needs
Practicality.
The product must function as a bridge between a social networking app and a restaurant discovery & reservation app.
Informative.
The product must inform the user about social issues the restaurant supports as well as providing the user with accurate source material on the respective social issue while not having too obvious of an agenda.
familiarity.
The product must be able to be immediately mastered by the user. The design should be intuitive and mimic similar apps the target users would use on a daily or weekly basis.
Our solution.
An app where users can find restaurants that align to their individual values, reserve a table, and find out about social events at said restaurants. Through this app, users can connect with new and old friends who share similar values.
core functionality.
Social.
Ability to connect with friends and see their attended events.
Reserve.
Reserve tables at the user’s favorite restaurant.
Learn.
Users can learn more about social issues important to them.
Recommendations.
Users are presented with restaurants based on preferred social issues.
REview.
Users can view blogs and see restaurant ratings.
profile.
Users have a profile where their preferences influence the restaurants presented to them.
two concepts.
We divided our team into two groups to explore different possible concepts to decide which one we thought would best meet our goals.
Allows users to align themselves with others, and then align themselves with their social values.
Allows the individual user to explore their preferences and restaurants alone.
Concept 1: individualistic.
Users own views of activism and virtues
User can learn about different social issues
User can search and explore their alignment to different social issues without influence from others
User can search and explore their alignment to different social issues without influence from others
This concept takes an individualistic approach to social justice. In this concept, users are siloed into their own world of activism and virtues. Users can search and explore their alignment to different social issues without influence from others. They can see how different nearby businesses cater to the causes that they care about, have the app pick a place to eat, learn about different social issues that drive this app, and customize their preferences. In this concept, a user explores these social issues on their own and in their own time. In contrast, the other concept allows users to explore different restaurants based on the activities and preferences of others.
-
Home screen.
The home screen is the default screen that the user sees. It is the main exploratory and restaurant discovery functionality of the interface.
On this screen, users can search for nearby restaurants, see more restaurants that are closer aligned to different social issues that the user cares about, and see lists of restaurants that are aligned with different values.
-
Random spinner.
This screen solves the problem of what a user should eat without having to complete extensive research about where the user is spending their money. Users can input their preferences for different cuisines and which social issues are particularly important to them and then spin the wheel for the app to pick a restaurant based on those criteria.
Users select their cuisine that they are feeling at the time and then the most relevant social issues that they want to support. Then, the spinner wheel populates based on the radius the user selects and the restaurants that meet their criteria. The user can spin the wheel and then the app will choose a restaurant and recommend it to the user.
-
Learning.
This screen allows users to learn about social issues at their own pace and in a neutral way. It shows them articles, videos, and explanations for why an app like this matters.
-
User profile.
This screen is the profile page for the user where various personal preferences and action histories can be viewed.
What you support:
This section is where the user can view and update the social causes they support.
Past Reservations:
These widgits show past reservations the user has made and allows them to quickly reserve again.
Concept 2: Community-Based.
Users to align themselves with others
User can RSVP to local social events to support their social issue preferences
User can explore businesses recommended by friends
User explores shared talking points for all users regardless of social issue preferences
This concept takes an community-based approach to social justice. In this concept, users are constantly connected with others who share similar ideas and ways of thinking. There are social pressures that help shape how you act and you are more connected with others as you make decisions. The app reinforces the idea that community is the key to social justice.
-
Home screen.
This home screen includes a search bar that allows users to manually search for local events or businesses. There are three tabs that enable users to explore what is trending, recommendations from friends, and nearby events catered for the user. The “Trending” tab lists events that are popular in the area and allow users to filter by different values they seek in a business.
-
User profile.
This screen gives a general overview of the user’s interests and recent activity within the app.
-
Blog.
This screen uses similar design interaction tactics as Snapchat News, Prime video, and Netflix. The highlighted post changes every day and is consistent for all users. This creates a shared daily talking point for all users regardless of their individual demographic.
-
Discover events.
On this screen, users will be able to access and explore different events at local restaurants. Events that the user pins will be located at the top of the interface, while recommended events are found below. Users can click on the event to find out more information. An “interest” button is available so the user can follow the updates of the event without committing an RSVP. A share button is also available so users can invite friends and family.
-
Friends.
Given that an important aspect of this concept is discovery through social engagement, this Friends screen features a recommendation from a friend, a series of suggested friends (with details about mutual friends and percentage match in values that the user places importance on), and where the user’s friends have recently checked in.
COmbining conepts.
We chose to combine the two concepts (individual and community based) to create the best app possible which leverages the best parts of each concept.
Reservation Functions
Past Reservations
Favorite Restaurants List
Where to Eat Spinner
Learn
Events
Blogs
Friends
Our combined design is driven by a social engagement, community-based approach, and social media aspects.
Most information displayed to the user is driven through recommendations, friends, and other user-driven data.
Moodboard 1: modern and clean.
Moodboard 2: Fun and playful
COmbining moodboards.
After careful deliberation, we chose to pursue a hybrid approach between “Playful and Welcoming” and “Modern and Clean” as the basis for our interface’s visual design. We liked that the complicated topics were easily digestible but still allowed users to navigate the app with clarity and certainty. We wanted our interface to encourage a sense of social thoughtfulness and reflection upon these essential ideas while still having a welcoming, modern, and intuitive feel. Our color palette, which revolves around a bright blue, purple, pink, and teal, was selected from the “Playful and Welcoming” mood board because we felt the bright colors help capture the exciting aspects of social activism and the causal nature of social engagement. Additionally, we used rounded edges and drop-shadows to achieve a light-hearted feel. For our information hierarchy, we drew heavy inspiration from the “Modern and Clean” mood board and utilized cards with adequate white space for legibility, as we wanted users, both novices and those returning, to navigate the interface without feeling overwhelmed easily. With this hybrid approach in mind, we strove to balance modern simplicity with pops of color to create an intuitive yet delightful experience.
Final mockups.
We chose to design our app as approachable yet robust. It was vital that the user could control their experience discovery such that they were in control. By creating an application in which users can quickly, precisely, and efficiently connect with other like-minded individuals based on their most important social issues, we have created an application that disrupts the established ways that users locate and experience restaurants and other services. By creating an app with this type of functionality, we have made it possible like never before for users to vote with their wallets, promoting accountability and better business practices for all. Our design was driven by the increasing need for better social media platforms. Social media has been ridiculed for poor ethical practices, so So.Good intends to be the outlier that behaves differently. We allow the user to truly create the algorithm by declaring their preferences to guide how restaurants and experiences are shown and displayed. Users can connect with friends to find and experience life with the best business that best meets their social issue needs.
Moreover, our app’s concept is driven by a social engagement, community-based approach, and this social media aspect has been woven into the core of the app. Nearly all information displayed to the user is driven through recommendations, friends, and other user-driven data. Furthermore, the design of the app is curated specifically for ease of use. In a time when the world is more complicated than ever, and social issues are at the forefront of people’s minds, it was pivotal that our app reflects the opposite. We chose to use simplified navigation, with only four main pages. We chose a navigation bar to be consistent with So.Good’s sister application, Yelp. Our feed is streamlined, and the tone is approachable. We encourage exploration and learning, which was further reflected in our simplified yet fun color scheme.
loading screen.
This is the screen that users will see when they launch the app. The So.Good logo is located here.
Create account.
This is the screen that users will see when they first launch the app after clicking get started. They can either set up a new account or log in to an existing account.
preferences.
New users can indicate which social issues they care the most about on this screen. They can indicate to the app which social issues matter and to what extent. Furthermore, if a user deems the social issue to be critically important, they can ‘love’ the social issue, and then the app will prioritize showing only restaurants and experiences that in some way cater to that social issue.
Home screen.
The home screen is a compact view of most of the app’s functionality. Users are able to search for different restaurants and experiences, change search parameters, and view different local businesses and experiences. Since this app is driven by social engagement, users can see what their friends recommend, events that are trending with their friends, and blog posts related to social issues that they care about from verified reviewers and bloggers.
profile menu.
The profile menu is a dashboard screen that allows users to access less important app functionality. Users can access their profile, search for app functionality, or look at a variety of other sections of the app from here.
your user profile.
This is an example of how a profile page would look like. Here the user can make edits to their page, look at their followers and previous reviews.
verified/followed user profile.
This is an example user profile that shows a verified reviewer. Users can learn a little bit about this other app user, send them a message, and browse content that they have published. There are featured sections such as their bio, their social issues, and their review histories. This screen can be accessed by clicking on the user’s profile, such as through the Friends screen.
event discovery page.
This page allows users to discover different events in their area. They are able to search for a restaurant or event in the search bar or explore other events that might be pertinent to them.
event description.
This is a sample event description for an upcoming event on the app. Users can learn about the event such as the name, location, and admission fee. Similarly, users can indicate their interest and learn more about the event.
friends screen.
This page allows users to connect with other app users to help them see events and restaurants that pertain to social issues that matter to users. This page allows for easy friend discovery based on a user’s network as well as see restaurants that their users find interesting and applicable.
learn.
This page allows users to learn and educate themselves on social issues with custom-written articles and blog posts by So.Good. These posts will allow users to educate themselves on why an app that helps users select the places that they spend their money based on that establishment’s alignment with their personal values matters.
Past reservations.
This page allows users to view their past reservations. Information such as date, time, party size, and friends that joined the reservation is available to the user. The user will be able to favorite a restaurant from this page if they enjoyed their experience and would like to return to the particular restaurant. The user will also have the option to reserve a table at this restaurant again if they would like to.
restaurant profile.
This is an example of a restaurant profile. A restaurant can also be favorited from this screen. Users can access important information such as the type of food served, the yelp review score, price range, how far away it is from the user’s current location, the address, and hours. The user has the option of reserving a table or calling the restaurant from this page as well. More information about the restaurant is available on this page as well. These include the social issues associated with the restaurant, friends who checked in there, photos, and the menu.
blog.
This screen uses similar design interaction tactics as Snapchat News, Prime Video, and Netflix. The highlighted post changes every day and is consistent for all users. This creates a shared daily talking point for all users regardless of their individual demographic. The blog post can be filtered by trending, newest, and recommend blogs personalized for the user.
spinner and spinner selection.
This screen solves the problem of what a user should eat without having to complete extensive research. Users can input their preferences for different cuisines and which social issues are particularly important to them as well as the distance they are willing to travel and then spin the wheel for the app to pick a restaurant based on those criteria. Once the wheel determines the user's cuisine future, information such as the restaurant's title, cuisine type, distance away, review score, and social issues. The user will have the option to reserve a table at the chosen restaurant or to spin again.
