Project Overview

The objective

To design a mobile coffee app and prototype where users can order a cup of coffee.

the challenge

This project was tackled in 2 parts and assigned on my first week as a UX Designer.

• Week 1 - Create a low fidelity mobile app prototype 
• Week 2 - Iterate and mock up key screens

the solution

A subscription based coffee app that connects coffee enthusiasts to local coffee shops. BrewHub supports local businesses in an all-in-one platform.

Research & Exploration

week 1

listening to users

user interviews & contextual inquiry

To define user problems and needs, I conducted user interviews and contextual inquiries at nearby coffee shops. Listening to users was the quickest and most organic method in finding a pain point/need to design for. I interviewed 6 coffee goers and baristas at:

• Houndstooth
• Hideout
• Medici
• Starbucks

discovering needs

Mind Mapping insights from field research

I mind mapped insights from user interviews to quickly find trends and organize. This information helped me to understand user motivations to consider during ideation. I found that users valued:

• Convenience
  • Is the coffee shop nearby?
  • Am I able to grab a cup without leaving the house, office or car?
• Customer Service
  • Fast and friendly
  • Personal - connecting with the barista
  • Educates customers on coffee types and the brewing process
• Customization
  • Options to add or exclude flavors and items
• Quality
  • Best in brew or most popular
  • New coffee beans

identifying pain points

insights from field research

This information helped me to define user problems. I found that users were frustrated with:

• Long lines and wait times to pickup and pay
• High prices
• Fussing around with their wallet/bag at the register when paying
• Keeping track of their favorite coffee shops
• Limited number of coffee shops with loyalty/reward programs

aha! a coffee subscription app?

the idea and why

During user interviews, a number of people voiced a need for a 'Class Pass' app, but for coffee. Based on research, I found that the main problem was that users wanted to have their payments, favorite coffee shops and an online ordering tool in one place - quick, simple and efficient.

Rapid Paper Prototyping

week 1

translating ideas onto paper

sketches

Based on user needs and points, I sketched ideas onto paper - focusing on the user need for a coffee 'Class Pass' app. I wanted to focus on app usability and functionality so I did not include an app name into the sketches.

Let's see this in action!

