CoFair

CoFair is a mobile application designed to informs consumers about FairTrade coffee brands who support living wages directly benefitting workers and their families.

CoFair got into TOP 20 in this Challenge among 432 participants that joined this jam 🎉🎉

Duration

1 Week

Task

Design a mobile app to educate consumers and encourage support to FairTrade brands, as part of the Adobe Creative Jams

My Role (Team of Two)

Market research

UI/UX Design

Interactive prototype

Tools

Adobe XD, Figma, Miro

"Coffee is the most valuable and widely traded tropical agricultural product with around 125 million people dependent on it for their livelihoods. "

---- FairTrade Canada

Challenge Brief

Within one week, design a mobile app that informs a consumer segment about brands who support living wages directly benefitting workers and their families.

The solution must create a way to view measurable impact and/or progress

Solution 💡

CoFair is mobile app that allows individuals to:

  • Know more about fair trade coffee and the story behind it                            
  • Take actions to participate in supporting fair trade coffee brands                                                 
  • See quantifiable impact of their support

Achievements

During this one-week design challenge, we:

  • Applied "The Five Elements of UX Design" framework to inform our process.
  • Executed end to end. Delivered within one week.
  • Got into Top 20 with this mobile app design

Design Process

The Five Elements of UX Design

01 | Business Strategy

We decided to focus our scope in Fair Trade coffee, since we are both coffee-lovers and narrowing down the scope helps us better construct the solution.

What does business/producers need? 💼

Due to time constraints, we explored the business objectives and user needs in the fair trade by doing secondary research so that we better understand the problem scope.

1. Trusted products - improving productivity and quality 🔗

If a farmer has a better income it means he or she has more money to buy food and more money to invest in growing more crops. It is found that Fairtrade coffee and bananas sales growth outperformed both conventional and organic equivalents.

2. Environmental sustainability 🔗

Fair trade standards promote environmentally friendly farming practices and ensure that factories aim to reduce emissions and energy usage.

3. Safe and better working conditions

All fair trade farmers and workers benefit from regulated work hours and a policy prohibiting discrimination, child labor, and slave labor.

What do consumers need? 👫

More than 70% of Canadians who buy Fairtrade certified products would recommend them to others. Half of Canadians said that fair trade reflects their personal values.

1. Obtain information about Fairtrade coffee 🔗

Consumers who care about the economic, environmental, and social effects of their purchases want to look for the fair trade label when shopping.

2. Consume sustainable and ethical products

By choosing Fairtrade products, small-scale farmers become more income-secure and less vulnerable to market uncertainty. It has also enabled communities to enjoy better infrastructure, services and economic opportunities.

3. Aware of their impact 🔗

Consumers want to know they are helping contribute to a better world and connect with the people who grow the product they enjoy and need.

Possible Pain Points 🤔

Since we didn't have enough time to do user research, we came up with some possible pain points based on the consumer needsfound in the secondary research and our assumptions:

Pain Point 1: Lack of information

Only few apps provide information about sustainable and ethical Fairtrade coffee brands

Pain Point 2: Too much text

Consumers need to read lots of text in order to understand how Fairtrade works

Pain Point 3: Hard to see measurable impact

It is hard to see their contributions towards Fairtrade products

Pain Point 4: Accessibility

For consumers who are not familiar with Fairtrade, they need to spend time searching Fairtrade brands and looking for where they can purchase these products

Personas

Based on the these findings, persona was created to help us understand representative users. The persona is consumers who are interested in fair trade coffee, ethical consumption, people who want to find out about companies before purchasing, and people who have already heard about fair trade but have never purchased it.

Design Goal ⭐️

How might we increase the awareness of Fair Trade Coffee and provide quick access for them to support workers who produce Fair Trade Coffee products?

02 | Scope

Define Key User Stories

Key user stories were defined and served as a springboard for us to ideate and arrive at the most optimal solution.

Story 1: Jason obtains information about fair trade coffee and the story behind it ☕️

Including how fair trade coffee works, stories behind workers, and the benefit to support it

Story 2: Jason finds a fair trade coffee brand and its nearby shops 🛒

Provide quick access for users about available fair trade coffee brands and where they can find and purchase them.

Story 3: Jason participates in fair trade coffee events or workshops 👫

Showcase fair trade coffee campaign, events, and community

Story 4: Jason views his impact over time and redeem points for discount vouchers🤩

See measurable impact of their actions on the environment and workers around the world, get rewards for their support

Feature Roadmap

We want to find out what are the features and contents needed to address the pain points in each user story. These features are what users need to reach the objectives.

Exploration - Reward System

We want to find out what are the features and contents needed to address the pain points in each user story. These features are what users need to reach the objectives.

03 | Structure

Information Architecture

We defined the arrangement of content elements, how they are organized, to facilitate understanding. Also, it makes it easy for us to understand and move through the information presented.

04 | Skeleton

Sketches

With all features in mind, low-fidelity sketches were created in Miro.

05 | Surface

UI Design

First, we named the application CoFair as a combination of "Coffee" + "FairTrade". We decided to use dark brown and green as the primary colours to create trust and match the theme, For the typography, we used sans serif to ensure readability and give an informal, friendly vibe.

Final Design

01/06

Onboarding

Coffee elements were added throughout the Onboarding process to enhance the theme of the app.

02/06

Meet the Farmers

We used more pictures and infographics to present the stories behind fair trade coffee and the farmers in a more visual way, so that users can be empathetic with them.

03/06

Brands

Quick access to all fair trade coffee brands and nearby stores to purchase them. Users can also access the online store through links.

04/06

Participate in FairTrade Events

Browse available fair trade events and sign up for the events easily

05/06

Redeem Rewards

Introduce the "coffee passport", redeem limited edition stamps and make collections. Users can also redeem for discount vouchers.

06/06

Impact Dashboard

Understand the impact made by every purchase and see the difference!

Check the Full Prototype 👉

06 | Next Step

Future Improvements

After submission, I would like to make several improvement and feature expansion to this project.

1. Increase Brand Transparency

Provide more detailed information of each fair trade coffee brand regarding sustainability, equality, transparency, employee benefits, etc.

2. In-app Shop

It can increase the efficiency of browsing between different brands, comparison, and purchase.

3. Impact Calculator

The current impact dashboard only display information to users but not involves user interaction. I will consider modify it into an impact calculator to calculate the impact users made on both purchasing and attending events based on their input.

08 | Reflections

Reflections 🤔

The best designs come from collaboration. My teammate and I had a really efficient and organized collaboration during the design process. We each take part in the one we are good at and successfully applied our advantages.

The best designs come from collaboration. My teammate and I had a really efficient and organized collaboration during the design process. We each take part in the one we are good at and successfully applied our advantages.

Prioritize and show the best part of the design is important. Since judges only have limited time to look at each solution, it is important to prioritize the first-hand user experience in order to differentiate from other teams.

Other Awesome Projects

TimeCookie

A solution designed for UofT students to help them start early on every school task with the task reminder groups

Steam - Usability Test

Understand usability issues with Steam and discover whether users can navigate without assistance and doubts