KLINK Coffee

View Prototype

Project Brief

KLINK Coffee is a non-profit organization that provides jobs and training through their coffee business for people returning home from prison. They are a coffee re-seller, that deals with shipping, receiving, packaging, and delivery. Their goal is to help make communities safer, families stronger, and also end the stigma around ex-inmates and the hurdles they face, by providing them with jobs and training.

Project Goal: Design a website for KLINK that is aesthetically pleasing, user-friendly, and outlines all the features that KLINK has to offer, as well as its social and economic impact.

The design process:

Ultimately the end goal is to convert users to:
‍

Research

Overview
I conducted user interviews with 7 potential users to learn how decisions are made when shopping, what makes or breaks a memorable shopping experience, and what frustrations shoppers experience.
Insights
‍Shopping Habits
• Social impact, quality of the good, and price were the most important factors in making a purchase. Unlike social impact, quality of goods and price were negotiable and not fixed depending on other factors.
‍
• What makes a good shopping experience is when the expectations are met. When the shopper’s expectation is not met, then trust is lost and buyer’s remorse ensues.
‍
• Shoppers want to make smart informed purchases to determine the value of a product.

‍Non-profits and Social Enterprise
• Transparency in where the money is going (very important)
‍
• Users needed to know the size and sustainability of the impact. This helps determine the legitimacy of the organization.

‍What about coffee?
• Coffee drinkers looked at flavours when they were buying coffee beans.
Challenges KLINK is Facing
1. Money and Shop — Selling more product means more money can be put into their programs and keeping KLINK Coffee afloat. At the time of the kick-off, there was enough funding to sustain the business until April 2019. They primarily relied on the profits from sales because funding and donations were not reliable.

2. Staff size — The small budget limited the staff’s working hours and therefore impacted productivity. Including the two volunteers, KLINK had a staff size of five (most of which were working part-time) and it was necessary for each person to wear multiple hats in order to do the tasks needed to keep the business afloat.

Secondary obstacles and frustrations:

3. Employment Partners — Currently they had only one employment partner who they worked with. Having more employment partners will help KLINK be able to fulfill its social mandate.

4. Stigma and Bias — There is a social bias and stigma associated with ex-convicts that stops people from wanting to support the cause. If we could address this, we could potentially increase sales conversion.
Competitive Analysis
4 social enterprises and 1 nonprofit websites ranging from small to international were studied to see what information was offered and how it was communicated to better understand information hierarchy. The organizations I looked at were:
Toms Shoes website: Under the hero, there is powerful messaging that explains what your purchase can do. The message relates to content found in hero.
Oliberté showed a cycle that explained the kind of impact a user can make with their purchase.
Key Takeaways
1. In the hero or just below it, all of the competitors clearly defined the problem they were addressing, often combined with powerful messaging on not only the homepage but almost all throughout the website.
‍
2. Program models were used to explain how the organization worked. Also easily explained the size an impact a user can make with such little effort. It’s a motivating model that encourages user engagement and also works to convey transparency.

Planning

User Personas
Based off what insight I gained through the research, I created two distinct user personas.
User Persona 1
User Persona 2
Frustrations (Painpoints)

• Trust issues with non-profits over lack of transparency
• Unaware (and hence upset) where their money is being allocated to
• Used to receiving poor customer experiences
• Buyer's remorse

User Stories

• As an online consumer, I want to have a full understanding of the product I am purchasing, as well as where my money is being allocated (in the case of a non profit), so that I can feel good about the purchase I have made.

Solution

Design a website for KLINK that offers a comprehensive and intuitive e-commerce user experience, while also conveying the value of their purchase, and exactly where their money is being allocated.

Design

Overview

Planning commenced with searching the web for professional looking design inspiration, being in the elements, colour palettes, logos and typography used. Pinterest, Dribbble and other websites are among the few sources I used to draw inspiration from. Finally, I compiled my inspiration onto a mood board.

Moodboard

I used 1369 Coffee House and Costa Coffee for design inspiration because I liked the colour scheme used in the websites. I was initially going to use a burgundy red with a variation of beige, but ended up going with a brown with a variation of beige.  I also liked how both 1369 Coffee House and Costa Coffee both had a comforting feel to their website, a theme I also wanted to replicate in my own website. I used the Elm Coffee Roasters and Lonsdale Street Roasters for the general layout of the site as I liked how they both used the element of simplicity as a theme for their website, again an element I wanted to replicate in my own design. I chose the coffee beans and the bean workers for the mood board because KLINK isn’t just about the coffee itself, but the story. KLINK coffee is all about the social and economic impact behind the coffee, so I selected these images as they speak more to the story behind the coffee rather than just the retail coffee itself. Finally the last image is an abstract representation of hope and possibility, the two key themes of KLINK I wanted to convey throughout the design.

Style Tile

I went with brown for the primary colour as it coveys Wholesomeness, Healing, Grounding, and Warmth, all characteristics that spoke volume to KLINK as a brand and what it stood for. Brown also went well with the design as KLINK is a coffee company and coffee is of course brown. I used yellow as the accent colour as it was harmonious with the brown-beige colour scheme, and is also a warm colour which evokes a calm and soothing feel. I wanted the user to feel at ease when on the website. For the typography I used Montserrat for the header and Avenir for the body. Montserrat brought more personality to the website/brand and Avenir was very simplistic which worked perfectly for the body text. For the icons I kept the thickness consistent among all icons.

Testing

During testing, the nav needed some TLC. I reflected on what the nav menu meant to users and the role it could play in how the user understood the organization.

Shop: Needed to be first so that KLINK could be identified as a social enterprise. At the end of the day, I wanted people to make purchases.

‍Donate: Not everybody drinks coffee. I needed to find a way for people to contribute to solve the client’s main pain point — money. This is why Shop and Donate had to be first.

‍Our Impact: Users want to know the value of the product. The second persona found transparency of an organization to be important as well as knowing the lasting impact of an organization. Shop and Donate explained the “What can I do” and Our Impact followed to explain the “Why should I do it”. The page humanizes ex-inmates and tackles the stigma and bias against them.

‍About: Not as important in giving value to the product or the organization as Our Impact but provides legitimacy to the organization.

‍Join Us: The term “Join Us” was chosen because the name is a call to action. This page not only serves as a contact page but also lists the various ways to contribute. It provides solutions to the obstacles that interfere with KLINK achieving their goal — volunteers, more employment partners, and corporate sales.

In the product listing page the list view was abandoned for a card style to save space and make it easier to do a quick glance at the variety of products offered. In testing, users expressed that the button would not be needed in a card layout because they assumed the photo would be clickable.

Conclusion

I was able to provide Mark with a website that was aesthetically pleasing that effectively showcased all of KLINK’s products and social and economic impact. I learned a lot through this project and it was an absolute pleasure working with Mark. I look forward to seeing KLINK grow as a social enterprise.