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
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.
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.
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.
Journey Mapping
Next, I wrote user stories and created a journey map to visualize how customers might interact with the product.
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.
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:
Paper Wireframes
After sketching wireframes and creating a low-fidelity version of the app, my prototype was ready for testing.
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.
.jpg)
Improving the Design
Insight + Solution: Users found the "Seek" button confusing. I decided to remove it since it was competing with the "Shop" button.
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.
Insight + Solution: There was no way to contact customer service, so I added a "Contact us" and confirmation screen.
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.
Insight + Solution: Users wanted information on more ways to help birds, so I added a screen with some tips.
Refining the Design
I began the high-fidelity design phase by creating packaging mockups to establish a color palette for the brand.
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.
Sticker Sheet
A sticker sheet helped keep my designs consistent.
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
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
Wireframes
I used a tiered layer cake layout on the home screen to present the site's unique features.
A side menu on the account page allows members to complete a variety of tasks.
final designs
demos
Migration Map
This location-based feature lets users track the birds that migrate through their area.
Stories and Root Issues
A latest stories menu features articles about migratory birds and related topics. Root issues screens highlight problems associated with deforestation.
Shop and Checkout
Shoppers can choose from several types of coffee.
Track Orders
The "Track orders" option is featured at the top of the account page for quick access.
Manage Subscriptions
Users can adjust the item quantity and frequency of their orders, and delete or add new subscriptions.
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.
.jpg)
