UX Design, UI Design, Web Design

AT&T Mentorship Site

Duration
March - May 2019
Role
UX Design, UI Design, Web Design
Client
AT&T Hello Lab

Project Overview

Rum & Co. is a bartending service that prides itself on hand crafted cocktails. The client wanted to find a way to expand their reach and foster a user base on a platform they could eventually use to help bartenders and mixologists advertise their services and book gigs.

Building an e-commerce platform with the capabilities to book bartending services is a long-term goal, so to launch more quickly and start building a relevant user base, the app would be split into two portions: bartender services and consumer services.

Consumer services should be built out first as the MVP with the idea of building in the bartender functionality in future iterations. The MVP would consist of a platform for users to find, save, and share cocktail recipes in one place.

Challenge

Create a platform that people want to use when they're looking for a new cocktail recipe. The platform should build a R&C user base. Success would look like users returning on a monthly basis, using R&C as their primary source for cocktail recipes. The platform also needs to be built upon for expanded bartender service features in the future.

Solution

Build a progressive web application that gives users the ability to easily find, save, and share their favorite cocktail recipes. Users will be able to save recipes to shareable collections so they can keep their favorites organized. These features will encourage return usage, while some key features like a cabinet to track ingredients and filter recipe searches accordingly will encourage user sign up to build a marketable user base. User profiles will be the foundation for bartender profiles in the future.

Mockup showing the age gate for the Rum & Co. mobile app

My Process

Branding

Moodboard direction 1
Moodboard direction 2
Moodboard direction 3

The Brand

Rum & Co. had previously developed a brand but wanted the app to expand on that and shift it as needed to function in a digital environment. I developed three directions and presented to the client as possible solutions.

Takeaways

Develop a look that combined elements from Direction 1 and Direction 3.

Research

Stakeholder Interview

To get started I interviewed the client stakeholders to get insights on their business model and goal of the product as well as what the future looks like for both the product and brand.

Key Takeaways

The product should help the brand build a marketable user group and growing brand recognition

The MVP is a searchable library of cocktail recipes built for consumers

The overall strategy is to build a consumer audience first, then develop and test features to allow bartenders to advertise their services

  • MVP is a quality cocktail recipe database designed for consumers
  • Ultimate goal is to have bartender profiles so they can advertise services
  • Build a consumer audience first, then develop and test bartending features

User Survey

To gather quantitative data that will supplement user studies I compiled a list of 19 questions and sent out a survey using Google Forms. We gathered data from 42 respondents that gave us some key insights on users' habits regarding when, how, and why they search for new cocktail recipes.

Key Findings

45% of respondents enjoyed a cocktail at least 5 times a month

Users typically rely on Google Search

Most users will not create their own recipes and instead rely on recipes others have created

A lack of correct ingredients is most often the biggest roadblock for trying a new recipe

Saving recipes is a high priority for users

Sharing recipes is not as important as saving to most users, but when they do share a recipe it's most often shared via text message

Market Research

Then came analyzing 5 competitive products in the cocktail library space to find design opportunities for Rum & Co. to stand apart.

