FoodFit

A weekly menu ordering process for athletes. Regardless of the goal the user is looking for, there is a specific menu for them. Based on the plate method, FoodFit offers a balanced and delicious experience.

Timeframe: 3 weeks sprint

Project Context

FoodFit is a health and fitness food company based in Barcelona. Through its website you can place fully customizable home orders. These are weekly menus for athletic people. Thanks to it’s ordering process you can create the dishes by adding the ingredients that you like the most.

FoodFit has had some difficulties integrating the ordering process so that the user is 100% involved in customizing their menu.

At this point, we should consider:

We were faced with designing an interface that gives the user the freedom to create their own dishes
Generating a feeling of cooking with the “raw” ingredients themselves
Create a clear, simple and easy process for the user. And generate an elegant, healthy, fresh and fitness environment

RESEARCH & FINDINGS

Investigate the culinary needs of sports users. Analyze the design to satisfy the needs of a discerning user in terms of their diet

We conducted research through our interviews and an in-depth analysis of information architecture validation to further focus the project on achieving our goal. A relevant analysis to achieve a satisfactory user-centric experience.

User Interviews

Our goal for user interviews was to understand user needs and pain points throughout the ordering process, and how users interact with the interface.

A few trends found after research from target audience:

Users lack the time necessary to cook and prefer delivery

Users are looking for a diet based on natural, unprocessed and healthy foods

In terms of their values and lifestyle, they are health-conscious, active and athletic users

Focusing more on the strategy for the website, as user needs we found:

Website need to allows users customize the menu of the week
It is essential that users can schedule orders for the coming weeks
The website should reports on the % nutritional content of the dishes

Sitemap

Following this research on the user and the needs that our website should cover, we develop the sitemap. This helps us structure and organize the website’s content.

We divide it into two main areas:

Primary Navigation

Home: Main page where the ordering process and the different types of menus are explained, and shows a user reviews section
Menu: The entire order process is developed in this section
About: Here, photos of the team are shown and, the history of the company’s origin and how it was founded is detailed
FAQ: The most frequently asked questions about Order, Dishes, Cooking and Shipping
Contact form
Account: The user profile where you can check order history and modify/cancel a current order

Secondary Navigation

Footer: Here are the social media links, the contact info and Privacy/Cookie Policy

Information Architecture Validation

To check whether the website structure exposed in the sitemap is appropriate, we carried out an Information Architecture Validation study with a heterogeneous group of users.

This study was ran on Treejack from Optimal Workshop.

The analysis consists of saw how users would naturally navigate through our interface.

The users were ask some questions and the path followed to reach the answer was analyzed. This way we understand which path is the most used and would therefore make the most sense to follow for most users.

The tasks chosen for the study were:

How far in advance do I need to place an order?
Does the restaurant deliver to my address?
Join the restaurant’s Facebook group
I need gluten free dishes. How can this be communicate?
Place an order for delivery
You have placed an order but need to modify it. How do you do it?
You need a mainly protein menu. Select it during ordering process
Learn more about FoodFit founders

We included this Age Demographic question. It’s not completely necessary but it’s nice to know what the ages were:

Overall results were 86% successful. So, out of all these people taking the survey, 86% answered questions correctly.

There’s 14% of people that somehow got stuck with one of these questions.

So which tasks were the problematic ones?

Questions 1 and 6 were less successful:

1. How far in advance do I need to place an order?

6. I have placed an order but need to modify it. How do I do it?

So let’s go through these two problematic questions one at a time.

1. How far if advance do I need to place an order?

6. I have placed an order but need to modify it. How do I do it?

Fail: 25% got it completely wrong.

So where did they click instead?

Fail: 40% got it completely wrong. Isn’t very good if half of your audience can’t find the information.

So where did they get hung up?

You can see that the Menu/Order section was one section where a lot of people headed fist and some of them got stuck here.

