5 things we can learn about user interface design from WebstaurantStore

Web Design Professional Clinic: Webstaurant Store

This restaurant supply e-commerce site sits in the top 2000 U.S. sites, with a low bounce rate of 38%. Their high traffic ratings may be in part a result of the large number of restaurants in the US – over 616,000 as of January 2013**.

1. A Clean Design Makes Content Easy to Digest.


Above: Webstaurantstore.com Home Page

Webstaurantstore.com® user interface design is clean and simple. On the home page, they use a darker background to graphically set off three primary content areas in the foreground. This effective design technique highlights content areas you want a visitor to notice. The design also delivers a clean, crisp look. Visual cues to main slider “offers” navigation and product recommendation navigation are contained within narrow vertical and horizontal gradated bands. The gradations are not critical to the design, but add dimension to the primary content areas.

A third content area on the home page presents a grid of popular commercial brands by which you may search. The grid design with subtle cell borders and visual padding help to unify a variety of logos into a cohesive graphic area. The use of bold color appears in the navbar and footer area. While the color calls a lot of attention to both areas, the use of “white space” balances the contrast effectively. The mobile and tablet versions of the site translate the desktop interface, and maintain the overall design aesthetic.

Overall, generous spacing and consistent use of color makes the content easy to read and engaging. The style is contemporary, yet timeless, which will help extend the life of the interface design.

TIP: The broad adoption of larger monitors means that web designs can go beyond the 1000 pixel width without fear of losing visitors. The wider space provides an opportunity to better organize your content areas and using an intelligent approach to responsive design can help preserve the beauty of a desktop interface on a mobile device.

2. Relevant Content Engages Visitors More Quickly


Above: First-level category sub-page

The webstaurant.com navbar serves as a powerful visual starting point and anchor. The labels are easy to read and are organized in logical customer-centric groups such as “equipment, smallwares, storage, tabletop, and disposables”, to name a few. Once a visitor selects a category of interest, a well-designed sub-page presents various sub-categories in the same clean design format as the home page. The company has paid great attention to product photography, taking extra time to present each object in natural-looking, well-lit arrangements. The result is a customer-oriented approach that helps potential buyers envision real-life scenarios within the restaurant. Most of the product photography is shot on white seamless backgrounds making it appear clean, and keeping focus on the product rather than on the scene.

A feature worth noting is the inclusion of a “business type” selector in the main navbar. Selecting on any of the options such as “pizza supplies” or “sandwich shop” brings visitors to a page where popular items are grouped for easy access. This feature adds convenience for buyers and strengthens the perception of webstaurantstore.com’s industry expertise and high levels of service.

TIP: When using photography or illustration, invest in presenting your products in a way that is customer-centric. The one time cost of high-quality professional photography is easily offset by the strong impression a great shot creates. If you’re not sure what your customer wants or expects to see, consider developing buyer personas to get a better handle on your “ideal customers”.

3. Offer Helpful Content Where Its Needed



Above: Second and third-level category sub-pages

As you navigate around the site, you’ll notice that the helpful tips and guides are easy to find. Instead of simply providing a “help” button, webstaurantstore.com places popular “FAQ’s” type content in close proximity to product content. For example, when you arrive on the restaurant dinnerware page, the visitor is presented with several choices to explore further. Recognizing that a potential buyer may be unsure of the differences or advantages of each, visitors can use the comparison guide to learn more without leaving site section. This web and user interface approach extends time on the site, and from a branding perspective creates a sense of trust.

TIP: Consider including helpful tips and guides right in the sections that feature products. Imagine your web page as a well organized supply room where products that are used most often are grouped within easy reach.

4. Using sidebars for navigation can enhance comprehension


Above: Sidebar navigation

Many websites need more than two levels of navigation to accommodate the nature of content. Webstaurantstore.com generally has 3-5 levels of navigation. Attempting to present all levels through the main navigation is impractical and would potentially confuse the visitor.

The site uses a single level main navbar, and then a system of grids to go from second to third level and fourth level content. You’ll also see sidebars used to help users navigate from third and fourth level to fifth level content. Sidebars are also used to present links to related videos and promotional content that helps to cross-sell other products and services.

TIP: Consider alternative approaches to navigation that readily engage visitors. Multi-level nav bars can simplify website building, but confuse customers. Using grids with pictures, and sidebars are just two approaches you can take advantage of.

5. Keep Secondary Information Out of Main Navigation


Webstaurantstore.com has a blog that offers recipes, tips and valuable discount coupons for merchandise. While a blog is helpful for customers, prospects and search ranking, it doesn’t always need to be accessed from the main navbar. Their blog along with a resource library is accessed through a repeating site element right above the footer.

TIP: Use testing and customer perspective to ensure the most important content is in the main nav, and secondary information is easily accessed elsewhere. To learn more about the value of a well-organized main navbar, check out this post.

Next Steps:

Perform your own graphic + web design audits of high-ranking websites. See if you can apply the same effective techniques and approaches to your own design work.

When you’re ready to embark on an online design (or redesign) project, make sure you understand your brand’s buyer personas. When your brand’s online content and design aligns with accurate buyer persona data, you’ll be on your way to improving your site ranking and other important analytical data that translates to achieving business goals.

Need Help Planning Your Creative Strategy or User Interface Design?

Please give us a call, or search for a web + graphic design firm who can assist you with the process. One important factor in the selection process should be whether a creative firm can articulate your product’s key advantages from the customer’s point of view. A demonstration of creative is not as important as being able to interpret your input and translate it into a clear statement of strategy, communication goals, and key performance indicators.

*Copyright © 2003–2014 WebstaurantStore Food Service Equipment ad Supply Company** Source: NPD, Janury 2013. † As of 10.4.14
About the author: Tom Weinkle is a founder and partner of Vortex Communications, a graphic and website design firm who offers graphic and WordPress web design, build, troubleshooting and training services along with search optimization, social media and inbound marketing services. Based in Miami, Florida, Tom has over 25 years of experience in visual communications for the healthcare, medical, law, accounting, software, financial services and banking industries.

Scroll to Top