ELANCO

Innovating Animal Health

MY ROLES

UI Designer
User Researcher
4 Designers Team

SCOPE

4 Week Sprints
Desirability Testing
Usability Testing
Design Iterations
Final Presentation

TOOLS

Figma
Principle
Adobe Photoshop
Sketch
InVision

DELIVERABLES

Style Guide
UI Kit
Style Tiles
HiFi Mockups
Clickable Prototype

Background

AMBASSADOR: A BEER, WINE, AND SPIRITS MOBILE APP

With over 8,000 employees serving more than 100 brands to over 9 million customers, Constellation Brands Inc. needed an innovative way to help internal employees support and enjoy their brands at social events. That was when the Ambassador App was created: a mobile navigation app that allowed employees to find locations that serve and sell from CBI's portfolio of beer, wine and spirit products.

High-Res-PNG-RUF-Full-Portfolio-Beauty-Shot

Constellation Brands Inc. wine brands

The Problem

BRAND ADVOCATES LOSING REVENUE DUE TO APP INEFFICIENCIES

Sales reps (aka brand advocates), the primary users of the Ambassador app, spend a long time planning their brands portfolio before, during and after meeting their customers. Because planning is done manually — using Excel spreadsheets, printed paper lists and jotting notes on the phone — sales reps find it tedious to use the Ambassador app. Many have complained that keeping track of products and finding product information takes away from the time they can spend socializing and engaging with the customers. This is a problem because, when customers don't feel the connection with the sales reps, the business risks losing revenue.

Old Ambassador mobile app screens

The Solution

AN ELEVATED & INTUITIVE APP WITH A PERSONAL TOUCH

The Ambassador 2.0 concept I created is an elevated, intuitive and visually stunning app with a save-to-list function for all products.

Given the 4-week time restraint, I focused on improving the branding and product portfolio aspects of the Ambassador app.

New Ambassador mobile app screens

The Process

APPLYING THE DESIGN THINKING METHODOLOGY

To efficiently and effectively create the mobile app experience our users want, we followed the Design Thinking process. This nonlinear approach helped us understand our users so that we can explore relevant design solutions for implementation.

The iterative approach of the Design Thinking method

1. Empathize

IN WHICH WE LEARNED ABOUT OUR USERS' STRUGGLES

Starting with some SME interviews, we began by finding out who our primary user group was for the Ambassador app and what they use the app for. We discovered that CBI sales representatives, aka brand advocates, use the app most often while out on the field to find CBI products.

To keep our focus on the needs of our primary user group, we proceeded to interviewing 7 brand advocates who use or are aware of the Ambassador app. One particular quote seemed to summarize how most of our users felt about the app:

Me facilitating an interview with one of our users as my teammates took notes

2. Define

IN WHICH WE SYNTHESIZED OUR RESEARCH FINDINGS

After taking turns facilitating user interviews and wrapping up for the day, we huddled as a team to debrief on our findings. To get a big picture on what we need to improve for the app, we created a user journey map for what a typical day looked like for our brand advocates selling products out in the field.

In a nutshell, our brand advocates were challenged with technical limitations within the Ambassador app that created inefficiencies and lost revenue. Here were our 3 key findings:

There was a lack of product information and visuals that customers need
There was no way to share a product's detail directly from the app
There was no way to save or favorite products

User journey map of a brand advocate selling products at a restaurant

Taking in the insights we gathered from our user's journey, we spent some time drafting out a clear and concise user need statement that defined what our users' need and why the need is important to them. After burning through several hours and many crumpled paper balls, we got a problem statement that the team agreed best reflected the problem we wanted to solve for in our redesign.

Kelly, a busy brand advocate, needs to quickly and effectively manage her products in order to spend more time engaging with her customers.

Next, we created a user persona to define the brand advocates we talked to in our user interviews. We spelled out her goals, motivations, core needs, pain points, and some unique social attributes.

User persona of CBI's brand advocates

Lastly, we defined three design principles to serve as our North Star as we work through the app redesign. Based on our user research findings, we wanted to create a mobile app experience that is elevated, engaging and easy to use.

ELEVATED

Brand advocates should feel a sense of class, confidence, and pride when using the solution we provide.

INTUITIVE

Our solution should empower brand advocates to quickly favorite and find new products.

ENGAGING

The platform should engage brand advocates with new knowledge and information.

3a. Ideate (UI)

IN WHICH I WENT ON CRAZY EXPLORATIONS

Being four UI designers in a team, we were very excited to start the ideation phase. From here on out, we diverged to explore our own unique styles.

With multiple rounds of testings and iterations, I consider the UI design phase to be a mini project in itself:

Create moodboard first draft
Desirability testing #1
Create moodboard second draft
Internal design critique
Create style tile
Desirability testing #2

CONCEPT 1: TIMELESS

As a brand, CBI is versatile and retains its value over time. This is seen from their social, financial and business values, to their namesake “Constellations”, stars that have watched over humanity since the beginning of time.

MOOD: cozy up and enjoy wine in your own safe space
COLOR: burgundy is an elegant, timeless and sophisticated color that is often used as an indication of wealth and power. To complement the color, I used burgundy’s undertone turquoise, paired with a beige to give a classical look. No pure whites or blacks are used.

