Kope House
Team size - 2
Sept 2023 - Mar 2024
Project Overview
This case study covers the thought process of major design decisions I made working at a start-up coffee company known as Kope House.
Problem
Kope House wants to sell a quality coffee experience for a fraction of the price. Despite this ambition, Kope House, hindered by low website traffic, had not previously prioritized improving new features for its website.
1.0 Research and Discovery
Creating a Project Brief for Stakeholders
I prepared detailed questions that would allow me to understand how to develop the project. Some examples include:
1. What is the problem or need you want to solve for the website?
2. Who is the website's target audience?
3. Are there any competitors whose websites have functions you'd like your website to have?
Competitive Analysis
Examining Coffee Movement and Nomad Coffee was a fun challenge because unlike conventional e-commerce websites, these brands focused mainly on 3 goals: location info, menu items, and services. The websites aimed to give users information, instead of a product.
Heuristic Evaluation & Usability Testing
I gathered 4 participants and ran usability tests with them. I gave my testers 3 different tasks and asked them to talk out loud, explaining their thoughts out loud.
Task 1: Please add a product to the cart and go to the check out page.
Task 2: Contact the company and fill out each field with information.
Task 3: Please add multiple products to the cart and try removing items on different pages.
Journey Mapping and Personas
I created 2 journey maps using the "Jobs To Be Done (JTBD) framework" to understand my target audience better.
2.0 Design
User Flows
After breaking down the usability issues with competing websites, I made diagrams based on the impact to functionality of using Kope House as determined by the average user, and how important that particular problem would be to the user.
Low-Fidelity Prototyping
Joining the Newsletter
I designed the newsletter feature in a way that allows users to sign-up easily. Having the user type in their email is a quick solution that does not cause too much friction and irritation.
Making Quick Changes with the Cart Icon
From what I gathered from the user tests, customers often change their minds about the choices they made. Having a cart button that is accessible on all web pages allows users to remove products from the cart easily.
3.0 Validation and Testing
User Testing
I conducted a usability test with 3 participants on usertesting.com. I opted for a card layout to make the experience more interactive.
Participants notified me that there was no friction when signing up for email alerts. 4 of the 5 participants mentioned that an email signup feature could be smaller and put into the footer section. For the final designs, I decided to utilize the screen real-estate for more important functions.
4.0 Final Style Guide and Development
Allowing Users to look at Products
Based off of the mobile touch-point competitive analyses I conducted, large images spanning the entire page was best for user visibility.
Image Description Micro-Interaction
During my Nomad Coffee usability test with 2 participants, I learned that users were confused about the products listed on the site. Having no description and additional info created confusion for the user.
This feature that I developed allows users to learn more about the image.
Mission Statement Landing Page Design
During the second round of usability tests, users stated that they appreciated the large visual images and videos because it gave off a personable feeling that made them want to explore the site.
Image Gallery Design
A key insights I learned during my competitive analyses was that there were no images of the coffee making process. I wanted to incorporate a compilation of images that show the brand's identity and craftsmanship.
5.0 Reflection and Next Steps
There are so many positive insights from design auditing and analyzing competing companies
The most impactful aspect of this project was uncovering both the positive and negative features of competing websites. While examining Coffee Brands like Coffee Movement and Nomad Coffee, I discovered the importance of enabling users to change their minds easily. It's essential for users to have the ability to remove items from their cart, regardless of the page they're on. Unfortunately, Nomad Coffee struggled with this functionality, as there were several pages where users couldn't interact with the cart to remove items.
Next Steps
For the future, I will run usability tests with my 2 stakeholders and 3 non-biased participants. They will demo and test functionality of the current website. With the insights gained from those tests, I will re-design the current website with new visuals backed by strong feedback and insights.