TRISTEL
Project Research / UI & UX / Website Design
Empathise
Tristel is a manufacturer of infection control, contamination control and hygiene products across 9 locations globally. The industry has gone through a boom due to the recent pandemic. Before this explosion of the industry, the website wasn't meeting requirements.
The client decided before the project began to create a separate website for the investors centre. Through the separation of the two, it allowed me to target each persona more efficiently. The industry is naturally information-heavy, with multiple global locations, so an easy to manage CMS was vital.
Sales of products are heavily influenced by fulfilling a list of requirements, such as safety, usability and contact times. Creating a solution to aid users in accessing this information was going to be a primary objective. Due to the scientific nature of the content, automatic translators wouldn't be adequate.
Define
To identify the user's needs, we created a persona questionnaire. The questionnaire was filled in across the business by the staff closest to the end-user. We received 16 completed questionnaires from around the globe including, Hong Kong, Germany and New Zealand. These answers were then composited together in a database and compared for similarities in requirements to create personas. We defined the problem using the personas using the following problem statement:
"Buyers are required to meet guidelines before procurement can begin."
We then used user flows to help us define the touchpoints for each persona. We then refined the sitemap and identified where additional functionality would be required.
Ideate
Afterwards, we compiled the information into a UI/UX audit to identify our core goals. We then used low-fidelity wireframes to brainstorm the layout of pages defining required functionality. We then created a hierarchy of information on a per-page basis, based on the personas requirements. Before considering the UI, each page had requirements mapped out to meet the needs of our personas. We would then introduce UI during the prototyping stage to better emphasise the goals and the company branding.
Prototype
By using high-fidelity prototypes created on Adobe XD, we could generate new ideas and review them quickly. Our thorough prototyping process covers large parts of the sitemap, including interactive elements. We link pages together through the navigation and buttons, giving the impression of the finished product. This process helped us to identify where there are improvement needs.
We found amends and iterations were quick to make via the prototypes we shared globally. The global testing was successful in highlighted any regional issues. Making sure the prototypes met global demand was a high priority.
Test
The project was a huge success and, the client was pleased with the final result. Esther Jansen, the lead client on the project, commented on the enjoyable, smooth process that helped us complete the project to a high quality within a small timeframe.
"I have no further comments – looks truly fantastic!"
- Esther Jansen - Tristel Marketing
The industry standard 3rd party tool used to measure websites is called Lighthouse. Lighthouse scores of websites out of 100 on four factors; performance, accessibility, best practices and SEO. On the original website, the score was 32, 74, 77, 73. On the new website, we saw every metric increase to 51, 90, 93, 83. The difference between the old and new websites equates to a total increase of over 20%.