Each of these competitors has a searchable library of recipes and while most offer the ability to save these recipes, the two with the largest libraries (Difford's and Kindred Cocktails) require an account to do so. Some other unique features include a drink suggestion feature in Tattersall, and liquor delivery through The Liquor Cabinet.

I found that there's an opportunity in this space for a usable, mobile-friendly application that allows users to add and save their own recipes.

Key Findings

Poor usability is common in areas like viewing saved recipes and adding custom recipes

Competitors are free to use, while some reserve certain features as in app purchases

Methods for recipe sharing varied widely from pre-filled text message with a viewable link, to having to manually share the URL

The ability to add your own recipe is a key feature many apps lack

No bartender-centric features are present

Feature Audit

Only two competitors allow for user-added recipes—Difford's and Kindred Cocktails—and neither of these products are mobile-friendly. This is a feature that Rum & Co. will need in order to enable bartenders to build their custom recipes and collections.

To see how these competitors approached recipe building features, I performed a feature audit by going through the competitors' products to create and save my own custom recipe. I took notes on each flow to learn how they approached this feature and document any pain points.

Key Findings

The platforms are feature-rich, but are often overwhelming because of it

Roadblocks exist where no clear CTA is present and no obvious way to proceed

Recipe builders are difficult to navigate and this slows the recipe build time significantly

User Study

Following the feature audit I asked 5 users to go through the flow of adding their own custom recipe to a competitor’s product to document any pain points a user might find.

Key Findings

User will often copy/paste from their notes app where they have saved their recipes

User frustration from how long it takes to complete the recipe

Realized that they can’t share the recipe when completed, leading to more frustration

User experienced dozens of moments where it was not immediately apparent what to do next

Contextual Inquiry

This test was run to supplement the user study and find how our users currently find new cocktail recipes. I observed 5 users as they were given the following task:

You’ve come home after a long day of work and would like to make yourself a cocktail. You’re interested in trying something new, so you can’t rely on recipes you know. How do you proceed from here?

Key Findings

Users typically utilize Google Search or Pinterest and open the first result that looks promising at a glance

Users typically skip over any information that isn’t the ingredients list first

Users typically view multiple results before finding a recipe they want to try

Define

User Personas

Jonathan

32, former bartender

Jonathan has a full bar setup at home and mixes cocktails every weekend for friends and family. When searching for new cocktail recipes, he often wants to find new drinks that will be appropriate for a particular occasion or mood.

Pain Points:
Having to copy recipes he likes from Google results over to the notes app to collect in the same place as the recipes he's made.

Rose

26, Social Media Manager

Rose has a limited number of cocktail ingredients at home but enjoys making a mixed drink every now and then. When looking for a new recipe she wants to be able to see only recipes that she can make with what she has, or maybe with one or two new ingredients.

Pain Points:
Searching through recipe after recipe only to find she doesn't own the necessary ingredients.

User Flows

In order to figure out the structure of the product, I created user flow maps. This step breaks down the core functionality of the app and explores the path a user would have to take to get through each feature so I can get a sense of what screens need to be made.

I developed flows to cover Searching for a New Recipe, Saving a Recipe, Sharing a Recipe With a Friend, Adding a Custom Note to a Recipe, and a flow for the Ask The Bartender feature, which was moved to a phase II launch.

Search for a New Recipe

Saving a Recipe

Ideate

Wire Sketches

Home Screen Search Bar Variations

Wire sketches showing variations of the home page

Search Flow

Wire sketches showing the search flow

Recipe Variations

Wire sketches showing variations of  the recipe page

Profile Flow

Wire sketches showing the user profile pages

Mid-Fidelity Wireframes

Home Page Variations, Search Flow & Profile Cabinet Flow

Mid fidelity wireframes showing the home and search pages

Collections Variations

Mid fidelity wireframes showing the collections feature

Cabinet Flow

Mid fidelity wireframes showing the cabinet feature

Recipe

Mid fidelity wireframes showing variations of the recipe page

Test

User Testing

Due to time and budgetary constraints, the client opted to perform testing at a later date. User tests are crucial to ensuring the product's usability across different types of users, so when we're able to test in the future, we will test the new user onboarding, search, collections, cabinet, and recipe creation flows.

Implement

Hi-fidelity Solutions

Moving from mid- to hi-fidelity a few changes were made. On pages like the Profile the background images were scrapped to ensure legibility. A floating action button was added to several screens for key functions to be accessible at all times. Recipe page substitutions were changed to be inline with a toggle switch to streamline the interaction. Notes were given their own window to simplify and focus the task. Finally, search results were changed to a tile grid layout to make browsing quicker and less cluttered.

Home & Search

Hi fidelity screens showing the home and search pages

Profile & Collections

Hi fidelity screens showing the user profile and collections

Cabinet

Hi fidelity screens showing the ingredient cabinet feature

Recipe

Hi fidelity screens showing the recipe page

Conclusion

The challenge was to create a platform that people want to use to find a new cocktail recipe. Following opportunities identified through research, the final product is a mobile-friendly application that gives users the ability to easily find, save, and share their favorite recipes, to organize them in collections, and even add their own custom recipes.

These features will encourage return usage, while some key features like a cabinet to track ingredients and filter recipe searches will encourage user sign up to build a marketable user base. User profiles will be the foundation for building bartender profiles in the future.

Next Steps

User testing of new user flow, recipe creation, collection creation, and search functionality

Build out hi-fidelity screens for the Ask the Bartender feature

Project Overview

For its third consecutive year running, the AT&T Mentorship Program was looking to improve their script submission workflow. In the previous year the contestants were presented a link where they could upload their work. The team manually sifted through hundreds of submissions, nearly a third of which didn't meet the contest requirements and had to be disqualified.

As the program was growing, the number of submissions were expected to increase by at least a few hundred. I needed to find a way to increase the number of qualifying submissions and create a smoother, more informative process to submit.

Challenges

Create a more informative submission process to increase user knowledge and reduce unqualified entries from the previous year's 33%. The process should remain easy for the users to navigate so that the overall number of submissions can increase to at least 1,000.

Solutions

Design a microsite where users have access to all contest information, rules, and requirements, as well as access to the legal contest rules PDF and an FAQ section for further information.

When a user is ready to submit, they will be directed to a white labeled FluidReview form where uploading will take place. This platform will allow a more efficient review process for the team, and make it easier to sort and organize finalists when the time comes.

RedPenny landing page with the logo, an illustration of a hand putting a coin into a piggy bank, the words "The easiest way to manage
your financial goals for the year," and a "Continue with Google" button

The Brand

RedPenny didn’t have any branding established. Before continuing onto designing the user experience, I wanted to focus on narrowing the look of the brand. This would also provide some insight into how the client viewed the brand and how they wanted it to be perceived by users, which will also come into play in the user experience.

What I learned from the interview was that the brand should feel delightful, easy, simple, and usable. Users should feel that the app is friendly and stress-free. The brand should combine minimal and simple with playful and fun. Overall, the brand should focus less on money and more on being approachable and trustworthy.

Research

Stakeholder Interview

A discussion with the client provided valuable information on the function they see the app to provide and the direction they are heading for future updates.

The aim of the app is to be a simpler, more approachable “spreadsheet budget” for longer-term savings goals. Need for anxiety-free method of enticing the user to return to help engagement and prevent drop-off. Stakeholders want to focus on three distinct user groups: Financial novice, budget starter, and the informal budgeter. Success metrics: Adoption and Engagement (Monthly active users, user retention and churn rate).

User Survey

User surveys were conducted prior to joining the team. They were conducted through a seven question Google Form sent out to over 20 users. Synthesizing this data provided some key insights into what users wanted from the app.

Users want to find where they can cut spending to maximize savings. Users want motivation to return and features to help follow their budget over its length. Users want suggestions and feedback on their finished budget and what they can do with their savings. Users want a mobile-friendly application.

User Interviews

I conducted a series of 6 interviews to gather qualitative data that we can use to learn about our users and their needs. Some key insights are as follows:

A users' typical long-term goals include saving for large purchases like a car or house. Many users were frustrated with the idea of budgeting being overwhelming, saying things like “I don’t know where to start." Other pain points included not being provided enough encouragement to keep up with an established budget and often being overwhelmed by a flood of information at the start of the process.

Market Research

To familiarize myself with the landscape and gather insights into what features and capabilities other apps have in the marketplace, I performed a Competitive Analysis of budgeting in Google Sheets, Mint, Everydollar, and You Need A Budget.

Products in this category are missing long term budgeting tools. No ability to track long-term progress toward a savings goal. Onboarding is crucial to reduce stress on users new to budgeting. Ability to skip onboarding is essential for power users. Budget visualization is a key feature.

Chart showing competitor analysis of four competitive products

Define

User Personas

Three user personas were created based on the data gathered during the research phase. These three personas represent the three main categories of users that will interact with this product.

We have described these personas as The Financial Novice, The Budget Starter, and The Informal Budgeter. Moving forward we can create with these personas in mind to ensure we're solving their most pressing needs.

New User Flow

Knowing we wanted to focus on the mobile experience I designed a linear New User Flow that included a step by step instructional onboarding experience that leads into the main budget screens. Here we provide the user with a clear path to finishing their budget.

Ideate

Mid-Fidelity Wireframes

Onboarding

Main Budget Screens

Test

User Testing

To perform user testing, various prototypes were created using Figma to test certain flows and features throughout the design process. I conducted 5 moderated user tests to gain data on the Onboarding, Budget, List, and Settings flows.

  • A majority of users tested wanted to see a visualization of earnings, spending, and savings
  • Users were confused by navigation between Budget Overview and Edit Budget screens
  • Users overlooked the Budget Settings icon and misunderstood where it would lead when asked what they expected from it

Implement

Hi-fidelity Solutions

Following results from user testing the header was changed to include a new edit icon that would be more obvious to the user. I changed the overview functionality to a toggle switch to easily find and switch between the overview and budget editing screens. Lastly, I included a graphic chart to visualize savings to spending ratio following favorable results of A/B testing.

No items found.

Conclusion

Final Thoughts

This project was a fun challenge to solve. Visualizing multiple layers of user inputted data proved difficult, but the end solution works well to split the data into organized sections.

The goal was to create an app that's delightful and easy to use for new and seasoned budgeters alike that will also encourage users to return to the app. This was accomplished by creating a smooth onboarding process, an easy-to-navigate budget screen, and a reminders feature that encourages users to set notifications to check in on their budgets at a set amount of time.

RedPenny is now live in the App Store! We're currently working on a version for Android devices, stay tuned.

Red Penny Website

Next Steps

Launch for Android in the Google Play Store

Perform more user tests on the most recent designs and iterate upon feedback

Work with stakeholders to define additional features for following iterations

Add gamification and rewards to provide more incentive for completing budget check-ins

Add advanced data visualization features

Project Overview

For its third consecutive year running, the AT&T Mentorship Program was looking to improve their script submission workflow. In the previous year the contestants were presented a link where they could upload their work. The team manually sifted through hundreds of submissions, nearly a third of which didn't meet the contest requirements and had to be disqualified.

As the program was growing, the number of submissions were expected to increase by at least a few hundred. I needed to find a way to increase the number of qualifying submissions and create a smoother, more informative process to submit.

Challenges

Create a more informative submission process to increase user knowledge and reduce unqualified entries from the previous year's 33%. The process should remain easy for the users to navigate so that the overall number of submissions can increase to at least 1,000.

Solutions

Design a microsite where users have access to all contest information, rules, and requirements, as well as access to the legal contest rules PDF and an FAQ section for further information.

When a user is ready to submit, they will be directed to a white labeled FluidReview form where uploading will take place. This platform will allow a more efficient review process for the team, and make it easier to sort and organize finalists when the time comes.

Process

Research + Define

Assessment

The product needs to lead users to submit their scripts and educate them quickly about what is required to enter the contest. It needs to provide access to specific legal documentation and Lena Waithe needs to be prominently featured, as her role in the program is a big selling point.

The user needs to know how they can enter the contest, what they need to submit to do so, and when the deadline is. They also need answers to any questions they may have.

With this in mind, some of the main features the website must have are:

  • A clear call to action
  • A list of requirements for submissions
  • Answers to frequently asked questions

Implement

Final Design

The CTA under the banner image was simplified so that the link to the official rules was moved below the Requirements section. A countdown was also added above the final CTA to provide a sense of urgency and clarify when the deadline is, no matter the user's timezone.

Conclusion

Results

When the deadline passed, there were a total of just over 2,400 submissions. Compared to the previous year the program saw a 505% increase in submissions and, with only about 300 that didn't meet requirements, a 38% decrease in disqualified submissions. The process resulted in a 78% completion rate in FluidReview.

Final Thoughts

The measure of success for this project was an increase in the number of submissions to at least 1,000 (an increase of 200%) and a decrease in the percentage of unqualified entries from the previous year's 33%. Both of these goals were surpassed, which can be attributed to the process and website I designed.

The single page site focused the information the users needed and funneled them to where they needed to go to submit their work. Using FluidReview simplified the review process for the team and enabled them to read through the thousands of scripts in a relatively short time and keep track of the best submissions. In the end five scripts and their writers were chosen and paired with five up-and-coming directors to bring their scripts to life.

More Case Studies