CLIENT
DURATION
10 Weeks
TOOLS
Figma and Adobe XD
Reimagining Yellowstone's Design System and Website Experience
JUNE - AUGUST 2023
I spearheaded the UX redesign of Yellowstone Bourbon's website and email system. To differentiate Yellowstone from other Luxco brands, we built a brand-new, sales-focused website prioritizing product sales and distillery tour bookings. Following the new brand guidelines, I designed the website architecture, crafted the user experience, and developed a streamlined email system with promotional modules to drive sales.
Context
Overview
Luxco, Inc., a St. Louis-based producer of distilled beverages, owns Yellowstone Bourbon, one of eleven brands in their portfolio. To create distinct brand experiences, Luxco tasked my team with building a standalone website for Yellowstone.
Our focus was clear: encourage customers to explore Yellowstone products and book distillery tours. However, the website offered more than just transactions. We included rich brand storytelling, showcased bourbon cocktail recipes, and fostered customer engagement through social media and blog connections.
Complementing the website, we built a corresponding email design system that mirrored the site's objectives and Yellowstone's brand identity. This system empowered the Luxco team to create targeted promotional emails with ease.
My Role
I led the the iterative design process for Yellowstone Bourbon's website. I collaborated closely with a cross-functional team – developers, a project manager, and an external creative agency – to bring the vision to life.
My journey began with meticulously crafting a sitemap that defined the website's user flow. I then translated this blueprint into a series of wireframes, progressively refining the user experience. Finally, working hand-in-hand with developers, I ensured a seamless transition from prototype to the live, customer-facing website.
LUXCO SUITE OF BRANDS AND PRODUCTS
Design a website and email system for Yellowstone Bourbon that highlights their products, fosters social engagement, and drives customers to book distillery tours.
⚡ DESIGN OBJECTIVE
Part 1: Website Design
Site Organization
My first priority was optimizing the user journey and driving desired actions. Leveraging user data, I designed a streamlined information architecture with a clear five-option navigation bar at the top of the website. Studies show that users navigate more efficiently with fewer choices. To further reinforce key actions, the homepage would also feature content blocks linking to those five primary pages.
Home Page
As the website's entry point, a key priority was crafting a compelling landing page that prioritized user engagement and seamlessly guided visitors towards desired actions. We meticulously organized content blocks based on relevance, placing the most crucial information at the top to support our website objectives.
Here's the breakdown of prioritized content (top to bottom):
-
Promotional Video: Captivates visitors with a visually stunning introduction to the Yellowstone brand.
-
Product Catalog: Provides easy access to explore the Yellowstone bourbon range.
-
About Yellowstone: Educates visitors about the brand's heritage and core values.
-
Cocktail Recipes: Adds value by showcasing delicious ways to enjoy Yellowstone products.
-
Book a Tour: Prominently positioned to encourage exploration of the distillery experience.
-
Social Media Promotion: Invites visitors to connect and engage with the Yellowstone brand community.
Hero Banner with Promotional Video
About the Brand
Book a Tour
Simplified Navigation
Product Catalog
Cocktail Recipes
Social Media Promotion
Product Details Page
Following the brand introduction on the homepage, product detail pages serve as the next crucial step in the customer journey. Designed to convert curiosity into action, these pages prioritize key information:
-
Front-and-Center Product Details: Clear product descriptions, detailed tasting notes, and well-displayed awards capture visitor attention.
-
Compelling Call to Action: A prominent "Purchase Now" button encourages immediate action.
-
Incorporating Inspiration: A featured cocktail recipe showcases delicious ways to use the product, further encouraging purchase.
-
Seamless Exploration: "You Might Also Like" section at the bottom recommends other Yellowstone bourbons, guiding users through a smooth browsing experience.
Corresponding Cocktail Recipe
Product Details
Suggested Products
Engaging Points of Interaction
While the homepage and product details pages served as the conversion pillars, the rest of the website embraced a streamlined, single-function approach for intuitive navigation. However, as the UX designer, I prioritized user engagement by incorporating strategic interactive elements throughout.
For instance, the cocktail page featured pop-up recipe displays for each drink. This deliberate decision kept users focused on the website while streamlining their exploration of Yellowstone cocktails.
Similarly, the About page replaced a bulky text block with a captivating scrollable timeline. These seemingly minor additions across the entire site served a larger purpose – to leave users with a positive and engaging brand impression.
COCKTAIL RECIPE POP-UP
SCROLLABLE BRAND TIMELINE
Part 2: Yellowstone Design System
Yellowstone Bourbon sought a complete overhaul of their email design system to seamlessly align with their new website's objectives. Understanding their core email needs – promoting website content and driving sales – we crafted a focused design system. While the number of modules remained strategically limited, each category perfectly mirrored the website's functionalities, ensuring a cohesive brand experience across both platforms.
Module Categories
-
Header and Footers
-
Hero
-
Product/News
-
Quiz
-
Blog Posts
-
Tours
-
Recipe
-
Social BannersLists
DESIGN SYSTEM MODULES
Putting Together an Email
Our streamlined design system empowers Yellowstone's internal email team to rapidly craft impactful promotional emails for both desktop and mobile. This is evident in the design system demo below, showcasing the ease of building effective email campaigns.
DESIGN SYSTEM DEMO
Design Conclusions & Client Feedback
This seemingly straightforward project revealed an opportunity for impactful collaboration and design leadership. The client held clear sales goals, and my focus shifted from reinventing the sales funnel to creating a user-centric website that supported the Yellowstone brand.
As the user advocate, I championed web-friendly interactive elements and a modern design aesthetic. While these additions required collaboration with developers, I presented a clear value proposition: a well-branded, modern website that fostered customer loyalty. The client recognized the long-term benefits, and we delivered a successful outcome.
Design a website and email system for Yellowstone Bourbon that:
-
Highlights their products
Captivates visitors with high-resolution bottle images and clear descriptions on the homepage, enticing them to delve deeper into Yellowstone's bourbon range. -
Fosters social engagement
Integrates live social media feeds displaying user-generated content (UGC) and brand updates, fostering engagement and brand loyalty. -
Drives customers to book distillery tours
Makes booking tours effortless with a prominent "Book a Tour" CTA on the homepage and throughout the website, leading directly to a streamlined booking page.
⚡ REVISITING THE DESIGN OBJECTIVE
DESKTOP AND MOBILE WEBSITE
✏️ PERSONAL TAKEAWAYS
This project highlighted the importance of advocating for user needs within a cross-functional team. While developers focus on functionality and clients prioritize timelines and sales, user engagement can sometimes fall by the wayside.
I thrived in bridging this gap. By presenting data and user research, I demonstrated the value of an engaging website with strategic points of interaction. By prioritizing user delight, we created a lasting brand impression that went beyond sales figures.