Winter, 2022 - 2023

A coffee brand to aid migratory birds

view prototype

SUMMARY

For the final project of my UX design certificate program from Coursera, I created an online shopping experience for a coffee brand that sustains habitat for migratory songbirds.

My Role

Strategy Responsibilities

  • Conducted user interviews
  • Researched eco-friendly coffee brands and to understand the competitive landscape and identify market gaps
  • Developed user personas and journey maps to create user flows and a sitemap

Design Responsibilities

  • Designed all web pages and mobile screens
  • Created branding and designed packaging
  • Performed usability testing
front view of canopy coffee mobile app screens on phones

THE Challenge

75% of the world's coffee production destroys critical habitat for migratory birds. Smithsonian Certified Bird Friendly coffee helps preserve this forest-like habitat through stringent sustainability standards. But getting people to buy it and similarly certified brands has proven difficult. Most people are unaware that shaded coffee farms provide the wintering grounds for many migratory songbirds.

My Goals

Design a user experience for a Bird Friendly coffee brand that helps educate and inspire new customers, increasing awareness of the issue, and strengthening support for farming practices that preserve these key habitats.

front view of canopy coffee mobile app screens on phones

Research

Qualitative Research: Interviews

I conducted three 30-minute interviews over Zoom with coffee drinkers in the US, an an email interview with a research ecologist at the Smithsonian Institute, which issues the Bird Friendly certification. This helped me understand the challenges facing sustainable coffee farmers, and how they might also be served by a design solution.

  • Many buyers don't know what shade-grown coffee is, let alone Bird Friendly coffee, and are confused by various shade certifications.
  • Shoppers feel more confident purchasing products certified as fair trade and organic.
  • A better understanding of how shade-grown coffee helps birds could persuade more people to buy it.
  • Farmers at higher elevations who grow under a dense and diverse shade canopy may experience lower yields, and higher incidence of the "ojo de gallo" fungus.

Competitive Analysis

An analysis of four Bird Friendly coffee brands gave me an understanding of existing solutions, and revealed opportunities for differentiating my designs.

table with competitive analysis findings

Gaps Identified

  • Compelling explanation of the issues not featured prominently
  • Many lack a mobile app
  • Inconsistent visual designs
  • Lack of blog or written content, a missed opportunity to deepen engagement

Synthesizing research

Personas

Creating personas helped me better understand my target user group, eco-minded coffee drinkers in the US.

a user personaa user persona

Journey Mapping

Next, I wrote user stories and created a journey map to visualize how customers might interact with the product.

a user journey map

Pain Points

  • Coffee drinkers aren't educated about Bird Friendly Coffee
  • Bird Friendly coffee isn't easy to identify or find on shelves
  • Lack of awareness of migratory songbirds and the threats they face

Proposed Solutions

  • Include an informative video on the homescreen that explains the issue
  • Create packaging that features birds and illustrates the concept of a shade canopy providing habitat
  • Include a section about biodiversity loss and other environmental factors harming birds
  • Create a screen for farmers with links to market incentives, cooperatives, and other resources

Weighing my Options

I decided to focus on the problem of customer education, and create an experience centered on spotlighting the issues, and providing inspiration.

This was slightly challenging, as I saw a real opportunity for a digital platform that could help coffee farmers access resources and incentives for growing sustainable coffee and other crops. For the scope of this project, however, I decided to stick with my original concept, which remained a unique challenge.

designs

Crazy 8s

Using the "Crazy 8s" exercise, I sketched eight ideas in eight minutes, focusing on quantity over quality. This allowed me to think freely and withold judgement.

pen drawing of crazy 8s exercise

User Flows

I selected several ideas from my brainstorming session, including a news feed, bird tracker, and bird cam. Since these were interactive and could be viewed throughout the day, I decided on a mobile-first approach for the design process, and diagrammed how each feature would work on the app.

A map screen would allow users to track the spring and summer birds passing through their area:

