Ambassador App

 

Client: Constellation Brands

Skills: UI/UX design, research, interaction design, animation, user testing  

During this project I worked on a team of designers and we collaborated on research, user testing and synthesis. We each developed our own design solutions and presented them to Constellation Brands. This was my first experience working with a real client so I had a lot to learn from managing expectations and facilitating dialog around the project goals. 

About the project

 

The Ambassador application was developed by Constellation Brands as an internal facing app launched as a minimum viable product to help employees support their accounts, enjoy products, and act as brand ambassadors. This project aimed at redeveloping the current application to better meet the needs and goals of the employees by providing a more accessible interface and user friendly experience.  

image7

Current design

image4

New design

image11

The Challenge 

Designing an app that gives employees the resources to become a brand ambassador for their company is an empowering tool. Constellation Brands is a fortune 500 alcohol company that serves over 100 brands and my team was tasked with developing an app that encourages opportunities for employees to enjoy their products and share their knowledge with others. 

Stakeholders

Michael Thaney, innovation partnership manager
Andrew Saladzius, product manager
Brian Robert, application engineer

Stakeholders

Michael Thaney, innovation partnership manager
Andrew Saladzius, product manager
Brian Robert, application engineer

primary goals

Hypothesis 

We believe that CBI employees want a tool that will help them become more familiar with their portfolio of brands and cultivate pride across their company. So if we provide a resource by which they can acquire product knowledge and locate accounts, then we will see them share experiences with clients and friends and form a connection with the products that they represent

 

Human centered design process

Human centered design process

Group 2@2x

Research

The project was constrained to 6 weeks and therefore my team was limited to what we could accomplish in terms of designing new features and testing them so we quickly narrowed in on a scope for the project.

The project involved redesigning the current Ambassador app to give employees a consumer like experience. This would involve redesigning features that borrowed from the sales teams tools to be useful for all employees. A visual design system would create the framework for further innovations within the app and be a centralized collection of components and rules in line with established brand values.

We studied materials that the stakeholders provided, including past research and looked into how different employees might use the app including corporate, sales representatives, operations workers and hospitality employees. We talked to users to hone in on a user profile that would be appropriate for the Ambassador app. 

 

We discovered that the ability for employees to share pride for their company with friends and coworkers while staying up to date on new product info was vital to becoming a brand ambassador. 

 

We discovered that the ability for employees to share pride for their company with friends and coworkers while staying up to date on new product info was vital to becoming a brand ambassador. 

 

Persona

goals copy@2x

Market Research

Heineken Way - A consumer access point for the public to learn more about the business and products of Heineken

Heineken Way - A consumer access point for the public to learn more about the business and products of Heineken

Screen Shot 2019-08-26 at 7.18.46 PM

Pros: Large product images provide a high level of quality and detail about products

Cons: Poor use of white space, elements are overcrowded

AB Marketing - Get breaking news from

Anheuser-Busch

Screen Shot 2019-08-26 at 7.27.58 PM

Pros: Detailed information on different parts of the company 

Cons: Grid based layout with photos behind text is hard to read

Untappd - discover craft beers and share reviews

Screen Shot 2019-08-26 at 8.01.11 PM

Pros: Lots of user generated content adds quality 

Cons: User flows not intuitive and some important functions are hidden 

Founders - Find bars, restaurants and venues selling Founders beer. See what’s currently on tap and learn about events

Screen Shot 2019-08-26 at 8.10.31 PM

Pros: High level of detail about products 

Cons: Burdensome navigability that sometimes points to links outside of app 

Yelp - Help people discover local businesses 

Screen Shot 2019-08-26 at 8.21.30 PM

Pros: Dynamic map promotes discoverability 

Cons: Densely packed with information, hard to digest it easily

Starbucks - Order drinks for pickup, get rewards, find locations 

Screen Shot 2019-08-26 at 8.26.39 PM

Pros: Clean layout helps text stand out 

Cons: Focussed around a single use case - getting you to buy ahead of time

Key takeaways

Although I had limited access to the internal apps that I researched, based off of information found it became evident that most of these apps did not have a very pleasing user experience. Many had been brought to the market to simply fill an under researched need and failed to deliver important features or account for pleasing visual design (many were heavy and clunky feeling).

Outward facing apps that I looked at highlighted products well and made location finding straightforward. Considering that the redesign of the ambassador app would need to account for lots of content (product photos, descriptions) I thought about how I might make a design that would allow that information to be easily digestible and quickly navigable. The use of white space and smooth navigation would promote discoverability. 

Iterating on wireframes

The wireframes that I had been handed were rather dated and included older UI patterns that I didn’t think would fit with the goals of the project. I spent some time iterating and reorganizing features to make information easier to digest and navigate. 

whiteboardwireframes

Information Architecture

flow

Enhancing the user experience

The original app had focussed on developing a lists feature to improve cross company engagement, however the stakeholders were unsure if this should be a priority in the design, considering that the testing results were mixed on its acceptance. I saw this as an important feature that could be integrated into the app but have lower priority as a feature, something maybe 20% of users would use. 

1
2

Map

1. Current map shows up to 200 accounts at a time and displays account type via an icon, this completely overcrowds the map and make its difficult to understand.

