.png)
Seamless navigation for Crystella customers
A new IA for Crystella’s merging websites
Client
Crystella Water
Tools
-
Figma
-
Miro
-
Pencil & paper
Team
Individual
Role
-
Information architect
-
Content strategist
-
UX design
Duration
2 weeks
My contributions
-
Performed a heuristic evaluation
-
Conducted a card sorting activity
-
Performed a comparator analysis
-
Created a sitemap
-
Designed initial sketches
-
Designed high-fidelity prototype
-
Created a content strategy
-
Managed client expectations
Summary
The brief
Crystella has two products - sales and rentals of sparkling water systems and a new swap and recycle program for empty gas cylinders.
​
My task was to ensure that all of Crystella's different customers can find what they are looking for on the website.
The solution
I created a content strategy, whereby I added and removed pages, and I relocated content to more intuitive areas.
I ran a card sort activity with participants, created a sitemap and designed a mega menu interface.
The research
I performed a heuristic evaluation and found three key problems:
​
-
Titles in the navigation menu are confusing
-
Majority of pages target sparkling water system users only
-
Several pages do not provide value to customers and are repetitive
Next steps
Conduct usability tests on users with the new IA.
Continue to learn what content users require to make purchasing decisions.
Redesign the IA of the support pages when budget permits.
The problem
Navigation titles are not intuitive to customers and content on the website does not help users make informed purchasing decisions.
​
These problems are affecting Crystella because users cannot find what they want, resulting in increased bounce rates.
Reflection
Consider and create the content before designing the interface.
Our designs need to be feasible with the constraints presented.
​
Card sorting required participants who are knowledgeable about the company.
Full case study
Overview
Crystella offers a rent or buy solution for sparkling water on-tap systems. The company introduced a new offering, a recycling program, where customers can swap and recycle their empty gas cylinders for new gas cylinders.
In this client project, I redesigned the website's information architecture (IA) for the merging offerings and created a content strategy.
The challenge
Crystella has different target users for the products and services offered. The target audience for Crystella’s sparkling water on-tap systems are HORECA (hotels, restaurants and catering industry) and office users. Comparably, the target audience for the new recycling program are residential and office users.
The key challenge was to create a taxonomy with terminology that allows all users groups to correctly navigate through the Crystella website.
Our hypothesis
The new recycling program was merged into the existing sparkling water system’s website without consideration into the IA, navigation and content.
This resulted in difficult navigation for all user groups due to convoluted and repetitive taxonomy, terminology and content.
The business goals
-
Increase sales & rentals of sparkling water systems by 20%
-
Generate 12,000 sales of gas cylinders in 12 months
The research
I evaluated the existing website and discovered three key problems.
Titles in the navigation menu are confusing
Majority of pages target sparkling water system users only
Several pages do not provide value to customers and are repetitive
How do these problems affect Crystella?
Users cannot find what they want on the website, resulting in increased bounce rates.
Thinking about the content
Prior to thinking about the website’s IA, it was important to understand what content existed on the website and what content was missing.
Added pages that encourage users to trust and buy from Crystella
Removed unnecessary pages that are repetitive and do not help users make a purchasing decision
Relocated content into more intuitive areas of the website
How will Crystella prioritise the content strategy?
Crystella should prioritise content & pages that encourage users to purchase. For example, working on the product pages first.
Why?
Because the business goals are to increase sales.
Restructuring the skeleton
I wanted to understand how and why users categorise topics the way that they do, rather than merely seeing their output. Thus, I observed participants as they completed a closed card sort exercise on Miro.
Closed Cart Sort
What I learnt from my first card sort exercise
I realised that I needed participants who were knowledgeable of Crystella.
My first participant had no prior awareness of Crystella. I explained the company to the participant and expected them to complete the cart sort with confidence, but they struggled.
Several iterations later, a sitemap was created
During the cart sort, I made changes to the sitemap based on my observations of the participants. I adjusted the terminology and taxonomy several times, testing new participants with the iterations.
Sitemap
%20shadow.png)
%20shadow.png)
Measuring success
-
Conduct usability tests on users with the new information architecture
-
Monitor bounce rates to see if users are clicking relevant links and are purchasing
Lessons learnt
Content before containers
The layout of pages were created prior to the copy being written. This resulted in the need to revise the copy to suit the containers, which created more work.
Design within constraints
I presented ideas that were not feasible due to developer and budget constraints. For example, I had ideas of a toggle feature, but I had to compromise this functionality to create a solution within the constraints.
Where to next?
-
Conduct usability tests on users with the new information architecture to see if they struggle with particular tasks
-
Continue to learn what content users need and want in order to make informed purchasing decisions
-
Redesign the structure of the support pages when budget permits