A user flow showing the migration map feature

Paper Wireframes

After sketching wireframes and creating a low-fidelity version of the app, my prototype was ready for testing.

a sketch of wireframes for the mobile app

Testing the Low-fidelity Prototype

I conducted an unmoderated usability study of the prototype, and organized the data I gathered into an affinity diagram. I then prioritized the insights I found using a P0-P2 scale. Since there were no P0 insights, I began with P1 and made the necessary improvements.

an affinity diagram showing user feedback.

Improving the Design

Insight + Solution: Users found the "Seek" button confusing. I decided to remove it since it was competing with the "Shop" button.

the old home screen and new home screen. the seek button has been deleted.

Insight + Solution: There was no option to continue shopping once an item was added to the cart, so I added a screen between the "Add to cart" and "Cart" pages with this option.

the old add to cart flow, where there is no option to keep shopping.the new add to cart flow, with the option to continue shopping after adding an item.

Insight + Solution: There was no way to contact customer service, so I added a "Contact us" and confirmation screen.

A contact us screen and thank you message.

Insight + Solution: Users wanted more checkout features, such as the option to send their order as a gift, a confirmation number, and an emailed receipt.

Newly added send order as a gift screens.

Insight + Solution: Users wanted information on more ways to help birds, so I added a screen with some tips.

Newly added more ways to help screen.

Refining the Design

I began the high-fidelity design phase by creating packaging mockups to establish a color palette for the brand.

Canopy coffee packaging mockups.

Next, I created several versions of the home screen in different fonts and colors. After getting feedback, I chose a deep green background, which seemed to welcome viewers into the forest canopy.

Canopy Coffee mobile app screen iterations

Sticker Sheet

A sticker sheet helped keep my designs consistent.

A sicker sheet showing colors and typography.

Accessibility

To ensure accessibility, I checked to make sure my colors were compliant with the AA category of the Web Content Accessibility Guidelines (WCAG 2.0). Design principles like hierarchy, scale, repetition and proximity helped create a readable and user friendly design.

Key Screens

Various Canopy Coffee app screens on mobile phonesfront view of canopy coffee mobile app screens on phones

Web Designs

While the purpose of the mobile app was to educate and inspire new customers, the website would focus on account related tasks like managing subscriptions and tracking orders.

Sitemap

A sitemap.

Wireframes

I used a tiered layer cake layout on the home screen to present the site's unique features.

A wireframe sketch of the desktop homepage.

A side menu on the account page allows members to complete a variety of tasks.

A wireframe sketch of the track orders desktop page.A wireframe sketch of the manage orders page.

demos

VIEW PROTOTYPE

Migration Map

This location-based feature lets users track the birds that migrate through their area.

Animation showing migration map.

Stories and Root Issues

A latest stories menu features articles about migratory birds and related topics. Root issues screens highlight problems associated with deforestation.

Animation showing stories and root issues feature.

Shop and Checkout

Shoppers can choose from several types of coffee.

Animation showing shop and checkout flow.

Track Orders

The "Track orders" option is featured at the top of the account page for quick access.

Animation showing the track orders feature on desktop.

Manage Subscriptions

Users can adjust the item quantity and frequency of their orders, and delete or add new subscriptions.

Animation showing manage subscriptions flow.

takeaways

Kill Your Darlings

Everyone wants to be clever, but the old writing advice is also true for UX; it's better to leave out flowery language in favor of more straightforward words and phrases, especially for navigational elements like menus and buttons  (I think Oscar Wilde said that). It also helps to be able to shift gears from one idea to the next. Spending time researching the problem helped me narrow my focus to create solutions with practical applications.

Ask Thoughtful Interview Questions

Asking about people's sustainable shopping habits was tricky, since I wanted to pose questions in a way that would put participants at ease, and elicit an honest response. Understanding others and carefully ordering the questions helped me gather meaningful insights.