Case Study: Hubert

Wireframe sketches of landing page for The Hubert Company
Background
Hubert is a Cincinnati-based retailer providing merchandising solutions and support products used in foodservice and retail businesses. Their customers include supermarkets, restaurants, hotels, and foodservice operations. They have been rapidly growing an online presence and needed a landing page for their bushel baskets.
Problem
The company wanted a landing page that highlighted the various ways they could be used to help promote revenue for the product. that are used for a wide range of purposes. The landing page needed to contain all of the elements that support SEO best practices and an optimized UX.
Solution
The solution was to create a landing page to engage the end-user. Using a larger hero image with a text overlay highlighting different ways the product could be used in a store. Adding a calling to action to request a catalog engages the end user to act. The use of lifestyle images gives the end user a visual of how the baskets can be used. The use of secondary brand colors gives the design a modern look and feel to the product.

  • My Role:Research, Sketches, Wireframes, Design, HTML Implementation, SEO Optimization
  • Tools:Adobe XD, HTML5, CSS3
My Process
Research: I began the project by familiarizing myself with how baskets are used for impulse merchandising, floral arrangements, themed displays, pre-made gift baskets, display bulk candy and nuts, popcorn bar, and general storage, as well as research the company.

Sketches: Using information gathered through my research I sat down and sketched out four different ideas. I focused on a modern design that will appeal to the target demographics.
Wireframe sketches of landing page for The Hubert Company
Color Palette
Brand colors were used to ensure the landing page was consisitant with the brand
typefaces used on landing page
Typography
Gelasio was chosen for main headings and sub-headings for the more formal feel. The font is metrics compatible with Georgia, a standard font in web development.
Roboto was chosen for the sub-heads for the modern approachable feel to the font. The font is a rounded, clean typeface with a straightforward, geometric design that offers clean lines. Roboto is intended for digital use.
Wireframes
When creating the wireframe for the landing page I organized the content in easy-to-digest blocks of copy, organized with headers and imagery. This helps with usability while still retaining SEO. Keeping conversion rate in mind I used calls-to-action in the hero image, in the body of the page, and the customer reviews to facilitate the customer journey on the site that would satisfy their best interest as well as the action the company wanted them to take.
Wireframe sketches of landing page for The Hubert Company
Visual
A protoype was created using Adobe XD.
Wireframe sketches of landing page for The Hubert Company