PROJECT
Website redesign
ROLE
Sole UX/UI designer
COMPANY
CASSEN testing labs
Toronto, ON
CASSEN Testing Laboratories is a Toronto based independent testing laboratory focused on chemical and environmental health testing.
Since their last redesign in 2013, the website was failing the organization with enormous bounce rates and suffered from basic UX principles, IA, and usability issues.
With client’s such as the TTC and Health Canada, CASSEN wanted a new website that showcased their abilities and wide range of specialities and services over competitors, in a usable website.
Main
objectives
- • Design and optimize the website across desktop and mobile.
- • Make the website as usable as possible for clients.
- • Improve navigation, site architecture, and overall user experience.
- • Look professional whilst providing a modern aesthetic and highlighting trusted expertise.
- • Redesign analytical section of analysis packages and individual compounds.
- • Make it easy for clients to learn about services and provide useful resources for clients to reference.
- • Make it simple for clients to contact the company for further information and with questions.
Planning &
Research
I kicked off the redesign with 1-on-1 interviews with members of the executive team to nail down what Cassen was about, and to get acquainted with the company, and the industry. This allowed for a shared understanding and vision for the redesign.
I proceeded with rapid user research, getting to know who their users were, and created personas representing those users. Following this, I did a complete analysis of their three major competitors strengths and weaknesses and analyzed the company's analytics to further identify problem areas which would be used for my design strategy and next steps.
Next, I performed a complete analysis of their own website, its content, navigation, site architecture, and user flows to determine where improvements could be made and how they stacked up against their competitors.
Analysis
+ define
I evaluated the content, company goals, and traffic, taking note of where drop-offs were occurring before suggesting changes. I began to form the basis of the redesign with a new site map that was intuitive and efficient for users. Categorizing information and improving the overall layout and flow providing a high-level overview of the sites structure helped to determine where content would live and where it made the most sense to place information.
Wireframes &
prototypes
I used wireframes throughout the redesign to help think through problems. Some ideas were sketched and shared face-to-face and others were drafted using digital tools and shared online. Once iterations were made and I received approval, we used this opportunity to incorporate content and copy to gain a clearer sense of page structure and how each piece of content related to another.
Interactive prototypes were created early on in the wire-framing process. I shared them with their customers and the team throughout the project for feedback. I asked people to say their thoughts out loud as they used the designs so I knew what they were thinking as they interacted with the mockups. That feedback highlighted problem areas and validated design choices so we could finalize the wireframes into high-fidelity mockups for the developer. Due to budget constraints, free to use type, images, and illustrations were sourced from the internet and used along with staff writing copy in-and capturing images.
UX
It was important to provide visitors with clear concise descriptions of key information about the company and services offered. With the redesign, the goal was for first time visitors to quickly learn about the company and see important accreditations, client sectors, expertise, and company highlights building credibility, and make it easy for them to request services.
IA was a key aspect of the redesign and UX which focused on organizing information correctly in appropriate pages, structuring for both desktop and mobile, and helping users navigate pages to find and process information they need ensuring less time and effort is spent searching.
BOOKING & CONTACT
The website was also in desperate need of a colour refresh from their previous dull blues and greys, including in their logo. The new palette maintains a visual connection to how the company was perceived before but with an up-to-date and vibrant palette consistent with trust-worthy and corporate style.
The primary blue was used throughout the website to keep with the company's branding. A complementary accent colour in body text and in highlighting secondary information and sections help with balance and give context to main focal points.
UI
The UI was kept to a minimum making sure the visual design focused on only the essentials. Maintaining consistency and adhering to UI standards and common patterns across the site with elements such as buttons, icons, colours, and page layouts, help in lowering learning curve, keeping the user focused on the content, messaging, and services offered.
With the greater use of mobile devices, it was just as important for the UI to work great on mobile without functionality being lost to smaller screen sizes. The result is a perfectly responsive mobile website that looks and performs just as well as the desktop version without losing any features.
Reflection
Working as the sole designer in a 6 week redesign, I had to think about the work in two fundamental levels. The first was how to efficiently do the work, and second, how to effectively incorporate the design process without skipping steps.
Since my time was limited, I spent more time in the planning phase and then focused on refinements and tweaks later. Defining problems and breaking them down into manageable chunks ensured I got feedback at a quicker cadence without a lot of re-work.
Getting feedback often and prototyping with sketched wires helped me quickly understand what worked, and what did not. The feedback gained along the way helped verify when I was on the right track, ensuring the solutions solved user needs and met business goals.
Rapidly executing following this framework allowed me to accurately assess if my solutions worked and helped the project stay on track in becoming a successful redesign that met business goals and met user needs.