S+C Partners website redesign screens

Case study

S+C Partners website redesign

I redesigned the website for an accounting services firm to improve customer wayfinding, drive up contact rates, and increase customer conversions.

While freelancing full-time for a small agency, Collective Experience, I worked with S+C Partners, a client who approached the agency for a website redesign. As we dug in, it became clear the underlying issues went deeper than the website — the client needed a more cohesive brand strategy and vision.

I collaborated with the agency to enhance their brand and tackle the opportunities identified by our team's research.

Discovering users

We began with discovery research to understand the firm's clientele, services, business goals, opportunities, and competitive advantages.

Old SC Partners website Old experience

These activities included:

  1. Discovery workshops To help identify the client's target audience, build user journeys, and inform the creation of user personas.
  2. User personas To develop a clearer understanding of the individual key audiences, their goals, and the messaging that would appeal to them.
  3. User journeys To understand what their users would think, feel, and when their touchpoints with the website were.

Key opportunities

Weaker business presence

Without a brand design, users did not perceive the firm as a distinct or competitive option compared to competitors offering similar services.

Low findability and readability

The multi-leveled navigation, lack of mobile responsiveness, and cluttered visual hierarchy led to slower task completion rates.

Unclear conversion path

No clear call-to-action guiding users from a service page to contacting the firm, leaving interested visitors without a next step.

Underserved HNW clientele

Messaging didn't speak directly to the firm's primary audience of entrepreneurs and private corporations in construction, manufacturing, and distribution.

How might we redesign the website so high net-worth clients can quickly find the right services and easily connect with the firm?

Building the brand

It became clear from the research that the underlying issues went deeper than the website — the client needed a stronger brand strategy.

Taking in what we learned about the business and its clientele, I collaborated on brainstorms and created 3 approaches to their visual brand.

The final concept paired large-scale imagery with industrial architecture, tying into the client's manufacturing, construction, and distribution industries. It also introduced a cooler, muted colour palette accented with their existing blue and green to add warmth.

SC Partners branding moodboards

Understanding the architecture

After establishing the branding system, we mapped out the old website's information architecture, then affinity-mapped key content to produce a revamped sitemap.

SC Partners sitemap

Iterating lo-fi ideas into hi-fi designs

Before — comparison 1

Before

Feedback circulated around the vagueness of the hero and landing page text. The 4 key services were also not obviously clickable.

After — comparison 1

After

We became very intentional with content direction, explicitly stating the firm's purpose, and converted the 4 key services into more prominent buttons.

Before — comparison 2

Before

A disconnect was noted between photography and page content. Some also found that it was hard to identify the right person to consult.

After — comparison 2

After

The photography was made more intentional, and dropped if no value was being added. Staff qualifications were added, and their profile made more evidently clickable.

Before — comparison 3

Before

Some found the text size too small. The bulk of text-only also made it less enticing to read through.

After — comparison 3

After

Icons were added to accompany the text and improve scannability. A section was added to key pages with a Contact CTA.

Finalized web designs

Final solution 1
Final solution 2
Final solution 3
Final solution 4

Finalized mobile designs

Mobile solution

Finalized style guide

Style guide

Documentation for developers

We also provided our external developers documentation to build better collaboration and clarity around specifications. These docs detailed page types, layout, color guides, and font specifications for both web and mobile.

Development specs doc

Final impact

The outcome was an AODA-compliant website which:

  • Established a stronger, more distinct business presence with a new set of branding guidelines, which the firm is still using today
  • Significantly improved findability and scannability through a simplified navigation and clearer visual hierarchy
  • Introduced a clear conversion path that increased contact rates
  • Tailored messaging to reach the firm's high net-worth clientele