foody app

Go Back To All Projects
Multiple screens from the Foody app showing the final design.
Various screens showing the final design for the Foody app.

overview

Foody is a concept for a social networking-based app for finding restaurants serving healthy food. It takes the social engagement from apps like Instagram and Pinterest, and combines it with the utility of apps like Yelp and Google to help users find the best healthy food in their area.

The goal of the project was to do a deep dive on UX design methods, developing and validating an original idea and creating an intuitive prototype of the final design.

The project taught me valuable lessons about research and user-based design. It also sharpened my prototyping skills, giving me confidence to create complex interactions and animations in Figma.

If you have the Figma app on your mobile device or tablet, feel free to click on the prototype below to explore the final design. If not, I recommend viewing it on a desktop for the best experience.

The project taught me valuable lessons about research and user-based design. It also sharpened my prototyping skills, giving me confidence to create complex interactions and animations in Figma.

The text below is an outline of my design process. If you want to learn more, check out the article I wrote on Medium here:

Designing an original app: a case study

April 1, 2021

process

concept design

The initial idea for the app was to address a problem: I really enjoy going out to eat, but it's sometimes difficult to find healthy food options using platforms like Yelp or Google.

These apps tend to reward the most popular establishments, without any kind of rating geared towards health.

With this problem in mind, my goal was to create a new app that could reward healthier establishments with a rating system specifically targeting healthy food.

Sam sketching on an iPad while sitting at a desk.
Word cloud generated from responses to a user survey about healthy food.

research & validation

To move forward with my idea, I needed to know if others shared this same problem. Would anyone actually want to use an app like this?

I focused on three types of research to answer this question: user research, market research, and psychology.

User surveys were a good tool to gauge sufficient interest healthy food, but also helped me understand that things like price and how long it takes may be more important to some people.

I also learned that every person has a unique definition of what they consider to be healthy. This word cloud shows some of the survey responses I collected.

A chart from Google Trends showing a large increase in the search term "vegan food near me".

Google Trends backed up the data from my surveys, confirming that search terms like "vegan food near me” had exploded in popularity in the last five years, and were continuing to trend in a positive direction.

Finally, reading up on psychology had a huge impact on the vision for my concept. Hooked, How to Build Habit-Forming Products by Nir Eyal gave me a new perspective on how to engage my users, bringing a sharper focus to the social networking portions of the app.

A chart from Google Trends showing a large increase in the search term "vegan food near me".

design sprint

Bringing all my research together, I ran a design sprint to generate as many ideas as possible and move forward with a well-rounded concept that I could test.

With everything at my fingertips, I created a golden path that described how a user could get from a place where they had never heard of the app, to a place where they use it everyday.

The golden path created as part of the design process for the Foody App.
Early sketch of Foody App concept.

Adopting this as a roadmap, I used a handful of quick and iterative techniques to sketch out ideas for the app's layout and functionality. These exercises went quickly, and soon I had many sketches with variations of my concept.

It was easy to get carried away with all the possibilities at this stage, but I was able to bring focus to the most important features to decide on a path forward.

Considering my design from every perspective, I chose the option I was most confident with and moved it into Figma to create wireframes for the first draft of my prototype.

Screenshot from Figma showing prototype interactions.

user tests

The only way to really understand if my concept worked was to do user testing.

I prompted users to test the core functions of the app, and was able to confirm the overall usability of my design. I also got some important feedback to improve future iterations.

Much of the feedback included small fixes like adjusting nomenclature for page titles and including back buttons on every page, but there were a few things that needed more attention:

  • Users were confused about the difference between user posts and restaurant reviews.
  • Users wanted expanded search functionality with more advanced filters to find exactly what they were looking for.
  • Users were less confident in their actions when UI animations didn't confirm what they were doing.

final design

With feedback in hand, I began to incorporate the changes while starting the long process of replacing my wireframes with real content.

Coming from a strong design background, much of the visual character came pretty naturally as I moved along. Aside from sourcing content, I spent most of my time dialing in the animations.

One struggle during this phase was that the large number of images I was using began to impact the performance of my prototype. To counteract this, I learned a bit about optimizing in Figma and was able to make everything work in the end.

GIF showing animation of someone searching for salad on the Foody app.
Example of the home feed on the Foody App.

When opening the app, users are first greeted with their home feed. This is where they get all the latest content from the people they follow. I built a robust filter into the search bar based on user feedback, which allows them to easily target something specific.

Paging over to the map, users can see a wider range of results paired with location information. Here, different categories of give users the option to view whatever is most relevant to them.

GIF showing animations programmed into the search screen on the Foody app.
GIF showing an example of a restaurant page on the Foody app.

The restaurant page displays top user posts as well as a full menu, directions, and a dedicated section for user reviews.

Because my user survey revealed that time plays a big role in their decision to eat somewhere, I've made it easy to route to the restaurant, make a reservation, or order delivery straight from the app.

After eating, users can post a photo of their meal, which will show up in their followers’ feeds and be stored in their profile. This helps keep them engaged with the app and makes them more likely to use it on a regular basis.

GIF showing an example of a user's profile on the Foody app.

outcome

I was happy to validate my initial idea, but even happier to learn new things throughout the process. Some of the biggest lessons I learned were:

  • Simplicity is key. Too many features can bog down a good idea.
  • People don’t always think the same way you do. Do thorough research and use your user's language.
  • Tools have their limitations, and it's important to know what they are before you start working with them.

More than anything, this project helped refine my overall design process, and will shape the way I approach future projects. I'm looking forward to applying what I learned here in the XR space, so I can engage people with more usable and intuitive designs.

Three screens of the Foody app displaying the final design.