Maker's Mark UI Kit

Client

Maker's Mark®

The challenge

Adapt the 2020 Maker's Mark rebrand for all digital ecosystems i.e. their website, brand activations and programs, and email communications.

The goal

Create a comprehensive UI kit for our brand teams and external partners to be able to use consistent elements across all campaigns and programs. For this project, our team decided to turn to Figma shared libraries, for agency-wide and brand-wide consistency. It was the first time we'd explored this tool, and I was tasked with leading this initiative. We aimed to build out all the singular elements, to be used as the building blocks for all layouts following.

View the live site

User Research

View the full case study

View the prototype

PROCESS –

the process

When handed the guidelines for the Maker's Mark 2020 visual identity, there were many opportunities to explore digital implementations. The question was, how would we achieve practical changes as an interim to a complete site redesign, while still being complementary to the new brand standards? We needed to accommodate the new color combinations and then either re-skin or newly craft UI elements that weren't included in the first pass of the standards – buttons, forms, navigation styling, etc.

View the full case study

Maker's Mark email screens in a grid layout, showing how the artwork and UI elements work together in harmony.

Maker's Mark Whisky Drop page showing navigation UI and tab UI for each Whisky Drop season drop.

Global design elements showing all the individual UI elements and typography and color styling for Maker's Mark.

No items found.

Conclusion

As our team built out the various usage examples, and refined the brand's shared Figma library, we started to see the brand come to life, similarly to how it was in print. A website is nothing close to a print ad, so this was a sign that we'd been on the right track, and we were close to being able to share what we've accomplished with our partners.

Since the rounding out of 2021 into 2022, we've shared the kit with, most notably, our US and UK teams. Most recently, we shared our work with Maker's Mark Korea – and I'm sure we'll continue sharing as the kit grows. Ultimately, we needed something that was flexible, with room to grow, but also something that was collaborative and always up-to-date, even for those that don't use Adobe programs. This is an ever-evolving file, which was one of the most beautiful things about learning and using Figma.

Read the full case study

View the live site