Optimizing and redesigning a coffee brand’s responsive website
Company: COBA Coffee
Project Summary
I redesigned COBA’s website to be more user-friendly, and optimized it for SEO and website speed.
Timeline & Team
Design sprint and iteration, working directly with CEO and Brand Director.
Responsibilities
-
Information Architecture
-
Design System
-
UI Design
-
Front-end Coding
Company Overview
COBA is pushing the coffee industry forward, by rethinking the way we consume coffee.
Their main product, COBA Coffee Bars, replaces a regular cup of coffee, reducing problems like spilling, stains, and portability.
Project Summary
They originally approached me to improve their website speed, but they also needed help with keeping their website on brand.
Timeline
The first round of designs were urgent, so that we can update and attract investors.
Kick off Meeting
Getting to know the team and the brand
Heuristics Analysis
Finding problems on the current site
Wireframing
Drafting ideas for the updated site
Development
Building out new site
Iteration
Rinse, wash, and repeat!
Kick-off Meeting
Met with the team, got to know them, the brand, the general user, and the goals.
Short term goals
-
Improve website speed
-
Optimize SEO
-
Accessibility
Long term goals
-
More storytelling
-
Increase cart size
-
Push add-ons
Users
Harris Hustler
-
Always busy
-
Has a full-time job, but is always working on side projects or side hustles
-
Needs caffeine to fuel their days
-
Doesn’t always have the time to go buy coffee
Trixie Taste
-
Prefers buying coffee from coffee shops
-
Enjoys the taste of coffee
-
Prefers flavored coffees like mochas, sweet lattes
-
Sticks to one or two go-to drinks
Heuristics Analysis
Current Website had problems like black-on-black text
Website Speed
Website speed was slowed down from outside libraries related to the embedded video.
Information Architecture
We rethought and planned out the website structure, making information quickly accessible to users.
Mock up
Mock up general website on Figma, requesting content assets with team.
Helps with
-
Making sure my design is on brand
-
Communicating what assets are needed
-
Setting expectations
-
Getting feedback on all sections
Then I did another iteration to include more storytelling and branding.
Main Changes
Hero Image shows main product
Autoplaying video in the background
Technical Development
Build website out on shopify, and launch!
There were limitations to what I could do with the current theme on Shopify. The embedded video background was the hardest to achieve.
Increasing Cart size
Now that the short term goals were done, we could start looking at long term goals.
Short term goals
-
Improve website speed
-
Optimize SEO
-
Accessibility
Long term goals
-
More storytelling
-
Increase cart size
-
Push add-ons
We realized that shopify had apps that could help creating add-ons and increasing cart sizes.
But some apps were not compatible with the theme we were building on.
To restart or not to restart?
Stick to current theme
+ No sudden changes for customers
+ Can run planned promotion immediately
+ Theme already has brand colors set
- Website may be less optimized in the long run
- May have to hard code suggestions
Find new theme
+ Can increase cart size
+ Reset and reflect new branding style
+ Increase website speed
- Time cost to rebuild all sections
- Uncertain if current apps will still work
All hands on deck to rebuild!
Three hours later, the new site was good for launch, with an easy app to introduce add-on items.
This led to our best week of sales, increasing our Average Order Value (AOV) by 50%.
Branding
Other Design Tasks
Outcomes and Learnings
Website speed has increased, and along with the pitch deck has drawn the attention of new investors.
Key Outcomes
-
PageSpeed Insights Performance score doubled.
-
Website and pitch deck drew the attention of new investors.
-
Average Order Value (AOV) has increased by 50%.
What I learned
-
Flexibility matters, converting from design to final build may not be pixel perfect.
-
Keep constant communication with the team.
-
Important to test as many scenarios as possible, and be ready to change things after launch.