Dining (Over)hall

How do you design a resposive website serving over 400 locations?

Challenge

The client was looking to improve the overall customer experience and expand the usage of their platform. Every campus using their system, had many locations and options people could choose from. In its current state, it was difficult to both find a specific location, as well as explore multiple options.

The new solution needed to work with their exisiting backend management systems that controlled real-time delivery of perishable items, purchasing online and in person, and integration of other tracking systems.

Process

Because my team was working not just with our client, but also other vendors, time became the driving force in our management of the project. I worked directly with the business owners to understand their needs and ensure the new product would support their business goals. At the same time, I collected and analyzed the current customers’ journeys, using them to help find where we could improve the user flow and offer improved services.

Sketches
Sketching ideas with the business team

Addressing pain points

My first priority was to design a flexible system to serve the campus businesses, which also helped their customers find what they were looking for. After that, I dove into the purchase flows to make sure that customers could complete their purchases with the least friction possible.

Forms
Revised forms

Tactical changes

I focused on refining and simplifying the design, creating less complex forms, card-based information grouping, and a lightweight, approachable personality.

I worked with the customer’s product owner to review and revise the copy. I rewrote copy for clarity and give it a more human voice. I consulted with them on how to go about evaluating future copy.

Cards
Finding ways to display informaion

Results

We created templates that each location could customize with images and data. Customers have been positive in their feedback, noting improvement in finding locations and making purchases.

Before and after
Previous design (left), new design (right)
Resposive layouts
Forms are fully responsive
Resposive layouts
Card designs adapt to all screen sizes

Having served as a consultant on this project, I’m not able to collect ongoing data. We have received positive reviews as our client rolls out the new design to their customers, including:

“Hope you are proud of your team’s work as much as I am. We have been getting great reviews from the field.”

Follow up from the client