Java Justice
What if contributing to the local economic growth of developing nations was as simple as a cup of coffee every morning? After traveling to several coffee producing regions in Central and South America, visiting the farms, and hearing about the injustices that the farmers were faced with, the idea for Java Justice was born.
Our customers indicated they like supporting businesses that include charitable giving in the price of the products they sell. How might we curate a coffee experience that allows coffee lovers to give back to the farms that produce the product they love?
What is the interest of curated/fair trade coffee drinkers contributing to the welfare of the source regions of the coffee? What information needs to be included on the site/impact statement for users to feel confident in purchasing from a company/brand? What is the market for curated coffee drinkers purchasing online?
Create a coffee product company focused on sustainable growth and giving back to the local community while serving a great cup of coffee.
Define the user & understand competition In-person and over-the-phone interviews were conducted with three potential users of the website. A series of 11 questions were asked and the interviews were recorded, and online survey was conducted among coffee drinkers. Conducted a competitor analysis to cover off on the current marketplace. Results were analyzed and an affinity diagram and feature prioritization matrix were created to prioritize the features to develop.
Wireframes Sketches and lo-fidelity prototype for mobile and web
Design System Simplify the logo, color scheme, and typography. Use plain language, short sentences, and paragraphs simple words, bullet points, and straight forward direction.
Web development & testing Developed useing Bootstrap and Webflow. Users were given three tasks to complete on the website in order to test the functionality and user experience. These were straightforward tasks such explore information about our farms, shop for coffee, and navigate between the two main areas of our site -- Shop and Explore.
I collaborated with two researchers and a designer to gather and analyze the data and defined the layout. I develop the design system, wireframes, hi-fidelity prototype, develop the shop page useing bootstrap.
Timeline: 4 Weeks
Define the user
Surveys
Coffee lovers are becoming increasingly aware of the issues with sustainability, cruelty, and lack of fairness around the sources of the coffee they purchase. During our surveys and interviews, we discovered that users are more likely to support businesses that give to charitable causes and enjoy being able to use their purchasing power to contribute.
Therefore, we believe coffee lovers would enjoy purchasing coffee from a company that allocates a portion of profits to the direct economic growth of the source regions for each product. We might do this by curating ethically sourced, fair-trade, organic coffee at a price point that allows us to partner with local farms to generate programs that contribute to the economic growth of the region in which the coffee is sourced.
User Interviews
We analyzed the patterns of coffee drinkers to understand the market and if there is a need for our solution. Here is what some had to say.
"I like if you can look it up on social media. You can't always know what it's actually going to... but for every bag of coffee, we will donate X amount of money or we will do XYZ."
"It's very important knowing the coffee I'm purchasing is ethically sourced because farmers that are in third world countries get very little return for their labor."
"I don't buy from an unidentified country. The countries that I prefer are on the continent of Africa, primarily Ethiopia and Kenya, but if I can't obtain coffee from Africa I buy Costa Rican coffee...from those areas, third world country areas.”
Key Insights
- Source of coffee is importanta.
- Price is the main desigion factor.
- More information upfront.
Competitor Analysis: Advantages
- Coffee For the Cause
Allows users to choose what cause they are raising money for.
Custom labels and personal logo design.
Colorado local sourced and roasted coffee beans.
- Rise Up Industries
Free trade coffee from one women's cooperative.
Locally roasted in San Diego.
Sold in stores and online.
Video reviews about how lives have been changed because of this company.
- Refugee Coffee Company
Blog stories capture the importance of getting involved with Refugee Coffee Co.
Donate, merch, and catering give users more opportunities to spend money with Refuge
Coffee-related job creation, job training, social networking, and commerce for refugees
Main Features
We landed on these top features that had the most impact for the user and the company:
Sustainable single serving coffee option.
Map of communities that are supported by the donations.
Web content and packaging reflecting brand transparency.
Wireframes & Design
Our design was driven by making user tasks straightforward and having a visually appealing layout. We used well recognized button menus, and color and imagery to build a warm and friendly vibe to the site.
Disaign Inspiration
The inspiration for the home page came from the original idea of the double function of the company - Selling coffee and Helping the community. We choose a split-screen layout to visualize our dual-purpose better. The shop sells you coffee, and the explore page shows the viewer how we are helping the community.
The shop page features the products based on their source farm in order to keep the focus on the people & stories behind the coffee.
This section is all about the stories - Discovering the people, values, and impact that are a part of Java Justice as a company.
Low-Fidelity Prototype
Mobile Layout
We struggled with how the split homepage would transition to mobile.
Design System
Logo
The logo implements a shield in the symbol of protection. In the center is a coffee bean.
Colors
Colors are vibrant. We, on purpose, stayed away from brown and other generic coffee colors.
Typography
Roboto Slab Roboto Slab has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves.
KarlaIs a simple grotesque font currently popular to match with Roboto slab. The spacing is set a little wide, which makes it easy to read in any size.
Controls
We implemented organic shapes and smooth hoover effects.
Packaging
In contrast to the clean and simple website, the packaging is intricate and complex.
Development & Testing
We decided to experiment and split the development between Caitlin Collins and me. She built the home page via Webflow, and I create the shop page and explore page using bootstrap. Combining them was proving difficult, even though we ware adamant about keeping structuring the layout and the CSS classes name the same. We discovered that Webflow exports with presets we are not able to control. So I modified the bootstrap template to match Webflow.
Home and discover pages designed in colaboration with Caitlin Collins
Usability Testing
Users were given three tasks to complete on the website in order to test the functionality and user experience on the site. These were straightforward tasks such explore information about our farms, shop for coffee, and navigate between the two main areas of our site -- Shop and Explore.
1. The tasks were for the most part completed with ease. A few respondents couldn’t locate how to discover more about the farms when on the shop page.
2. Feedback was also solicited on our aesthetics appeal. Improvement was needed in a few areas:
- Consistency in font faces, font weights, and buttons
- More graphically pleasing directionals
- More obvious call outs for learning more about coffee farms on the Explore Page
Next Steps
There were many features that were not possible to add at the time of development, but are on the roadmap for future implementation. Some of these features are:
- Partner Farms application program
- Favorites - the ability to like and/or favorite a coffee
- Wishlist and Save Cart features
- Bulk ordering for coffee shops, restaurants, grocery
- Subscription coffee service - auto ships based on your preferred dates
- Coffee Club - special surprise selections of coffees from new farms we are trying out each month
- Videos of the local farms and stories from farmers
- Content creating and sharing through our social media and blogs
- Merchandise - hats, shirts, coffee mugs inspired by local artists from each coffee region
- Partner donations - ability to donate separately from purchasing
CREDITS
Research
Angie Sarris
Copy
Elijah Segarra
Design & Development
Caitlin Collins