the prototype (psst ... it's interactive)

In order for this to act like a real mobile app during user testing, I created a prototype using Marvel.

Click or tap the play button.

Interact as if you were a new user!

understanding design changes

user testing insights

I user tested coffee enthusiasts with the above prototype, and found that users:

• Loved the idea of a coffee subscription app
• A majority logged in using their social media account
• Thought the checkout pages were cluttered
• Enjoyed having the option to pick up or deliver
• Loved that you can track your order

Due to time constraints and minimal negative user feedback, iterations were addressed in high fidelity mock ups during Week 2.

Research & Exploration

week 2

iterate existing or create new?

S.W.O.T. Analysis & Insights

I performed S.W.O.T. analysis to understand whether my subscription based coffee app would be a viable product/business model to tackle. Based on my S.W.O.T. analysis, I found that there were many strengths and a few weaknesses that can be easily addressed. I decided to pursue my idea because:

1. Competitor subscription coffee apps are not in the area
2. Help people in a larger scale by supporting local businesses
3. I can simplify features and process based on research & user testing

identifying features & opportunities

comparative & competitive analysis

I conducted comparative and competitive analysis to discover features that users found useful/not useful, and opportunities to differentiate my app from competitors. I found that CUPS and BrewPass were competitors in the subscription coffee app market.

synthesizing competitor features & opportunities

Takeaways from comparative & competitive analysis

Insights from comparative & competitive analysis:

• Defined the features to include into my design
  • Prepaid plans
    • Saves users money and consolidates payments
  • Filter options to include dietary restrictions
    • Consider user accessibility
  • Show how much users are saving
    • Increase user trust by displaying honest & valuable information
  • Link to coffee shop contact info and website
    • Increase user freedom and confidence by allowing them to validate information directly
• Influenced the design interface
  • Clean with recent coffee shop pictures
  • Easy to understand buttons
    • Increase user trust by showing real pictures and meeting user expectations
• Validated that a subscription based app is useful/valuable to users

who, motivations & behaviors?

survey

I created a survey using Google Forms to define my target audience, and to understand their motivations/behaviors. For survey participants, I targeted the Millennial Generation (18-35 years) based on the demographic of users during user interviews in Week 1.

Understanding the users

survey analysis & takeaways

• Survey results validated target user demographics
  • Working and/or studying Millennials (18-35 years)
  • Social media and tech savvy
    • Use mobile devices for pick up/delivery
  • Majority drink local, gourmet coffee
  • Located in Austin, Texas
• Discovered additional user needs/pain points
  • Want a simple, enjoyable coffee app experience
  • "[Coffee apps] Seems like a pain, seems annoying."
  • "[Starbucks App] It's confusing."
  • "[Coffee shops] Don't want to fuss around at the register."

subscription commerce - viable?

A business model to pursue or not

Although field research and S.W.O.T. analysis revealed a coffee subscription app need, I had to validate:

1. If subscription commerce is a viable business model
2. The subscription commerce value proposition to users and to businesses (local coffee shops)

I gathered secondary online research to answer these questions, and to determine if I needed to change my business model.

subscription commerce - valuable?

discovering the user & business value

According to a Global Retail & Tech Report published by the FBIC Group, subscription commerce is valuable to both users and to businesses.

•  Customer (User) Value:
  • Convenience
    • Offer flexibility, variety and simplicity with ease
  • Discoverability
    • xposure to new experiences
    • Feeling excited and adventurous
  • Curation
    • Offerings tailored to preferences

Defining the UX

week 2

stepping into user shoes

personas

Based on research, I developed 3 personas to understand user journeys and to guide steps in user flows.

understanding user journeys

user flows

Personas helped me to understand different journeys to achieve different goals based on research. I created user flows to reveal key screens for mock ups.

building the structure

wireframes

Based on research and user flows, I built wireframes using Balsamiq to visualize the basic app structure. The wireframes helped me identify the key screens for mock ups.

week 2

Establishing the look

mood boarD, Colors & font

I created a mood board to define the look of my app, and enforce visual consistency across screens.

When searching 'coffee' in Google and Pinterest, I found lots of browns, creams and wood textures. I chose to mimic those colors and textures to evoke a warm, inviting and luxurious feel - similar to when you walk into your local gourmet coffee shop.

I chose Hirakaku as the font because it was clean, modern and unique. 

"what? My name is. who?"

naming brewhub

It was difficult to come up with a name that was memorable and catchy.

I researched words related to 'coffee,' and immediately 'brew' stuck out because it is more drink agnostic than coffee. I realized that users could also order smoothies or juices with my app, and I wanted a name that was drink agnostic but focused on coffee.

I thought of 'hub' when I contemplated the social value of my app - everything in one place, where like minded local coffee shoppers can share their favorite places.

bringing brewhub into reality

high fidelity mock ups - version 1

Based on user flows and wireframes, I designed high fidelity mockups of key screens using Sketch.

I chose the below screens because:

1. Contained the most content
2. Progressed the user to their goal

refining the vision

iterations

After user feedback on my mock ups, I decided to make the following changes:

•  Add shadows and depth to buttons
  • Users did not know what was 'clickable'
• Change the color of call-to-action buttons 
  • Users did not immediately go to CTAs
• Add titles to pages
  • Change 'BrewHub' at top of Search Locations Page to 'Location'
  • Increase user trust by validating their expectations
• Minimize content in top navigation on Home Page
  • Reduce user cognitive load
  • Focus on key tasks - searching and/or filtering

the final mock ups

I incorporated changes from user feedback into the final mock ups. Based on those changes, I created mock ups of additional screens to visualize my app holistically.

Retrospective

visual design concepts & sketching

Thanks for stopping by!