Well on the Way responsive website design

Well on the Way is a Food Truck that offers healthy food options that fall within a few popular diet types. Their customers are people that want convenient healthy food options on the go. After building the designated mobile app, I created a corresponding responsive website design in Adobe XD.

FINAL PROTOTYPE

Well on the Way responsive website design for desktop

The problem:

Food trucks are convenient, but typically don’t provide healthy options, and don’t allow for pre-ordering.

The goal:

I wanted to create a website that would allow users to quickly find the current location of the truck and place an order. It would also allow them to pre-order for a future day/time.

My Contributions - Brand, UX/Web Designer

Brand ideation, User research, paper and digital wireframes, low-fidelity and high-fidelity mockups, prototypes, usability studies, design iteration and responsive web design

User Research

Survey

We asked a select group of users who order food out a few times a month, what might be useful when ordering on-the-go. We asked people school-aged to retirees and busy parents. We found there to be a hole in the market for food trucks that have offer healthy food options, that you can order on-the-go. So we then conducted a competitive audit of other companies, with storefronts, that offer healthy food options, and also some companies that have food trucks that you can order from. After this research we found that a food truck that serves healthy food that can be pre-ordered would be our value proposition.

Convenience

Quickly locating a place to get food on-the-go.

Healthy Options

Finding FAST but ALSO healthy food options that are convenient.

Nutrition Info

Most health-conscious people want to view nutritional information of the food they eat and at the very least they want to know the ingredients and to be able to modify them.

Pre-ordering

Users know making fresh food isn’t always fast, so they wanted away to pre-order food for pickup.

User Persona

User Journey Map

Sitemap, ideation, wireframing and low-fi prototypes

Sitemap

The goal here was to make strategic information architecture decisions that make things simple and easy when placing an online order. The challenge was trying to direct users to follow the most simple path to order, but also provide the options on the home page that would allow them to access other parts of the page, like just viewing the menu.

Because Well on the Way customers would like to order online use a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive

Paper wireframes for Desktop and Mobile screen sizes

Easy access to buttons that would locate the food truck and allow you to view the menu were important. We also wanted to include information about the rewards program and ‘below the fold’ information about the diets.

After getting feedback on my first prototype, I wanted to prioritize some of the button locations and remove some of the buttons that were confusing users. We wanted the user to be able to quickly identify the fastest way to place an order both on the website and mobile app.

I connected all the screens and overlays allowing users to ‘login’ and edit menus. After getting feedback from users I decided to take away the interactions from all the buttons and only allow them to select one menu item so the main flow was the sole focus of the study.

View Low-fi Prototype

Usability Studies, iterations and mock-ups

Usability study findings

Findings from 5 users testing the website in an unmoderated study.

Where to begin?

First inclination was confusion about which button to click on the homepage to begin an order.

Terminology

Inconsistent terminology, needed to choose “cart” or “bag”.

Feature differentiation

A little confusion about the difference between “sort” and “filter”. Need to make a clearer distinction.

Interating on the designs after the study.

Hierarchy of initial homepage mock-up was confusing. There were multiple buttons with equal emphasis that allowed you to enter the flow. We decided to replace those with a main hero image and add a bar that would call attention to the current location of the truck. This gave clearer direction to enter the flow from there, or from the top button in the navigation.

Initially I had an overlay that would allow you to filter the menu items by diet type, but I decide to make them checkboxes instead, and have the ‘sort’ be a pop-up that would allow you to sort the menu options. The filter and sort features can be used in conjunction with one another.

Finalizing designs and prototype for multiple screen sizes

After finalizing the layout site structure and navigation, I fleshed out the mock-ups for the remaining pages for the desktop screen size.

I included the mockup for a mobile device. Because users will likely order while on the go, I felt it was important to optimize the browsing experience for a mobile screen so users have the smoothest experience possible.

My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study.

hi-fi prototype

Accessibility considerations

Hierarchy - I used headings withdifferent sized text forclear visual hierarchy.
Colors using WCAG - I used colors with enough contrast using WCAG standards.
Icon labels - I included labels on mostbuttons and icons.