Design concept 1: Timeless

CONCEPT 2: BIG BANG

The Big Bang theory suggests that the cosmos we know today started with a small singularity inflated for 13.8 billion years. Through the use of illumination and shadows, this concept exhibits each element as a part of a greater whole, just as hundreds of brands make up the Constellation Brands.

MOOD: a romantic and celebratory evening with wine to share
COLOR: red has several meanings, including passion, life and health. Black is the color of the midnight sky. In color theory, red has been tested to appear bigger and more brilliant on a black background. I added yellows and soft whites to depict the stars in the sky.

Design concept 2: Big Bang

CONCEPT 3: SYNERGETIC SEASCAPE

This concept depicts the reflection of the constellations in the sky onto the sea. The constellations in the sky could be interpreted as synergy: little stars connected to form a whole new idea.

MOOD: a refreshing glass of Corona at the beach
COLOR: The blues and greens of this concept came from the Double Stars, an astronomical research done on a chromolithograph by Henry Smyth in the early 1900s. Double Stars are two stars that are physically so close together that they sometimes appear as an optical double. Just as the sea is a flipped reflection of the colors of the sky, the unique, pastel-like colors of the Double Star are the creation of a synergetic merge.

Design concept 3: Synergetic Seascape

AND THE WINNER IS...

For our final desirability test that compares three style tiles, we recruited 8 participants that were CBI employees from different departments. Our research questions were setup to compare the different concepts on a personal, professional and cultural level.

The winner within my three concepts was the Big Bang. Scoring the highest on personal, professional and cultural, many users loved the rich, dark theme, which felt high class to them, and the decoractive bubbles along with crisp, high quality photos.

Style tile desirability test winner: Big Bang

3b. Ideate (UX)

IN WHICH I IMPROVED UPON EXISTING WIREFRAMES

In tandem to figuring out the look and feel of the app, I evaluated wireframes handed off to me from a previous UX team. There were great concepts that I built upon, and there were improvements I made to make the user experience better for our brand advocates.

ALCOHOL FINDING

In the original wireframe, finding CBI’s alcohol categories was a two step process that required users to return to the home screen. Therefore, I created a Quick Search function where users can quickly and easily find products they’re looking for, no matter what screen they're on.

PRODUCT BROWSING

The two column vertical scroll layout on the product category screen was an issue, as some of our stakeholders were concerned that this plays into favoritism for certain brands.

The solution I came up with was a horizontal scroll for wine brands sorted by alphabetical order.

4. Usability Testing

IN WHICH I ITERATED ON MY DESIGN

I conducted usability tests with 5 participants on my app experience and received valuable feedback that can improve my design further. For the final prototype, I made 2 key improvements:

UPDATED HOME CONTENT

Based on user testing, users wanted to see more relevant content on the home/discover screen:

• New Releases
• Upcoming Events
• Wine Publications
• Wine Influencers

UPDATED PRODUCT INDEX

From user feedback, I removed alphabetical sorting and changed filter categories. Here were some of the usability issues I found:

• Users had a hard time using their finger to pinpoint the letter they needed
• Not every letter of the alphabet had a brand name
• Users expected to filter wines by type, not region and vintage
• Users wanted to see more relevant wine content, such as wines that are popular or trending

5. Final Prototype

IN WHICH I PRESENTED TO THE CLIENT & DESIGN PANEL

After a tight 4 weeks of daily standups, in-person design team collaboration, user testing sessions and design critiques, I created a functional and user friendly, high-fidelity mobile app prototype to pitch to stakeholders at CBI and to a design panel that included top CEOs and Product Designers from SpotHero, Grubhub and Allstate.

Below you will find my Figma prototype along with a set of user objectives. Feel free to play around!

The Scenario:
You are a CBI brand ambassador at Eataly and you are chatting with a couple that you chanced upon. The couple seemed interested in your wine portfolio, especially Kim Crawford Rosé. They asked for more details.

Your Objectives:
1. Find Kim Crawford Rosé
2. Save Kim Crawford Rosé to "Rosés for Eataly" list
3. Find Kim Crawford Rosé again from the list

UI Deliverables

IN WHICH I SHIPPED MY DESIGN ASSETS AND CELEBRATED

To tie the bow on this project, I included within my final deliverables a brand style guide and UI Kit that I created specifically for this project.

STYLE GUIDE

Ambassador app new style guide

UI KIT

Ambassador app new UI Kit

Future Considerations

If my team and I were allotted more time and resources on this project, here are some next steps I would take for this mobile app redesign:

Some users had reflected that they mainly use the search bar to look for products. I would like to consider this change in the next iteration and perform A/B testing on open vs. closed search bar.
The scope of this project focused on creating visualization and context for CBI's brands and products. In the next phase, I would like to explore how the navigation aspect of the app will look like with the new branding.
Further user testing for the "My List" screen is needed to determine what other features users need for product management.

Thank You!

Thank you for taking the time to read (or skim) this case study. I hope you enjoyed it!