S+C Partners Website Redesign

Overview

While freelancing full-time at Toronto and Vancouver-based design studio Collective Experience, our client S+C Partners (a Chartered Professional Accounting and advisory firm) approached our team seeking a website refresh. Their website contained outdated information and excessive content, lacked responsiveness, and had little to no accessibility compliance. I was brought on after the user research phases to tackle the UI design stages and conceptualize a visual solution to resolve the issues identified.

My Role

UI Designer

tools

Adobe Photoshop, Adobe Illustrator, Invision

Duration

2 months

DISCOVERY

Reviewing preliminary research

Our design agency conducted preliminary research on S+C’s target audiences, business goals, provided services, active industries, current standing, and competitive advantages. My first step was reviewing an insights document compiled by the team on the accounting firm’s current site usage, user priorities, user needs, touchpoints, and user pain points. This helped me understand the opportunities for improvement and the most important points for the visual messaging we needed.

Some key takeaways that can be publicly shared included:

  • Key audience was high net-worth clients

  • 85% of their customers are businesses (B2B)

  • 70% of customers are in construction, manufacturing, and distribution

  • Lack of legibility, readability, and contrast found across the site

  • High bounce rates and low retention due to information being hard to find

  • Confusing information architecture, with a complicated site map

  • Lack of responsiveness along with broken components on mobile

  • Lack of accessibility compliance (small fonts, low contrast, missing alt tags, and more)

Old S+C Partners website.

Define

Information architecture

Taking into account what customers prioritized as key information when visiting the website, I created a sitemap simplifying S+C Partners’ original site structure down into 5 main key sections: About, Services, Careers, Insights, and Contact. Replacing a multi-leveled architecture, this would make it easier for users to access and find high-priority information to achieve their goals.

Design

Defining brand approach: colours, typography, photography

Using digital sketches, I explored various different branding approaches using S+C Partners’ branding colours. I narrowed down the concepts into 3 mood boards encompassing 3 different approaches, playing with a variety of industrial and corporate styles of photography as well as accent colours and elements. S+C Partners was quite happy with the concept shown first in the following mood board.

Lo-fidelity to hi-fidelity designs

After determining the brand approach, I dove into a process of refining lo-fi designs into hi-fi designs, iterating using feedback from the client & team into hi-fidelity designs. These were then created into interactive Invision prototypes for user testing. Below are some of the final screens (click to view at a larger size).

landing pages

About Pages

Services

Career Pages

Insights + Contact Pages

Testing and iterating on prototypes

A few iterations of prototypes had been created because we tested the earlier prototypes of our hi-fidelity designs for user feedback. Below are some examples of user feedback that led to the final screens shown previously.

Responsive mobile screens

Deliver

Functional specs document with designs

Following the completion of the final designs, I prepared a functional specifications document, which documented page types, colour guides, colour hex codes, font types and font handling (including font sizes and leading & tracking guidelines) for the external development agency that would be helping us code and stage the website.

Functional specifications document created for developers.

Development

Design & accessibility QA

Following handoff, I regularly conducted design and accessibility QA throughout the development stage up until launch. As the development agency sent updates of completed pages, I reviewed the staged pages, used a screen reader to test our web pages and compiled a list of feedback. From alt tags on images and icons to font sizing, leading, and tracking, as well as margins, colours, and device responsiveness, my goal was to ensure the final published output was accessible, responsive, and as accurate to the designs as possible.

Impact

Final outcomes

The final results were:

  • A well-received modern AODA-compliant website that was readable and searchable, with proper alt tagging and accessibility practices to accompany screen readers and user needs for the client’s target audiences

  • An architecture that made it easier for the users to find information they needed, such as services

  • Stronger, large-scale industrial imagery tying to S+C Partners’ primary clientele in construction, manufacturing, and distribution

  • An extended, new branding direction, which S+C Partners has extended to cover their other marketing materials and communications

  • Cohesive and consistent brand and online presence