US Foods Redesign | Ally Choo Portfolio

In this project, we were assigned a company (US Foods) whose website we would redesign as a group. After we researched and discussed what would go into the website, we individually made low, mid, and high fidelity wireframes along with style sheets.

The Project

Client Overview

US Foods is a food service distributor and restaurant supplier. It was founded in 1989, serves over 300,000 customers, and is one of America’s biggest food distributors. They are a holding company with many in-house brands, 28,000 employees, and more than 70 locations.

Site Analysis

One of the website's most prevalent issues was that there were too many tabs causing it to be very hard to find information. We also concluded that the website needed a more appealing landing page as the original had a vertical carousel with confusing facts, and it did not work properly. The pictures on the pages were sometimes repeated and the lack of consistency made it hard to backtrack or find information.

Competitor Site Analysis

One of US Food's main competitors is Sysco. While Sysco has fewer services than US foods, it is still the larger of the two companies. Their website has a very clear journey with well-organized tabs and is designed with the user in mind. It was very professional with bright pictures and strong consistent branding.

Recommendations

Have fewer subtabs
Tabs should be based on what customers are looking for
Have more hovering actions for extra information
Clearly state what US Foods is
Introduce the company to new and potential clients
Have a section that shows what all your services are
Have sections that divide services by whom they serve
Put all the extra information that the general customer wouldn’t use in the footer

Low Fidelity Wireframe

Creating low-fidelity wireframes was the first individual part of the assignment. This is where we mapped out how we planned to implement our designs in Figma. These were made with the thought that these are rough drafts and were not for anyone else to see.

Mid Fidelity Wireframe

Our mid-fidelity wireframes were made to be presented and explained in front of the rest of our class. The goal was to be able to describe this to our team/client as the final layout of the design. This is where we refined our design by creating them in Figma and ensuring that all of our spacing was correct. These were also edited by other members of our team.

High Fidelity Wireframe

This is the wireframe that we made into prototypes and were part of our final presentations. This part of the project included us presenting our website as if it were real and convincing the class why it would be a good redesign for the website. Our other team members became our competitors and we had to argue why our redesign was the best.