Patrick Galego's value is found in his superpower ability to identify and execute creative solutions to any project related to web, mobile and product design. As a recent graduate from Humber’s Web Design & Interactive Media program where he graduated with honors, Patrick’s focused intent was to develop a skill set that would help his future employer succeed. He was the sole designer of an interactive display for Humber’s Applied Research and Innovation department in his second year. He specializes in UX and UI and subsequently founded a app called Watermelon in which he was a finalist for in Humber’s 2018 Launch Me Competition to receive startup funding. His pursuit of knowledge continues as a regular volunteer at major conference events such as FITC, and is a participant of various meet-ups and industry events by leading agencies and associations in Toronto. Patrick’s goal is to find a position at a leading agency, start-up, or product company doing what he loves best: finding design solutions to problems.

MENU

Patrick Galego

CASSEN

  • Website Redesign
  • UX
  • UI

A 5 week in-house top-to-bottom website redesign which relies on UX and responsive functionality to embody company goals of a modern professional website that hightlights their trusted expertise and makes it easy for clients to learn about their services leading to business over competition.

CASSEN Testing Laboratories is a Toronto based independent testing laboratory focused on chemical exposure and environmental health testing. Since their last redesign in 2013, their website was failing both its users and the organization with enormous bounce rates. The website was severely outdated in design, and suffered from basic ux principles and usability issues. With client’s such as the TTC and Health Canada, CASSEN wanted a new website that focused on usability, showcased their abilities, specialities, and their wide range of services over their competitors with a modern usable web design.

The main objectives were to:

  • Design and optimise the website across desktop and mobile for all users
  • Make the website as usable as possible for clients improving 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 company for further information and questions

Planning + Research

Understanding users’ needs and organizational objectives, along with having a sound strategy to unite the two was the beginning to the redesigns success.

I kicked off the redesign by having a meeting with the client and getting to know everything about the company, the industry, and what their goals were for their new website. I proceeded with rapid user research, getting to know who their users were and developing personas representing those users. Following this I did a complete analysis of their three major competitors websites and then 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 flow to determine what needed a refresh, what had to be removed, what needed to be added, and how they stacked up against competition.

Understanding users’ needs and organizational objectives, along with having a sound strategy to unite the two was the beginning to the redesigns success.

I kicked off the redesign by having a meeting with the client and getting to know everything about the company, the industry, and what their goals were for their new website. I proceeded with rapid user research, getting to know who their users were and developing personas representing those users. Following this I did a complete analysis of their three major competitors websites and analyzed the company's analytics to further identify problems 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 flow to determine what needed a refresh, what had to be removed, what needed to be added, and how they stacked up against competition.

Analysis + Define

Analysis + Define

Armed with both qualitative and quantitative research, I began to form the basis of the design with a new site map that was intuitive and efficient for users. Categorizing information and improving the overall layout and flow of the website determining what pages content would live and where it made the most sense to place information.

Armed with both qualitative and quantitative research, I began to form the basis of the design with a new site map that was intuitive and efficient for users. Categorizing information and improving the overall layout and flow of the website determining what pages content would live and where it made the most sense to place information.

Design

Each page of the new website design was then painstakingly sketched, wireframed, prototyped, tested, refined, and tested again with users to ensure the best possible user experience and design. The golden rule of testing early and testing often ensured that I was on track to a redesign based on feedback that their clients actually wanted and have come to expect with today's websites, and not what they have become accustomed to when trying to find services within the industry. Due to budget constraints, free to use type, images, and illustrations were sourced from the internet and used along with in-house photography captured by staff.

Implementation

The client already had a WordPress template based website which they wanted to stick with since the CMS made it easy for them to update content such as their packages when needed without any coding skills. For the redesign I recommended developing a custom WordPress theme from scratch so the new website was not confined to a generic theme template, but still be simple for the client to manage and update as they were used to.

The primary focus of the redesign was to create a more structured site that was not only visually compelling in UI, but also focused heavily on UX and usability. The site before the redesign looked and behaved like a CMS template from the early 2000’s. The website suffered from many common website mistakes such as unexpected places for content, and with small bits of information scattered around the site. Another problem was that it overwhelmed visitors with information leaving users struggling to find what they needed. This included dense walls of text. This was all corrected with the redesign.

UX

Right from landing on the homepage it was important to provide visitors with clear concise descriptions of key information about the company and services offered relevant to the visitor. First time visitors quickly learn about the company and see important accreditations, client sectors and company highlights making a for good first impression. It was important to start storytelling from the beginning to encourage continued browsing to gain further understanding of the company with just enough content. To keep costs down, the company had written their own copy, but were encouraged to summarize and keep it as scannable as best they could. With less being more, white space was used for a clean design that directs users to content and important information over anything else. Throughout the site, element shadows create depth and a effect that increases not only the aesthetics of the website, but also helps with ux by providing emphasis. Also, for the new ui, icons that corresponded with the general style were used and intended to accomplish informative functions in edition to, or in place of text keeping reading time down.




Color Refresh

With the new website the client also needed a refresh in colour from their previous dull blues and greys, including in their logo. The colour refresh maintains a visual connection to how the company was seen before but now in a up-to-date and vibrant palette still consistent with corporate style. The primary blue was used throughout the website to keep with the company's branding, and also for elements to jump out and grab the attention of the user to where I wanted the user to pay attention. Complementary accent color in body text and for highlighting secondary information and sections help with balance and give context to main focal points.




UI

The UI was kept to a minimum with only items needed that would attract attention so users could easily navigate the website and not be distracted, or get lost if too much was on the screen leaving them wondering where to click. Keeping with a consistent UI pattern across the site with elements like buttons and with colour helps the user learn their way around the site quickly with no disruptions or unexpected actions improving UX. With the greater use of phones today it was just as important for the UI to work great on mobile web 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, if not better.

The UI was kept to a minimum with only items needed that would attract attention so users could easily navigate the website and not be distracted, or get lost if too much was on the screen leaving them wondering where to click. Keeping with a consistent UI pattern across the site with elements like buttons and with colour helps the user learn their way around the site quickly with no disruptions or unexpected actions improving UX. With the greater use of phones today it was just as important for the UI to work great on mobile web 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, if not better.




Reflection

As a one person lone wolf web designer in this 5 week redesign, I didn’t have a lot of time so I had to think about the work in two fundamental levels. The first was how could I efficiently do my work today and second, how can I effectively incorporate design methods that ensured a website that would benefit the client and their users. Since my time was limited, I had to be proactive with pre-planned processes that would allow me to not just settle on one design solution. Defining my problems by combining research pain points allowed me to gain insights and help with ideation of ideas that addressed user needs. Prototyping with pencil sketch wireframes helped me quickly understand what components of my ideas worked and which did not. The feedback gained along the way helped verify when I was on the right track and ensured my solutions helped solve my clients user needs. Rapidly implementing and executing following this framework allowed me to accurately assess if my ideas and understandings through researching and ideation stages really worked and helped the project stay on track in becoming a successful website redesign that met client goals.