Honolulu Coffee Vancouver - Redesigning the overall visual and user experience of Honolulu Coffee Vancouver website.
Role
UX designer
UX Researcher
UI designer
Tools
Figma
Zoom
Project type
Redesign project
Timeline
80 hours
How it started…
One of my friends from Canada said she wanted to redesign a coffee shop website because she went to this coffee shop often and noticed their website could be improved in many ways.
Screen shots of current website
Meet with stakeholder to understand the Business Goals & Constraints
Defining the business goals and constraints is important and should be done at an early stage. We drafted a meeting plan and had a meeting with one of the employees at Honolulu Coffee Vancouver as soon as she was available.
Main Business goals:
Increase coffee bean sales
Promote the unique quality of Honolulu coffee and beans
Showcase Hawaiian and company culture through the website
Main Constraints:
Limited budget as the project is voluntary
Technical limitations due to uncertainty about the availability of a software engineer to code the website
Identify the problems and pain points in the existing design through usability tests
In order to improve website performance and optimize user experience, it is crucial to identify and comprehend any issues and pain points present on the current website. Thus, I did a comprehensive analysis of the website and decided to do 4 user testing on the current website to understand users’ pain points.
I was able to identify some of the main problems of the existing design from user testing:
Navigation confusion
Difficulty finding information
Boring visual design and overwhelming text
Lack of product information
What are the needs and goals of the users?
To understand the factors that drive customers to purchase coffee beans online, we have decided to conduct surveys with coffee enthusiasts and to conduct in-person interviews with existing customers of Honolulu Coffee.
Below are some selected results from the survey. We were able to gather 27 responses.
Sample question: If you make your coffee, have you visited a coffee shop website? If so, why did you visit it?
Sample question: Do you make your own coffee or buy coffee from a store?
We were able to define some main goals of the users through the survey and customer interviews.
Users’ goals
Wireframe & Usability Test
After finishing designing the wireframe, I decided to do 3 usability tests on the wireframe so I am able to identify problems that still exist and make iterations at an early stage.
I gathered insights from testers 1-3, distributing each under different categories: General, Homepage, Navigation, About pages, Shop page, and product page.
Here are some main insights I collected from the test results:
Be clear, concise, and informative when writing content to avoid confusion
Optimize space to reduce unnecessary scrolling
Use clear and distinctive button labels for easy recognition
Think from the user’s perspective when designing
What I learned from this project
After completing this redesign project, I learned some valuable lessons that will inform my approach in future projects.
Understand that different problems need different approaches
I used the Double Dimond framework for my last UX project, Gather. However, this project was different because we had a stakeholder and we were redesigning a website. So we need to pick the appropriate method for the best possible approach.
Identify constraints in an early stage
Identifying constraints is crucial because it will affect how we approach the problem. Whether it is a business constraint, or technical constraint, understanding it at an early stage will help designers to design more efficiently and accurately.
Don't assume you are the user
There are many times that I thought this was the best solution for the user, however, I would get an unexpected answer after listening to different users. We can't assume we are the user even if you also use the product, we need to hear from different perspectives.
Communication is the key
In real life when working with other designers or non-designers, knowing how to communicate is the most important soft skill to have. Being able to communicate clearly, and concisely, and take feedback moderately is crucial to work in a team and growing as a designer.