Niagara Chocolates
Redesigning Niagara Chocolates' Shopify website to elevate its premium brand and improve the e-commerce experience.
ROLE
CX Design
UX Design
User Research
TIMEFRAME
3 Months
COMPANY
Niagara Chocolates
SERVICES
Competitive Map
Persona
Wireframes
Empathy Map
Market Research
User Interview
Overview
Starting out as a locally owned brick-and-mortar premium chocolate retail store in Buffalo, NY in 1956, Niagara Chocolates lacked the online presence to scale their business on a national level.
Over 3 months of daily standups, design sprints and client feedback iterations, the CX team and I shipped a brand new website for Niagara Chocolates that generated a growth of 20% site traffic, 64% of which were within the target demographic (Millennials and Gen Z) and a decreased bounce rate of 30% over the span of 1 year.
Competitive Map
To understand how we can differentiate Niagara Chocolates as a premium brand in the chocolate industry, we needed to lay out the competitive landscape. In a branding and market segment workshop, we worked with the client to map out the competitors based on their focus and feel. Relative to the competitors, we determined that Niagara Chocolates can benefit and grow the most as a modern luxury brand with a focus on process.
Business Goals
During the client kickoff, our CX team discussed deliverable expectations and top priorities for this website redesign initiative. Here were our client's top three goals:
- Have an impactful landing page to gain click through rate
- Become a modern luxury brand
- Make the website more user-friendly
Market Research
To understand a little more about Niagara Chocolate's customer base, I jumped at this opportunity to do some white paper research.
In a statistical research done by the American Marketing Association called Millenials, Gen Z, and the Rising Demand for Corporate Social Responsibility, I learned that Millennials and Gen Z are now the biggest global generation, making up 64% of the world’s population, and 70-74% of them purchase premium chocolates.
Additionally, based on the study Getting to Know the Chocolate Consumer done in 2019 surveying 1,500 consumers on some of the world’s most iconic chocolate brands, I found that:
40% of chocolate consumers say their chocolate purchases are influenced by Fair Trade Certified and non-GMO Project Certified
- 39% of chocolate consumers say their purchases are influenced by the Certified Organic/USDA Organic Seal
50% of chocolate consumers are willing to pay more for chocolates with one or more certifications, while their willingness to pay increases along with perceived importance
In summary, I found that as a premium chocolate brand, Niagara Chocolates should focus on branding and content strategies that resonate with the Millenial and Gen Z demographics, such as clean labels, certifications, and thoughtfully sourced ingredients.
User Interviews
After broadly understanding the customer base we were working with, I wanted to dive deeper into some qualitative research that can help explain the way customers perceive Niagara Chocolates as a brand and the value they offer.
I conducted 8 moderated user interviews over uninterrupted video calls, each lasting 45 minutes with users between the ages 18 to 34. During the interview, I performed a 5 second test on the home page and a usability test clicking through the existing website. The test results showed me that there were several friction points that threw the customers off and ultimately prevented them from engaging with the website further.
5 Second Test - Fail
To get an understanding of how impressionable the Niagara Chocolates website was to our users, I conducted a five second test where users were shown a screenshot of the home page hero for 5 seconds, and then asked the following questions:
- What is the company name?
- What do you think this company is about?
- Would you want to buy the products this company sells?
- Would you spend more time on this website?
Overall, most of the shoppers struggled to recall the company's name, and many wouldn't purchase products or spend more time on the website due to its dated and unappealing design.
75% of shoppers struggled to recall the company's name "Niagara Chocolates"
25% of shoppers failed to identify that the company sells some form of chocolate product
50% of shoppers would not purchase this company's products because it doesn't look appealing
75% of shoppers would not spend more time on the website because it looked dated and unprofessional
Main Flow Usability Test - Fail
The main user objective for Niagara Chocolate's website was to successfully find a product and add it to cart. The tasks I assigned our users were straightforward and simple:
Find the product called Chocolate Lovers Mini Cups
Add 1 pack to cart
What happened? Shockingly, all users failed the test. Since each product quantity was listed as a separate listing, the user's only option was to look for the product on the Clusters & Cups category page, which had no filters for the many products shown.
To add to the user's confusion, the product didn't exist on the category page, making it completely unfindable unless the user searched in the search bar (which no one used).
Needless to say, there was a big opportunity here to improve product findability.
Empathy Map
Using the data I collected from the 8 user interviews, I summarized our users' thoughts, feelings and actions into an empathy map, a tool I borrowed from the Nielsen Norman Group to make sense of our users' pain points that were apparent within the 5 second test and usability test.
Customer Persona
I also took our user data and turned it into a customer profile that served as my team's north star. Niagara Chocolate's most common customers are within the Gen Z to Millennial age group, and they rely heavily on referrals from friends and family. They want information such as certifications and ingredients, but they would rather buy chocolates that are affordable rather than expensive. Their main frustration is how hard it is to find products.
Key Wireframes
HOME PAGE
PRODUCT DETAIL PAGE
SEARCH PAGE
The Solution
We wanted to create a premium, contemporary and affordable online chocolate shopping experience that Millennials and Gen Z customers will feel guilt-free engaging with and be excited to share with others.
To fulfill this vision, a UI Designer and I worked together on making some key improvements to the existing website.
Memorable & Modern
- Use high quality imagery to build brand trust
- Comply with WCAG guidelines by using a font color with higher contrast on image (or use contrasting background behind text)
- Decrease top navigation height to free up above-the-fold real estate
Organized & Clean
- Update product listing titles to not include the company name
- Combine multiple PDPs with different quantities
- Move product description closer to the top of the page
- Increase size of thumbnail photos
- Include product reviews and testimonials
Findable & Clear
- Reorganize products onto search page with filter categories along with keywords for quick navigation
- Take out sort functionality
- Shorten product titles
- Use light and airy white space
- Use clear CTAs depending on product availability
Future Considerations
The website was redesigned and shipped under a tight timeline and budget. If our CX team had more time on this design initiative, I recommend the following next steps:
- Conduct usability testing on the new site to understand how users behave to the new site layout
- A big part of Niagara Chocolate's business initiative revolves around fundraising for schools and the community. With more time, I recommend integrating this messaging into prominent areas of the site.
- With over 65 years of history, Niagara Chocolates is a credible company with a rich story to tell. I suggest redesigning the About page to show the company's evolution over time and how far it has come.