JW Blue — Mark Your Moment

Case Study Feb 02, 2020

Brief

Johnnie Walker and parent company Diageo were looking for new and innovative ways to engage their existing customer base, while simultaneously appealing to the younger generation. As Nectar already had a working relationship with Diageo, and they were familiar with our smart cap technology, we were the obvious choice to help them realize their ambitions. So, in August of 2019, I was tasked with reimagining Johnnie Walker's Mark Your Moment campaign into a digital app-based experience.

My role

I was the sole designer on this project, and was responsible for the entire process. I worked closely with the execs at Nectar and Diageo/Johnnie Walker, as well as PMs and engineers to rapidly iterate on solutions that best fit the brand while meeting the goals that were initially set forth.

Process and solution

As this was a project contracted by Johnnie Walker, it was crucial that every step in the process be clearly communicated, and each milestone approved. So, as is the case with most projects, it started with a simple flow chart to define the scope of the application and help everyone understand how the app would be used.

The digital version of Johnnie Walker's Mark Your Moment would use a limited edition Nectar smart cap (etched with the Johnnie Walker logo) to wirelessly track the level of a user's Blue Label bottle. The accompanying mobile app (iOS only to start) would be capable of showing the bottle level in real-time, and users would be able to "mark" their moments by snapping a photo that would be attached to the bottle level and shared to social media.

Example sketch from early on in the process

Following approval of the general flow, I sketched out rough UI skeletons that would be the jumping off point for full-fidelity designs.

With a rough idea of how the app would flow, as well as how it would be laid out, now came the fun part—iterating rapidly on the visual design.

The first few versions leaned heavily on a dark aesthetic, and featured the ability to control a LED light that would be embedded in a wireless hub that would double as a stand for the bottle. Eventually, the LED feature would be dropped, as the cost and technical hurdles associated with adding one to the wireless hub proved too great.

Early versions also featured a "recipes" tab which would provide users with exclusive and novel cocktails they could make with their bottle of liquor. While the idea was well received, it was removed in subsequent versions in an attempt to keep the app simple and as close to an MVP as possible.

Around the third iteration, the visual design of the app would get a bit of an overhaul. The app would be brighter and more vivid to better align with Johnnie Walker's updated branding. I also experimented with the idea of simplifying the navigation substantially and utilizing gestures with pull-up sheets.

Following several rounds of review and feedback, the next revisions would bring back the bottom navigation while retaining some of the gestural ideas from the previous version. Users could either tap the bottom tabs or swipe left and right to navigate between the 3 main areas of the app. This felt like the best balance of simplicity and discoverability.

At this point, other areas of the app would be fleshed out as well, such as the moment capture and sharing flow, notifications (and permission priming for enabling them), and device management and error states.

Finishing touches

As the visual design of the app neared completion, I began working on a variety of prototypes to demonstrate various micro-interactions and transitions. These were a chance to really add that extra bit of polish.

Transitions during the onboarding flow
Demonstration of how "moments" would be viewed depending on where in the app they were accessed from
Prototype to help the developers understand how the app should transition between each of the 3 main sections
How new pours are displayed after the app is opened
When the user finishes drinking a bottle, they can move the cap to a new bottle. The app then allows them to swipe between past bottles and their accompanying moments

Outcome highlights

  • The application has completed development and been handed off to Johnnie Walker for additional user testing in various markets
  • Wide general availability is expected later in 2020

Cristian Ruiz

I'm a product designer with extensive web and mobile experience. Since 2010, I've worked on well over a two dozen shipping apps and website that have reached in excess of 40 million people worldwide.

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.