Crafting the Design Systems and UI for Kope House's Website
Role:
UX Designer, UI Designer, Branding, Web Development
Tools:
Figma, Adobe After Effects, Usertesting.com
Project Duration:
4 weeks
Summary:
Kope House does not have a large clientele and is hindered by low website traffic. They had not previously prioritized improving new features for its website. I designed a responsive website for both mobile and desktop devices. During this project, I was responsible for branding, visual design, and design research.
The Goal
How Might We create a coffee website that allows users to find upcoming event information with zero pain-points and friction?
IN A RUSH? JUMP TO FINAL PROJECTThe Insights That Shaped Our Design Goals
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.
Creating Diagrams of the User Experience
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.
Second Round Usability Test Insights
Second Round Feedback
I conducted three rounds of usability tests with five usertesting.com participants. In the second round of testing, I learned that users look at page content from top to bottom. Easily scannable pages were very important. I chose a card design style to have the hierarchy put emphasis on the coffee's photography and imagery.
Newsletter Signup Feedback
Participants notified me that there was no friction when signing up for email alerts. There were no red error notifications when typing out incorrect emails.
Additionally, 4 of the 5 participants mentioned that an email signup feature could be smaller and put into the footer section.
Final Designs for Responsive Mobile and Desktop
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 usability tests, I learned that users were confused about the products listed on the site. Having no product information led to confusion.
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.
Results and Scale
Increase in Exposure
Designed & developed 3 responsive UI/UX interfaces (iOS, Android, Web, Tablet), streamlining cross-platform usability and increasing organic traffic by 180% within 1 month.
Social Media and Brand Improvement
Orchestrated branding and design system improvements, driving a 220% increase in social media engagement and 70% more positive brand mentions post-launch.