S+C Partners Website Redesign
Redesigning the website for a high-end certified professional accounting firm.
Challenge
While freelancing at a small but mighty design 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 after research to define and strengthen the branding, and then design a new user experience for the refresh.
My Role
UX/UI Designer
Tools
Adobe Creative Cloud
Duration
9 weeks, 2018
The Process
DISCOVERY
Review Research
I reviewed an insights document summarizing the user research done on S+C’s target audiences, business goals, provided services, active industries, current standing, and competitive advantages. This encompassed discovery workshops findings, user personas, and journey maps. A few disclosable points I consolidated 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 user goals: learning and connecting about services without getting lost, accessing documents
Old S+C Partners website.
Define
Simplifying the Information Architecture
First, we had to simplify S+C Partners’ super hairy architecture, so we began by laying out a sitemap of its existing hierarchy. The old IA (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, and created a sitemap.
Define
Defining the Brand Strategy & Vision
Our team’s research uncovered some bigger issues, such as gaps in branding strategy and vision. I needed to help fill these in first.
I explored different branding approaches using the firm's primary branding colours through digital experimentation with typography, photography, imagery, and accent elements. After narrowing the best options down into 3 solid approaches, I used mood boards to portray each vision's typography, photography, imagery, and colour treatments which were presented to the client. S+C Partners loved the first approach (see below!), which let me move forward with UX and layout ideation.
Design
Ideation to Iterations Through Feedback
With branding gaps filled in, I moved on to thinking about the experience. Using feedback from team critiques as well as reviews with the client, I went through a process of turning lo-fi ideas into hi-fi mockups.
I created interactive Invision prototypes of these mockups for user testing and stakeholder reviews. See examples of how feedback influenced the designs below.
Before
The text in the hero image made what the company was about vague. The description fell below the fold where users couldn’t easily see. Also the 4 service areas were not obvious clickables.
After
Moved the company’s background/description up as a sentence into the hero image. Added a header to the services section and made the 4 service areas much more obvious as clickable buttons.
Before
Users pointed out some of the photography didn’t have a clear connection to the page, and “how would I know who to choose to help me?”. Also the tab over the hero image was an element used for level 1 pages, but this was a level 2 page.
After
I made the way we approached tabs consistent between all level 2 pages, shortened the copy where possible, and added qualifications beneath each representative listed at the firm.
Before
In the first version of the prototype, the copy was deemed long and hard to read. The business also noted they wanted to upsell these services and enable more customers to reach out.
After
I added icons to make these points more readable, and also added a quick shortcuts below the other available services at the end of the page for contacting the firm.
Before
The organization wanted users to explore the site more using navigation in order to learn more about the business, rather than leave the site through search. Also this page had heavier blocks of text and a lot of wasted real estate. The client also wanted to upsell their services more across their web experience.
After
I removed the Search bar for now because before the feature was built or staged, we couldn’t test it. The texts were separated into smaller paragraphs and reviewed for succinctness. I tightened up the margins, made the graphics more on-brand through consistent colours, and added a shortcut to services at the bottom of the page.
Design
Final Versions
After applying two rounds of feedback to the designs, these were some of the finals. Click to view a larger size.
Sample Mobile Screens
I applied the same changes to our mobile prototypes as well. These were also reviewed by stakeholders and users for feedback in combination with the web screens above.
Style Guide
Deliver
Functional Specs Document & Delivery
As a practice between Collective Experience and our external development agency, I prepared a functional specifications document documenting page types, layout guides, colour guides, colour hex codes, font types, and font specs catering to both mobile and web.
Development
Design & Accessibility Reviews
As the development agency sent completed page links, I reviewed the staged pages and inspected alt tags on images and icons, font sizes, leading, tracking, margins, colours, and device responsiveness. I also tinkered with a screen reader to learn how that would digest the page for someone with impairments. The reviews made sure the website was accessible, responsive, and as accurate to the designs as possible.
Impact
Final Outcomes
Although I wasn't able to obtain the access to tools or quantitative metrics from the client for disclosure, the successful outcomes were a modern AODA-compliant website and strengthened branding strategy that was extremely positively received by S+C Partners LLP.
If I had the opportunity, I would have moved onto testing performance through usability tests measuring task completion rates prompting users the scenario of seeking a service and contacting the firm. I’d also use tools like Hotjar or Contentsquare to measure clickthrough rates and bounce rate improvements.
Below are some heuristics that were improved.
Better visibility of system status
Added text link hover animations, clear clickable buttons, and current page states using colour for users to know where they were and recognize what was clickable. The old site didn’t feature this.
Improved flexibility & ease of use
Services were directly available from the first level of the dropdown navigation, and I reduced 4-6 levels of pages down to 2 per menu item. Services and Contact also had shortcuts at the bottom of the pages to quick access and ease of navigation.
Matching system to the real world
Personable, approachable language and imagery that reflected the users’ real-world industries were used to build relatability. There was less imagery and friendly language in the old website.
Professional aesthetics and minimalist designs
Succinct, minimal copy, purposeful imagery, non-distracting colours, and clean typography gave the new site a clean, aesthetic, and minimalist look that was brand-compliant.
Stronger consistency & standards
The new site also carried high contrast colours, large readable font sizes, alt tags, and consistent layout structures to not only maintain consistency but fully comply to WCAG 2.0, AA.
Responsive design
The new site also no longer had broken components mobile and desktop. In the old website, at least 1 broken elements was found for every 2-3 pages accessed on the old site. All designs were reviewed and attuned for viewing on iOS, Android, and web.
Overall, the new website was a significant improvement from the old website. It had better findability, readability, accessibility, responsiveness, and branding alignment. The new branding direction also filled in the client’s branding gaps by establishing appealing and consistent photography, iconography, and typography styles that S+C Partners was able to reuse for all future marketing and communication pieces going forward.