So what did we learn here? We should put a link in the Menu/Order section that refers to the FAQ section.

A lot of people went to Menu/Order and to Contact section, we realized that the problem might not be with our sitemap but with the way we asked this particular question.

We should have been less ambiguous and very precise.

DESIGN & IDEATION

Create a system to plan the purchase and delivery of weekly menus, fully customizable and nutritionally balanced. From “raw” to “haute cuisine”.

Thanks to the user trends extracted in the previous step, we can begin to outline our idea.

To do this, we will ask ourselves some questions regarding the user/client and the content/functionality of our website that must be resolved.

How we can provide an order customization system that communicates freshness and healthiness?
How to report on all menu items, including all necessary information?
How to provide and easy and quick payment service?

Sketch

The sketches will be the basis of our wireframes. It is the first step to start structuring the content of our website. They help us outline our ideas, organize principal screens and start giving them shape. With these sketches we try to respond to the user’s needs.

HOMEPAGE

Focus on building trust and convey the right mood and feel to our target audience.
Provide the necessary information to explain user the function of FoodFit, and how it can be beneficial. Explain what the steps are from ordering the menu to receiving it at home.
Create the necessary CTAs for the user to access the ordering process.
Show reviews from other users, recommendations and similar.

ORDERING PROCESS

The ordering process will consist of a few screens. Location screen, Menu items, Schedule, Ordering review, Log in/Create account, Payment, and finally one screen for Order confirmation.
Highlight the Menu Items screen, where the user can customize the menu to their liking. On this screen you can select the raw ingredients that you like the most and so FoodFit can prepare your dishes.

ADDITIONAL SCREENS

FAQ, Live Chat, About, Contact and Profile screens.
Live Chat: During the order process the user will be able to communicate directly with a member of the company to resolve all their doubts instantly.
Profile: Here the user can check their order history, change or modify an order in progress and check their personal data.

Wireframes

Through these sketches, we narrowed down on the main screens we wanted to highlight, and the key features that would be on each in order to meet our users’ pain points. With these priorities in mind, we started wireframing to bring these ideas to life.

One step closer to our final prototype.

Style Guide

We created a style guide to maintain a consistent look from the FoodFit website:

Black, white and green for Call To Action buttons and accents to convey health and sport.

Font: We are looking for an original font that in turn conveys confidence to the user. We used Raleway a sans-serif font that is a bit wider and make it easier to read & follow.

Icons: We used the same style of outline symbols throughout the page to make the website flow cohesively.

Illustrations: Instead of using real images we opted for illustrations. After carrying out several tests we saw that they were the most appropriate option for the mood & feel already implemented on our website.

Final Prototype

The process of placing an order begins by checking if the address is within the delivery area.
Screen where the user selects the goal they are looking to achieve with this diet, and answers basic questions such as if they are allergic or have any intolerance.
Here the user is totally free to choose the ingredients that will make up their menu.
Schedule screen to select the order delivery date and time. Highlight the slide bar where users can select the number of weeks they want to repeat menu.
Log in or Create an account screens if you’re new to FoodFit.
Payment screen.

TESTING AND ITERATIONS

Improving on user navigation within the app and accounting for all user paths. While increasing user satisfaction and decreasing user error.

Online Screenshot Testing

Thanks to this analysis we can increase user conversion, obtaining feedback on the designs before implementing or updating them.

First-click testing of screenshots and visual design ensures yor users get started on the right foot when they hit your website.

1. Our usability testing results clearly identified our critical areas to implement changes.

Users who contacted FoodFit did so through:

The contact form

Contact information provided in the footer.
And to our surprise, they also tried to contact us through social networks. This is an important option to take into account.

2. For the question of finding more information about restaurant’s founders and history, 15% hesitated and clicked on FAQ.

Thanks to these results we can improve the user experience with the interface. As we work with an agile methodology, user testing will be carried out again throughout the process to see what is the best structure and interface style for our target audience.