The Problem
Increase reach as thought leaders in the law field
Summary
Company & Backstory
McCarthy Tétrault is a Canadian law firm that offers a full suite of legal and business solutions to clients in Canada and around the world. The pandemic shifted attention into more online avenues with the website traffic more than doubling. The goal was to institute small scale changes that increased ease of use of the overall site. This extended into a full WCAG 2.0 AA compliance update.
Please note for privacy reasons certain details of the process have been withheld.
Team
Project Manager & Product Designer -
Hannah Cherrett
Web Master
Agency Developers
Internal Stakeholders
Timeline
8 Months
Process
Quick Links
Research
Google Analytics Data Evaluation
For the Google analytics information, the data was reviewed with an eye to what pages had the longest view times, what pages had the highest bounce rates, which pages had highest repeat viewers, etc. There was additional focus on blogs/article content with a large part of the newer traffic being focused on this content.
Top Take Away
There were higher bounce rates on pages with long form articles versus short form, with scroll depth on those who stayed on average being 75%.
Client Feedback
The team reviewed emails from clients with feedback on their experience with our site. Verbal feedback had also been passed along to the team for review.
Top Take Away
There were issues with search filters on Blog content. Given the number of tags on certain blogs, it generated a wall of words when the filter feature was activated.
Quote: It takes to long to find what I’m looking for…
Internal Stakeholders
A survey was sent to our to targeted Lawyers and Management level staff concerning the website. From that group, certain staff were selected for follow up and to dive further into their comments. This became a great opportunity to explore both issues and perceived issues on the site.
Top Take Away
Announced deals were not showing up on the lawyer bio pages. This is a pain point as it can be a deciding factor in a client reaching out to a lawyer for work.
Quote: Why isn’t the Wells Fargo deal showing up on anyone’s bio page?
Analysis
Constraints
Timeline
Budget
Process
I triaged the responses by level of difficulty, time to accomplish, increased access to lawyers/information, and cost. I then presented the research in mid- to high-fidelity Photoshop mock-ups in presentations to stakeholders.
Given timelines, no low-fidelity mock-ups were used.
Designs
Blog and Article “Read Time” node
Pain Point
Time and bandwidth are limited for all audiences and even more so for decision makers. When clicking into an article and seeing a long scroll without a sense of the time commitment required, many will opt out of reading the content entirely.
Solution
The more we know about something – including precisely how much time it will consume – the greater the chance we will commit to it. Adding a “read time” node reduced the bounce rate by managing expectations which increased the time on page.
Impact - There was an 3% decrease in bounce rate on long form articles and scroll depth increased by 5%. Unfortunately in a Drupal update, there was an issue with the correct read times being displayed and the element has been moved back into development.
Adding Search Line to Filters: People, Topics, and Services
Pain Point
Leading topics of a blog are always displayed but when additional topics are selected, it becomes a “wall of words”. While the search icon on the blog would allow searching on just the blog content, it is not as intuitive.
Solution
We extended this topic’s pain point to all article/blog filters. Just below the title we added a search line similar to the main search feature. While all keywords were still listed below, the search function would allow visitors to more easily access a particular topic.
Impact - We received positive feedback from clients and increased time on blog pages.
Blog and Article Sharing - CTA Button
Pain Point
We only had a share function at the top of each article. We were missing the opportunity to have the same call to action at the bottom of the article.
Solution
Removing the need for even a single click (the back to top button) and having the sharing option again at the end of the article (for when a reader has finished) increased the chance of the article being shared.
Impact - This increased share rate by 5%.
The Deals & Cases: Closing Dates
Pain Point
One of the main features on a Lawyer’s Bio page is the top Deals & Cases that they have won. These Deals & Cases are sorted by closing date. Hence, all Deals & Cases without a closing date were being listed at the end of the list and not showing up on their bio pages.
Solution
We added a new field for "Announcement date". The results would then be sorted based on both the "Closing date" and "Announcement date" fields, which means if "Closing date" has no value, "Announcement date" would be used in the sorting if it has a value. On the page of the Deals & Cases, the label "Date Closed" would be replaced by "Announcement date".
Impact - Over 200 key deals can now be found on key Lawyer’s bios.
Testing
Kanban Card
We used virtual Kanban cards to track each ticket from creation to close. It allows all parties to see the status of each ticket and track on-going comments.
Testing script
Each issue/ticket was tested through a quality assurance process. I tested the tickets in both English and French at 5 different widths to ensure that the experience was consistent for all users. If an issue did arise, I made sure to explain how I got that error and took screen shots of the current state in testing and the desired state (if possible). This was then loaded on to the Kanban card as feedback or approval to move to the next stage. After any ticket went live, another test took place to make sure all tickets loaded correctly.
Accessibility Updates
AODA Compliance
As of January 1, 2021 our website needed to meet WCAG 2.0 Level AA guidelines. This level would allow us to meet compliance regulations in all countries in which we operate.
Starting The Process
Webmaster and Agency ran an audit of our site to evaluate what aspects of the site did not meet guidelines.
They uncovered over 60 issues that needed addressing:
Smaller problems - Link text, table headers, and alt-text.
Large problem - Our brand orange did not meet contrast ratio requirements. This touched on everything from background colour, to icons, to hyperlinks.
Development team started work on the bulk of the edits.
I identified all points that would be affected by this change in colour update.
Would a Global Solution Work?
We first explored a quick global solution of adding a new hue for the orange that would meet compliance guidelines and extent our brand palette. This caused two main issues:
It changed the bright energy of the brand into something more sombre.
In smaller formats, variations of the new orange looked similar to our competitors in the market.
For these reasons we chose to not move forward with this direction.
Research - Competitive analysis
I looked into research on contrast ratios and the application with the colour orange. One of my favourites was a research paper by Bounteous.
I also looked into other major brands who use orange as their main colour to see how they have addressed the issues, for example:
Harley Davidson
Penguin Books
Netherlands Soccer Team
Tropicana
Mastercard
Etc.
Mid-fidelity Mock-ups
Due to the tight timeline, I generated mid-fidelity mock-ups to explore possible solutions. I then presented top options at a team level and my recommendations for moving forward. After confirming our selection, I validated that the changes would meet guidelines and would be possible in our timeline with the webmaster and development team. This went into two cycles of revisions with all teams before the final build took place.
Selection of Final Site Examples
Landing Page
‘Search More News’ link – This style of link was updated from bold orange text (which did not meet contrast guidelines) to black text with a bold underlined and chevron icon at the end. The orange was switched to being the hover state underline colour. This kept the essence but met WCAG guidelines.
Orange Call Out Cards - At the top of most sections we have a call out card to indicate the newest publication or blog post people should care about. The text colour on every single background combination was adjusted to black or white to meet contrast guidelines. In the case of orange, black was now the updated colour.
Books & Guides
Publication Titles - For the bolded titles of each publication, we continued the theme of the coloured underline as the hover state. It showed the interaction but did not cause any issues with a user reading the text.
Industry Call Out - Originally the icon and the sector text would both match the industry colour. We kept the publications icon in the coloured formats and then changed the text to black. The smaller font and uppercase lettering showed enough of a distinct hierarchy that the colour change did not cause any loss of information.
Bios
Return to ‘People’ Section - using an orange icon (icons being read by the screen reader) and black text (which has proper contrast) gives the opportunity to keep the brand colour but allows the section to be read accessibly.
Quote - The large orange text quote changed to a black quote overlaid on the same call out as we had for the awards section. While this reduces the distinction between sections, it does create consistency for call out sections and allows for greater contrast in text and keeps the brand essence.
Email - by changing the email line from the orange bold to a bold black underlined (which matches people cards) we meet guidelines but keep the orange as an underlined hover state.
Anchor links - These links were updated to match the now-bold and underlined non list links. The consistency of format reinforces the pattern with users.
Lessons Learned
WCAG Guidelines
To complete the project and have an informed discussion with our vendor, I had to develop an in-depth knowledge of the current WCAG guidelines. It allowed me to push back on proposed solutions and advocate for further changes to internal processes.
Vendor Management
This was my first time as a full lead on a website project with an external vendor. It gave me a better understanding of acceptable time lines and what to do when those deadlines are not being met.
Clear Feedback
There is a great benefit in making sure there is a consistent vocabulary when discussing issues. This clarity is further increased with the use of visual snapshots to make sure everyone is on the same page.