Foodie ATX
Find the best food in Austin.
Programs used
Figma, Protopie
Timeline
Summer 2023
Role
Designer, Researcher, Prototyper
With so many people moving to Austin every year, there’s been a huge rise in food-related influencers on social media that tour the city and show lots of great and new food options.
On social media you can save posts - but not restaurant information. Many posts also contain lots of restaurants. Saving these posts is frustrating and can only go into a folder and often get lost along with many of other posts that get saved.
Create a food app with the key feature being the favorites feature. This feature allows users to easily create lists within their favorites to keep things organized. Users can add notes, share lists, and invite friends to collaborate.
Have a list of curated/trending dining options based on location. Include a section to highlight local chefs which include a profile, as well as the restaurants they are affiliated with in Austin.
Competitive Analysis
I analyzed 3 popular sites/apps in the food space.
Survey
I conducted survey on LinkedIn to see if this would be of interest.
User Personas
I created two personas based on the two key user groups.
Flow Diagram
To outline all the necessary functionality, I created a flow diagram of one of the main tasks a user can complete. Below is the flow for a user finding, saving, and getting directions for a restaurant near them.
Once the flow diagram was established, I started creating the low fidelity wireframes.
These wireframes are from my original design which included an ordering feature. This evolved after conducting user research to focus primarily on the favorite feature.
High-Fidelity Design
Color Palette
The use of images led me to decide to keep the color palette relatively simple.
8pt Grid System
I chose the 8pt grid system because this helps to create visual stability and order, making it easier for users to understand the layout and navigate the design.
Carousels vs Accordions
I explored accordion menus but given that images are paramount when it comes to food, I decided to use carousels for the home page.
Typeface
I chose DM Sans to promote legibility, communicate tone, and sentiment of the brand.
Home Screen
I focused on a minimal home screen with lots of carousels to help cut down on clutter and keep the design simple while utilizing plenty of whitespace.
List Screen
I added a carousel for the images on the Near You page so that users could view additional images without having to leave this page.
Chefs
Having a section for information on chefs is what helps differentiate Foodie ATX from other apps that only display restaurants or articles.
Favorites Feature
The favorites feature was added after conducting user research. This quickly became the cornerstone feature of Foodie ATX. I expanded further when I decided to allow users to create lists within their favorites. Users can then share their lists and also add collaborators to lists. This is also meant to help organically grow users.
I learned so much about the dev process when building this feature. In working with developers, I gained knowledge about the intricacies of this process as well as the importance of deep linking.
I first used a bookmark icon but decided on a heart because that evokes more of an emotion than a bookmark. Although users can create lists on their favorites page, I decided to add a shortcut to that process as well.
Although I chose carousels for the home screen, accordion menus made more sense for the favorites page. If users don't immediately add something to a folder, it appears in the upper section. Users can long-press one of those unlisted restaurants to drag-and-drop it into a current list if they choose not to create a new one.
