The Human Bean
My colleagues at AHM Brands and I reimagined The Human Bean's brand and marketing strategy during a period of rapid growth in their business. With a refreshed brand, product photography, and an earnest vision from their CMO, I lead the strategy and execution of THB's new website.
WEBSITE LEAD
INFO ARCHITECTURE
CONTENT OUTLINES
DESIGN SYSTEMUI DESIGN
WIREFRAMES
Prototypes
HI-FI MOCKUPSThe challenge
This project called for two new websites.
The old website housed information for both their consumer and franchise audiences. One of THB's primary objectives was to separate these websites to optimize SEO and better target their audiences.
I established the needs of the project's stakeholders - the client, our internal creative team, and the third-party development team - before producing a project plan and timeline that would deliver complete designs and assets to the dev team with ample time to hit their deadline.
Impact
Ninety days after launching the new website, we saw the following changes:
Total Users up 44%
Bounce rate down 62%
Average session duration up 152%
Pages per session up 294%
The upshot
The complexity of this project forced me and our project manager to reconsider our typical work flow. As a result, we not only succeeded in delivering top-notch designs for two websites, but we also invested in ourselves by streamlining processes and improving our project management practices.
I’ll touch on three pillars of our strategy:
Develop two style guides - under one brand - targeting different audiences.
Focus creative attention on a visually engaging drink menu.
Divide and conquer UI design for the two websites.
Two audiences; two style guides
We developed core features to be shared by both websites and then, based on a tone derived by the target audience, gave each website its own flavor. This created consistency and logic between the two style guides - to the benefit of the brand as a whole and to the developers implementing the designs.
Consumer site
Website Goals
Increase e-commerce sales of merchandise
Enhance menu photography and descriptions
Mobile friendly
Upgrade the functionality of features (maps, forms, etc...)
Be a source of information for our customers (e.g.: locations and menu)
Promote reasons to revisit the website
Target Audience
Primary:
65% female
On-the-go moms; 24-40 years old
Secondary
Professionals; male and female, 30-65 years old
Visual tone
Human, friendly, and quirky
Fun accents and flourishes
Lots of color
Franchise site
Website Goals
Increase lead generation
Educate prospective franchisees
Encourage quality applications
Be a hub of information for current franchisees
Target Audience
Primary:
Multi-unit franchise owner and operators
Mix of male and female
Secondary:
Entrepreneurs with food knowledge
Visual tone
Serious, professional
Clean, simple
Drink menu
The cornerstone of the consumer website is the drink menu. This is one of the primary sections that visitors come to see.
The Human Bean offers dozens of drinks so we needed to devise a page the helped users explore new drinks and find old favorites.
To aid in way-finding and comprehension, we leaned on THB’s fun color palette to color-code the drink categories. We also consulted extensively with the THB team to understand their customers’ tendencies before developing a filter system and information layout based on how actual customers think and talk about the drinks.
Wireframe of menu list page. Click for a demo.
Mockup of menu list page.
UI Design
Based on the sitemaps, navigations, and overall strategy I developed for the project and two websites, a graphic design and I divvied up the task of drafting the webpages.
The graphic designer worked on drafts for the more conceptual consumer-site pages. Web design was not her specialty, so I helped her refine her ideas and then I recreated them in Figma. It was my responsibility to ensure the page and component designs were compatible with the CMS theme and were following the basic rules which the dev partner and I had established (like gutter widths and responsiveness).
Meanwhile, I was also tasked with designing all aspects of the franchise website. This meant I was responsibility for about two thirds of the UI design work; this split expedited the timeline and open the opportunity for more variety in the creative development of the designs.
This collaboration was satisfying, efficient, and resulted in a better product. So much so that I’ve worked with the department manager and agency COO on making such collaborations a regular part of our project processes.
Initial concept for the consumer website from the graphic designer.
A consumer-website homepage mockup midway through our revision process.
Final mockup for the consumer website's homepage.
