Redesigning the website for a full-service accounting firm

While freelancing for Collective Experience, I collaborated on a website redesign for their client, S+C Partners, a chartered professional accountants firm. My role involved strengthening their brand and solving for areas of improvement identified by the team's research.

While a non-disclosure agreement (NDA) between the agency and client prevents me from displaying exact data and research deliverables, I can provide a detailed overview of my process and findings on this project.

Role

UI Designer

Timeline

Oct '18 - Jan '19

Team

2 designers

User research

I first reviewed the team's research outcomes to understand the redesign's requirements, target audiences, business goals, competitive advantages, and key focus areas.

Discovery workshops
To align stakeholders on project plans, milestones, requirements, and goals.
User personas
To help the team and client understand their key audiences, user priorities, and user goals.
Competitive analysis
To understand the market landscape, identify strengths and weaknesses of competitors, and uncover opportunities.
Customer journey map
To foster empathy amongst the team and stakeholders by mapping out the user experience and users' thoughts, feelings, priorities, and touchpoints.

Key user insights

💡Insight 1

Target users were primarily high net-worth clients, entrepreneurs, and private corporations in sectors like construction, manufacturing, and distribution.

💡Insight 2

Users most frequently sought information on services, especially regarding financial advisory, tax minimization, profitability optimization, and managing financial commitments.

💡Insight 3

The site suffered from poor findability and low task completion due to cluttered navigation, broken elements (lack of responsive design), and low readability (small fonts, low contrast).

💡Insight 4

Users did not perceive the firm as a distinct or competitive option compared to competitors offering similar services.

Problem statement

How might we design the client's website so users effortlessly discover and choose the services that best fit their needs, prompting them to convert into customers?

Old landing page of S+C Partners' website displaying within the screen of a Macbook Pro

Information architecture (IA) analysis

To understand the old website's navigation, I analyzed its information architecture using a sitemap. We learned that the website had:

Excessive Navigation Depth:
‍The site's primary navigation was overly complex, often running 4-6 levels deep with additional in-page secondary and tertiary navigation.
Hidden Content:
Many pages were unlisted in the main navigation, accessible only through links within the body copy.
Content Prioritization:
‍We conducted affinity mapping of the site's topics into categorical clouds, evolving these into a new sitemap to identify and extract the most valued categories.

New sitemap created for S+C Partners' website, simplifying their old architecture into 5 main branches

Branding opportunities

S+C Partners also needed a complete set of branding guidelines to resolve inconsistencies in their marketing collateral and website, and to build a stronger visual representation of their brand.

Agreeing to resolve this first, we consolidated everything we learned into a brand identity set through a process of brainstorms, visual references, mood boards, client touchpoints, and collateral mockups.

Moodboard featuring 3 concepts for branding approach

Ideation of pages

Once S+C Partners approved the final branding, I conceptualized the website pages, progressing from lo-fi wireframes and design reviews to hi-fidelity prototypes.

Refinements

These are some examples of changes applied after testing during the refinement stages.

Before

Users found the opening vague, unclear about S+C Partners' identity. The four key services were also not obviously clickable.

After

I worked with the content writer to state S+C Partners' purpose, converted the four key services into prominent buttons, and moved critical text above the fold to encourage scrolling.

Before

Users noted a disconnect between photography and page content, and found it difficult to identify individuals or know whom to consult.

After

I reduced decorative photography, added individual qualifications, and used clear visual indicators to highlight clickable profiles for each person.

Before

Users found the copy too small. S+C Partners also wanted to upsell their services and increase client contact.

After

I added icons to accompanying text for improved readability. To increase client contact, I added an "Ready to get in touch?" section to the bottom of pages with a "Contact us" CTA.

Final designs

Sample mobile screens

Style guide

Development specs doc

As a best practice at the agency, I created a specifications document for our external developers. These docs detailed page types, layout, color guides, and font specifications for both web and mobile.

Doing so significantly improved our collaboration during development, since developers had a shared reference to use as they began their work.

Design QA

Once the development agency provided staging links, I assisted with auditing accessibility compliance (alt tags, font sizing, colour contrast) and left feedback for developers on design accuracy.

Redesign impact

The outcome was a clean, modern, AODA-compliant website with significantly improved findability, readability, accessibility, and brand presence.

The new design successfully led to:

More customer contact
Higher conversion rates
Faster task completion rates
Lower bounce rates
Robust branding guidelines that S+C Partners is still using today for the firm's business collateral & branded materials

Five of the final screens mocked up into browsers, featuring the landing page, insights page, advisory page, about page, and client service leaders on a light blue background

Back to Projects