S+C Partners Website

While freelancing at a small privately owned studio, Collective Experience, S+C Partners approached us for a website refresh. Their site was outdated, cluttered with text, broken on mobile, and wasn’t reaching accessibility standards. Additionally, as research kicked off, bigger issues became apparent such as gaps in branding strategy & vision. The client agreed to re-examine their brand under our guidance. I was brought on to define and strengthen the branding, and then rely on our research to design a new user experience for the refresh.

Our team kicked off by leading discovery workshops with the client, translating the insights into user personas and journey maps. Meeting with the team, I reviewed the insights to pull out key information. I highlighted S+C’s target audiences, business goals, provided services, active industries, current standing, and competitive advantages. A few example key insights were:

• Key audience: high net-worth clients, entrepreneurs, private corporations
• Primary clientele: construction, manufacturing, and distribution
• Primary services: accounting services such as assurance, tax, advisory, and IT to support financial commitments, minimize tax liabilities, optimize profitability
• Extremely low findability: confusing information architecture (4-6 levels deep), customers couldn’t find information leading to high bounce rates
• Lack of accessibility: small fonts, lack of readability, low colour contrasts, and missing alt tags costed readability
• Not mobile-friendly: broken components were seen on iOS and Android
• Primary services: accounting services such as assurance, tax, advisory, and IT to support financial commitments, minimize tax liabilities, optimize profitability

Next, we had to simplify S+C Partners’ architecture, so we laid out a sitemap of its existing hierarchy. The old architecture (using Portal, About, Resources, Blog, Careers, and Contact as navigation items) extended 4-6 levels deep with hidden pages inaccessible from the navbar. Considering the topmost priorities of customers’ feedback when visiting the site, I worked on simplifying it all into 5 main key sections: About, Services, Careers, Insights, and Contact.

Our team’s research uncovered some bigger issues, such as gaps in branding strategy and vision. I needed to help fill these in first.

After evaluating the business goals, mission, services, values, and current branding colours, I explored different branding approaches by experimenting with typography, photography, imagery, and accent elements. After refining the best options down into 3 solid approaches, I built mood boards to portray each concept's treatment of typography, photography, imagery, and colour. Presenting these to the client, they identified the first of the three as the best fit for their firm.

After delivering a set of branding guidelines, I was able to move forward with ideating the UI designs.

At this stage, I began ideating and designing each page of the website. Collecting feedback from team critiques along with user feedback gathered by the client's in-house team, I churned lo-fi ideas into hi-fi mockups. I also worked together with a content writer to simplify and reduce the messaging.

In doing so, I created interactive Invision prototypes of these mockups for user testing and design reviews with our stakeholders. Below are examples of how the feedback influenced my process and designs.

Sample mobile screens

Final style guide & accessibility tweaks

Below is the final style guide. One additional catch I made was that the green from S+C Partners' original branding colours was not accessible. Using a contrast checker, I found an appropriate green that was similar enough and passed the contrast ratios. I assessed the primary colours and ensured that they were all accessible.

A neat practice I learned to exercise at this agency was to prepare a functional specifications document noting the page types, layout guides, colour guides, colour hex codes, font types, and specs (web and mobile) for our external developers. This helped us significantly improve how we cross-collaborated during the development phase, so that we had a shared document to reference as the developers kicked off development.

As the development agency forwarded completed staging links, I reviewed the pages and inspected alt tags on images and icons, font sizes, leading, tracking, margins, colours, and device responsiveness. Any comments were left as feedback for our developers. These reviews made sure the website was accessible, responsive, and as accurate to the designs as possible.

The outcome was a clean, modern AODA-compliant website with enhanced findability, readability, and branding presence.The new design successfully led to a higher session to contact rate as well as lower bounce rates. The firm also personally remarked that they loved the new branding guidelines, which they were able to happily leverage for all future projects and business collateral.