Website Re-design
My Role
UX Designer
UX Researcher
Design Process
01. Meeting
Client Goal
Business Model
02. Research
Primary Research
03. As-is
User Journey Map
04. To-be
New Design & Flow
Evaluation
05. Deliver
Hi-Fi Prototypes
01. Meeting
Client Goals
Our client is an independent local coffee shop that desires to develop and refine its online website for targeted customers. We highlighted 3 goals to kick off the re-design project during the meeting with our client. Their existing website is functional but several issues should also be addressed and solved.
-
Attract potential customers at first sight
-
Retain viewers and customers to motivate purchases
-
Enhance the online shopping experience
Based on the goals we developed after the discussion, we created a business model and value-proposition canvas to better illustrate the situation.
Value-proposition canvas
02. Research
Primary Research
Taking the project's scope and limitations into consideration, we conducted primary research to find out the pain points of targeted users to help solve their problems more efficiently in the later stages.
As a UX researcher as well as a UX designer in the team, I conducted primary research through interviews, surveys, and usability testing on the existing website.
-
Created surveys to source coffee lovers through social media channels
-
Selected 12 target users who frequently order coffee-related products online
-
Conducted online interviews and usability testing sessions (perform tasks, think out-loud) to observe user behavior
Based on the interview and usability testing notes, we developed a persona and empathy map to visualize our research findings.
Survey Questions
​
-
How likely would you be to purchase JC Canada Coffee’s product? (skip)
-
How did you know about JC Canada Coffee?
-
On what devices do you usually purchase food and liquor?
-
What is the top reason for you to install a new shopping app?
-
How often do you drink coffee?
-
How much do you spend on coffee per week?
-
What are the most common ways you consume coffee?
-
Which coffee brand(s) do you usually buy?
-
How do you hear about new coffee brands? (multichoice, select all that apply)
-
What motivates you to buy a new brand of coffee? (multichoice, select all that apply)
​
The survey can be found at https://docs.google.com/forms/d/e/1FAIpQLSfxtpJoeY2Cg-I7Vt9IpbZEQgqiG4T69R3pxX2x-ZTETJVA8Q/viewform?usp=pp_url
Survey Findings
12 out of 12 users think they should be able to afford the current price.
$14 for 350g
9 users out of 12 think promotions and discounts would motivate them to purchase coffee from a new brand for the first time
When asked about in what way do they prefer purchasing coffee regularly, 10 out of 12 answered they prefer making purchase online
Word of mouth (9/12) and social media (6/12) are the main ways to try out new coffee brand
Usability Testing Design & Questions
For usability testing results and data collection please visit: https://docs.google.com/spreadsheets/d/1J-km6m1AdP0Bid-gALAxOMZ__WxS3T9_3xcDhg37u4U/edit#gid=1660757371
Affinity Map
03. As-is
User Journey Map
After analyzing research results from interviews and usability testing with users, we have created a user journey map to illustrate the as-is scenario of our persona Chloe.
04. To-be
User Journey Map
We have proposed a to-be scenario of how Chloe is supposed to feel after our new re-design of the current website.
05. Deliver
Hi-Fi Prototypes
We have developed hi-fi prototypes for locating, browsing, and purchasing products that intentionally reduces the time a user needs to find the right path to make a purchase.
By completing our as-is experience map, we identified three main pain points associated with the website. We learned that
-
the original website’s visual design is too general for users to differentiate JCC from other brands,
-
insufficient reference information to help with the decision on purchase
-
and the use of green color does not meet their expectations of a coffee brand.
What We Improved
-
Added a banner to inform customers about current promotions to motivate purchases
-
Created hero images to strengthen the feeling of good quality coffee
-
Dark brown color scheme to match the color of the coffee
-
Detailed product information to differentiate products
-
Customer review section to provide additional references
-
Detailed product information to differentiate products
-
Customer review section to provide additional references
Outcomes
-
Enhanced navigation and usability, leading to a more intuitive and enjoyable browsing experience for visitors.
-
Reduced bounce rates and increased time spent on the website due to improved engagement and satisfaction.
-
Clear and compelling calls-to-action (CTAs) leading to higher click-through rates and conversions on product pages
-
A visually appealing and cohesive design that reflects the brand identity and values, strengthening brand perception and credibility.
-
Consistent messaging and storytelling across the website, creating a memorable brand experience for visitors.
-
91% of customers reported positive feedback compared to the existing design, resulting in higher purchase motivation and online experience satisfaction.