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.
January 2023 - February 2023 (2 months)
UX Researcher, UI Designer
Figma, FigJam, Miro, Photoshop
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.
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.
I used the design thinking process to guide my project.
I began by researching the problem space, and how shade-grown coffee helps birds. I learned that:
Next, I searched for the social and emotional factors that drive sustainable purchases:
I conducted three 30-minute interviews over Zoom with coffee drinkers in the US, and an email interview with a research ecologist at the Smithsonian Institute, which issues the Bird Friendly certification. This helped me understand the pain points of sustainable coffee farmers, and how they might also be served by a design solution.
"I don't understand the connection between coffee and birds." - Quote from user
Qualitative Research: Interviews
Creating personas helped me better understand my intended user group, eco-minded coffee drinkers in the US.
Next, I wrote user stories and created a journey map to visualize how customers might interact with my product.
Using these tools to further articulate the core problems that my design could solve, I compiled a list of major pain points and solutions.
Major Pain Points
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.
An analysis of four Bird Friendly coffee brands gave me an understanding of existing solutions, and revealed opportunities for differentiating my designs.
Using the "Crazy 8's" exercise, I sketched eight ideas in eight minutes, focusing on quantity over quality. This allowed me to think freely and withold judgement.
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:
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.
Iterating on the design
Insight + solution: Users found the "Seek" button confusing. I decided to remove it since it felt too busy alongside 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 app.
The coffee packaging would include a QR code that could be scanned in-store, allowing for instant consumer education via an informative video on the site's home screen (though most likely, shoppers would watch this later).
Since research showed that users were confused by shade certifications, I decided to leave off the Bird Friendly seal in favor of a bird-themed design that I hoped would quickly illustrate the concept.
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.
A sticker sheet helped keep my designs consistent.
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.
Mockups — key screens
Adapting the design for web
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.
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.
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.
The "Track orders" option is featured at the top of the account page for quick access.
Users can adjust the item quantity and frequency of their orders, and delete or add new subscriptions.
Kill your darlings
Everyone wants to be clever, but the old writing advice also rings true for UX; it's better to leave out flowery language in favor of more straightforward words and phrases, especially for navigation 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. While some of my early concepts were good in theory, spending time researching the problem space helped me narrow my focus to create solutions with practical applications.
Ask thoughtful interview questions
Asking about people's sustainable shopping habits required some consideration, 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.