Fooda menu pages

The redesign of Fooda's web app

Process

My role

Co-design lead

About this project

Customers use the Fooda web app to see daily restaurant menus and order lunch. The other lead designer and I teamed up to redesign the existing Fooda app and improve the ordering experience for customers.

The design process

We reimagined how users would view Fooda online menus, customize their orders, and purchase their food. We simplified the ordering process by reducing the amount of clicks it took to order lunch. The new user flow we created went like this: see all restaurant options for that day, pick a restaurant, pick a meal, customize the meal, and place the order. We prioritized hi-res photos over mundane descriptions. Menus were organized in a grid view with each meal pictured in a card format. The card included a photo of the item, name, price, and dietary restriction tag (if applicable). This made browsing quicker, easier, and more intuitive for users.

Photos

When we began this project, photos on menus were sparse. We had to convince higher-ups that the menus needed more photos. There wasn’t much room in the budget so for the next few months, I did my normal job plus became a pseudo pro photographer. We ordered a used lighting kit and I plated/snapped photos of hundreds of dishes. Orders skyrocketed and the execs saw the impact the photos were having on the business. They eventually made room in the budget and hired a professional photographer. Once I stepped down from my former photographer role, I wrote UX guidelines to streamline the process for adding future photos to the menu.

The results

The first redesign of the menu pages launched in the fall of 2014, followed by many UX and UI updates throughout the next year and a half. The redesign improved Fooda’s UX tenfold through the use of high quality photos and an intuitive card format, which allowed customers to browse and view various lunch options simultaneously.

Results

Restaurant menu page

Menu item card view

← Previous project