Hopsonomy

Teaching employees how to pair beer with people

Creative Direction & Design

Danny Harms, Creative Director at Hopsonomy

Client

Matt Nelson, owner of Hopsonomy

Background

Hopsonomy provides an online learning platform to teaches restaurant, bar, and taproom employees how to sell craft beer.

Matt identified an opportunity within the craft beer industry's currently steep learning curve, since classes offered by the competition can be advanced and alienating to beginners.

Pairing beer with people

Hopsonomy combines Matt's restaurant industry experience, skills creating training content, and his passion for craft beer in an approachable library of learning courses.

Trainees learn about craft beer to increase sales, improve customer experience, and keep up with changing trends.

The Challenge

The original brand identity for Hopsonomy confused potential customers, and the logo often led people to mistakenly assume the company sold hops, the beer ingredient itself.

Through my discovery phase, we uncovered three main priorities for their new logo & brand identity:

  1. Rebrand the company to establish credibility within the beer education and training marketplace, and to also stand out from the often expert-level, unapproachable competition with friendly, practical, and simple visual themes.
  2. Created illustrations and clearly convey concepts and design approachable learning courses that keep training simple, clear, and easily digestible.
  3. Design a new responsive website and training platform, improve accessibility and SEO, and redesign the overall user experience (UX/UI).

Logo & Brand Identity

Strategy

To begin, the clients completed my brand questionnaire and I met to discuss their answers. This helped me discover their target market, what makes their company unique, and where they want to take the company in the future.

I researched other brands in their market and created a competitive analysis. From these insights, I determined a strategy and creative direction.

Logo Design Process

I moved away from using a hop cone as the icon from the original Hopsonomy logo, as that created confusion as to what the company offered customers.

The tagline "Pairing Beer With People" did a lot to explain the concept, so that remained a prominent part of the new design.

For the icon, we explored representing craft beer itself, as well as other visual themes that allude to selling more of it as a result of using Hopsonomy.

I started with a lot of quick sketches to encourage creativity and efficiently explore numerous ideas, then refined the concepts to review the strongest with the client.

Logo Concepts

I refined the concepts to help the final logo come to life a little more each round, guided by the client's feedback along the way.

Final Logo Design

Flexible Logo System

I expanded the primary logo design to include alternate logo variations that are optimized for a variety of placement constrictions (such as embossing or embroidery).

This flexible logo system offers a robust toolkit to help those who work with the Hopsonomy brand.

Brand Identity Guidelines

To complete our logo and brand identity package, I designed the brand’s visible elements, such as the color palette, brand typefaces, usage guides (safe margins, sizing guide, incorrect usage), and image file explanations.

We then created a set of custom brand guidelines help Hopsonomy communicate a professional and consistent brand identity.

Brand Illustrations

Character Illustrations

The company's tagline "Pairing Beer With People" offers a good window into an essential element in the process: People.

Beer customers display a broad spectrum of craft beer knowledge and can have palettes that are trained differently from person to person.

Hopsonomy courses train servers and hospitality industry workers ask questions and make suggestions determined by each individual customer's preferences.

Icon Set

I designed an icon set for the company to use across all customer touchpoints to explain both the brand to customers and then course concepts to trainees.

Scenes & Backgrounds

Specific, in-context set and settings help trainees connect their knowledge to the workplace scenarios and steps in the beer-making and selling process.

I designed several to staged background locations ranging from a brewery, to a bottle shop, to a taproom.

The combined character illustrations, scenes, and icons ultimately provided Matt and his Hopsonomy Learning & Development employees to assemble interactive training in their Storyboard 360 course design platform to pair beer with people.

Website Design

Strategy & Moodboards

Once I completed the brand identity design and brand illustrations, I moved on to the next major project, which was a new Hopsonomy website design.

I first assembled curated visual moodboards from inspirational examples already in use by other sites, and then discussed with Matt to surface insights and spark new ideas.

Sitemap & Wireframe

I met with Matt to discuss his overall goals for the site, understand his users, and anticipate their needs.

I laid out a sitemap to account for all pages, then drilled down further to outline content and goals for each page.

Then I designed user flows—how the user can accomplish each goal in as few steps as possible in a wireframe.

Visual Design

With my wireframe to guide me, I designed each page of the website in Adobe XD.

The site needed to both sell the product to new customers, and serve as the users overall learning platform for the product itself.

I combined the illustrations, logo, and brand elements like typefaces and a color palette to create artwork for the web design.

Sales Sheet

Business Cards and Office Decal

Apparel & Merch

Social Media & Newsletter

Explore More Work

back to page start