twitter facebook linkedin youtube-play instagram chevron-left chevron-right
How We Made The Vollrath Foodservice Website, Part 02: UX & Design
Website Development

How We Made The Vollrath Foodservice Website, Part 02: UX & Design

In Part 01 of this blog series, we unpacked the first (and most valuable) part of our website redesign for Vollrath Foodservice: the extensive Discovery Phase. It’s what allowed us to better understand and validate the key personas, goals, and website requirements needed, and led to a collection of substantial (and research-validated) recommendations. 

With Step 01 complete, it was time to move on to Step 02 in our process: designing the darn thing, from color and typeface to overall user experience.


User Experience, or UX. In our opinion, it’s the most important part of designing any digital experience. (Editor’s note: If your current agency web partner isn’t talking about UX in regard to your web properties, find a new agency web partner.)

All that persona research we did in Step 01? All those journey maps we created? We didn’t just do them to do them. They inform the user experience, and allow us to create the best, most appropriate web experience for the audience in question.

Ignore UX and your website might look good, but for the end user it’ll feel like an escape room with no clues on how to get out. Bad UX leads to people leaving your site sooner and not returning in the future.



As we mentioned in Part 01, we created a document that listed all of the goals and KPIs for this website and used it as our guiding light during every step of the discovery process. As we moved forward into UX and design, that list of goals and KPIs continued to play a crucial role in our work. Every design and UX decision we made was made with those goals and KPIs in mind.


Organizing a 10,000+ product inventory
One of the first challenges our team targeted was how to present Vollrath’s more than 10,000 products and parts in an organized, easy-to-navigate way. To solve this problem, our User Experience (UX) team took inspiration from the biological classification system (minus “Kingdom”) — Phylum, Class, Order, Family, Genus, Species. This classification system not only provided a clearer roadmap through the robust Products section, but also gave the Vollrath team a logical way to structure the more than 10,000 products contained within their Product Information Management system. (It’s also become the new standard for how they talk about products internally.)

website wireframes for Vollrath Foodservice website

Building a blueprint
Similarly, our team needed to figure out how to best structure this bigger, better Vollrath Foodservice website. With supporting contributions from the SEO and content team, our UX experts constructed a set of wireframes (pictured above) featuring multiple navigation options enabling users to more easily find the content they need.

Designing to give the client more control
At CI Design, our website design is a two-step process. Though we build for the bigger picture, we’re ultimately designing each page as a series of modular components.

Once upon a time in web design, people thought CMS systems on their own were the holy grail. Problem was, you were still somewhat handcuffed by their templates. As a marketer, if you couldn’t hack something into a template, you weren’t able to easily adjust your site to grow and change with your business needs.

Our modular design philosophy eliminates this problem and allows us to give our clients more control over their web property, enabling them to add, remove, and edit sections without having to consult their web development partners or compromise the visual integrity of the website itself. This future-proofing approach also leads to better website ROI.

(You're welcome, marketers.)

Employing an “inspiration/information” philosophy
As a company, Vollrath wanted their new website to play two crucial roles in their customers’ lives: Be a resource for product information, and provide end-users with an endless source of inspiration. To accomplish this, CI Design identified which pages within the website should play which role and structured each page’s content and functionality accordingly.

Putting existing resources to work
Building a brand new web experience doesn’t always mean ignoring the valuable resources already in place. CID evaluated the existing Vollrath Foodservice website—writing, photography, videos, and more—in order to identify which pieces could be reused or repurposed, which needed some revision, and which ones needed replacing.


We said it before, we’ll say it again: strong, frequent communication was key for the success of this project. Much like our extensive discovery process, every decision throughout this design phase involved frequent communication with the Vollrath team. Their deeper understanding of the inner workings of all things Vollrath allowed us to refine our design recommendations into solutions that truly improved their experience.


A true digital transformation, from front to back. The bigger, better, optimized-for-mobile boasts a contemporary look and feel, provides critical information and valuable inspiration to all five key end-user personas, and showcases Vollrath Foodservice’s massive product catalog in a logical, easy-to-navigate way. 

Of course, no great website is ever truly complete. With this first iteration out in the wild, the Vollrath and CI Design teams have begun collaborating on additional features that will enhance the user experience in future iterations of the website. 

Up next: In Part 03, we’ll look at some of the digital integrations we implemented to help put this digital transformation over the top and create a web experience that can remain relevant and competitive for years to come.

Discover what the UX & web design experts at CI Design can do for your website. Ask for Brent!

Milan Zori

Milan Zori

Marketing & Content Strategist

Milan Zori is one-half of the content portion of our award-winning digital marketing team. He loves writing everything but his own bio.

Put our teams to work for your business

Contact Us