2. I simplified this display by using dots that you could click into to learn more about the account type.

4
5

Favorites

1. Ineffective way to list items through a horizontal swim lane, what if there were 100 items?

2. I scrapped the idea of locating products from a list and simplified this organization into lists of products and accounts.

6
7

Accounts

1. This is a simple drawer design that has the opportunity to be upscale/ minimal and at the moment it looks default. 

2. Listening to stakeholders goals,  I took out the sales data and gave each account more contextual info by adding photos. 

8
Group 4@2x

Product Page

1. The share pdf is an outdated UI pattern that I scrapped. I reorganized this page to improve hierarchy and spacing.

2. Redundant use of map on upper right. I understood the goal of this function to help the user find the item, so I turned that into a more obvious CTA by using a FAB.

Design Principles

Through listening to stakeholders goals and considering the opportunities in the market (i.e. minimalism, dynamic flows and improved user experience) we crafted a set of design principles that would help us align with our design goals.

Some of my personal style inspirations come from looking at applications with great maps (starbucks, google maps), organization features (spotify), and engaging icons and card features (untappd). Finally making sure that the app is gratifying to use and informative will encourage reuse of the app.


Design Principles@2x

Style Exploration

Designing, Testing, Iterating

I mocked up designs and conducted desirability and usability tests on screens and then on functional prototypes. Through testing a total of 10 users (online and in person), I was able to synthesize results into actionable feedback that I could use to  iterate on my designs. 

Solutions 

I received feedback that the app didn’t feel in line with the brand by asking users to rate the apps alignment to Constellation Brands attributes. So I shifted the main CTA colors to a navy blue, simplified the iconography and used photography that reflected marketing based imagery that the company used throughout its website to help employees feel like it was “their” app.

Home Page

• I adjusted icons to clearly represent categories and styled them to align with Constellation Brands colors

• I changed the photo containers to allow for different types of photos. By taking away the bottle shot in front, there is much less prep and editing required by a marketing team member, so the solution is much more feasible to maintain.

Product page

By asking a series of open ended questions to users I deteremined that they were getting confused over the difference between the save and favorite functions so I differentiated them by separating them on the page.  

• The bottom tab vanishes to clearly direct users to find or save an item. This addresses the previous UX concern over redundancy with the map button.  

 

Favorites Page

The usability tests indicated that users could easily differentiate between favoriting an account versus a product and then finding it in the prospective list. This would play into helping our persona fulfill his goal of sharing product info more easily

Product page

By asking a series of open ended questions to users I deteremined that they were getting confused over the difference between the save and favorite functions so I differentiated them by separating them on the page.  

• The bottom tab vanishes to clearly direct users to find or save an item. This addresses the previous UX concern over redundancy with the map button.  

 

Favorites Page

The usability tests indicated that users could easily differentiate between favoriting an account versus a product and then finding it in the prospective list. This would play into helping our persona fulfill his goal of sharing product info more easily

constellation

Style Guide and UI Kit

A large area of the project involved developing the groundwork for a design system by starting with a style guide and UI kit. Because this was to be used as an internal app I imagined that the resources that would be focussed on developing and maintaining it would be limited and therefore I thought carefully about designing reusable components. It was also important for me to describe the guidelines and why colors or interface elements have been developed in order to ensure consistency throughout the app when additional features are built out.

Style Guide displayed@2x

Next Steps

From the last round of usability testing I identified three small areas that need improvement:

1) Clarifying what the search function is searching. Some onboarding information indicating that the search is all encompassing (location, categories, lists, etc.) may be helpful. 

2) The profile page needs to be more visually consistent with the rest of the app. I didn’t get to user test this page due to project time limits but determining what settings to be included on this page is the next step.   

3) Users expressed that they wanted even more details of products including acidity levels, ratings, etc. 

With more time I would like to put this design in front of more users to further iterate and improve on the home screen, map and list features. Some stakeholders also mentioned that they could imagine viewing wine pairings on the app and filter through cuisines to better plan their night out. Given the size of the employee base at Constellation Brands I believe there is a huge potential to deliver an impactful tool to many employees.

Additionally every user we spoke with expressed their interest in seeing this project succeed and I got a sense that employees had a desire to share their love for their company and their knowledge of products with clients and family.

What I learned

Working with Constellation Brands on the ambassador app challenged me to step up into a design leadership role and effectively communicate the strategies I utilized to arrive at my designs through research and user testing. I had previously only communicated these ideas to my design teachers and peers and so I learned the importance of explaining my process and story to stakeholders.


Another learning point came with conducting user testing on 10 employees of the company. I learned how to manage the process of conducting the tests, how to design tests to effectively gather quality data, and recognized that just because one user strongly expresses something doesn’t necessarily mean I need to change it. 


Finally having researched, designed and tested a series of screens outside of a “design classroom vacuum” I am much more confident in my ability to deliver effective digital products. I recognize that my thirst for learning as well as my desire to problem solve is what drives me to do my best work.     

IMG_1413

JULIAN POPLAWSKI

JULIAN POPLAWSKI

JULIAN POPLAWSKI

JULIAN POPLAWSKI