Navigating the DocuPet Toronto website can be streamlined to improve user experience and accessibility. As the saying goes, there’s always room for improvement!
Content accessibility focuses on creating usable digital content for people with disabilities, whether permanent, temporary, or situational.
By following standards like the Web Content Accessibility Guidelines (WCAG), we can design content intentionally for accessibility, ensuring different types of users can perceive, understand, and interact with it.
While there are many opportunities to modify DocuPet’s website, which page has the most important content for the users? The Licensing page!
PROBLEM STATEMENT
How can we make it easier to find Licensing Content information with more accessibility support?
STARTING POINT
How might we make content more accessible?
If we make minor modifications to the current styles, we begin by asking questions to understand and identify the most important business goals to achieve through user actions and interactions.
We also determine the high-priority details users want to find easily and quickly to learn more about licensing information.
By defining the business goals and user needs, we can make the necessary changes to address both groups to ensure a satisfying user experience for both important parties.
The questions we would begin asking are the following:
- What is the Primary Call-to-Action Button or Link in the Global Header Navigation Menu?
- What is the floating box of Helpful Links? How should it add value to the user experience?
- What is an easier way to format the questions to reduce information overload?
Let’s begin with where and what we want users to focus on first.
CALL-TO-ACTION BUTTONS
Where should users click first?
With the original global header navigation, we have access to essential links to navigate the website, but we are missing a clear focal point to grab our attention and guide us to the next step.
In Version 1, we added emphasis to the current “Log In” call-to-action button. This choice supports returning users but does not guide new users on where to go.
For Version 2, we added a second call-to-action and shifted the primary focus onto “Signing Up” to convert new users to join DocuPet’s initiative while continuing to provide a shortcut link to “Log In” for returning users.
Now that there is a clear call-to-action button that meets most users’ expectations, it’s time to address the floating shortcut links!
STICKY SUB-NAVIGATION ACCESSIBILITY
Why are those words floating on the page?
Shortcut links are helpful if users understand their intended purpose and value to enhance the user experience.
Add a pop of colour!
To clarify what the Sub-Navigation Menu container is used for, we added a background colour to make it more obvious to see against the content below it.
Remove awkward gaps
In Iteration 2, we addressed the awkward gap or padding around the container of links by removing the extra spacing.
This reduced distractions from the moving content below when we scroll up and down the page.
Iteration 3 is where we had more fun with colors! Blue against blue is challenging to read.
We tried using white against the blue background as it’s a neutral color that complements the current color palette on the page, but the colour contrast ratio was too low!
Check colour contrast for a distraction-free experience
Since white had a low color contrast ratio, we tested with the other neutral color, black, which passed the WCAG Level AAA at an 8.3 color contrast ratio!
We added the finishing touch by making the container span the full width of the screen to ensure minimal distractions as the user scrolls, allowing focus on the content itself rather than the page layout.
EASIER-TO-READ FONT CHOICES
How can readability improve content accessibility?
When we scanned through the Frequently Asked Questions (FAQ) section on the licensing information page, we needed to put more effort into reading through each question to find what we were looking for.
To keep changes minimal, we tested changing from uppercase to sentence-case.
For example, sentence cases made it easier to read longer groups of text, such as the answer text below each question!
How Typography Hierarchy makes a difference
There was another concern with the font choice — the font size for the answers was too big compared to the question headings. We need some typography hierarchy here!
By increasing the font size of the question headings and slightly reducing the answer text, we guide users and add more balance and chronology from headings to paragraph text content.
With valuable content, websites require engaging visuals to lead users toward the most important information.
BRANDING CONSISTENCY
How can Brand Consistency build Trust, Credibility, and Engagement?
Being consistent with how we use brand assets can help businesses and website owners engage with users throughout the entire user journey.
From the home page, we noticed the second section is not as visually engaging as the fourth section on the same page.
Keep in mind that this is the home page, where new and returning users are most likely learning about the company and brand for the first time.
How can we use brand assets here to ensure the first impression builds trust and credibility and drives user engagement with quick access to helpful links?
Extend personality by re-using brand assets
For this example, we played around with using the same brand assets or images in the second section of the home page to add visual interest to the important helpful links, helping users find what they are searching for when first arriving on the website’s home page.
Clarify the focal point
The images in the first iteration seemed to distract us from the content itself. How might we adjust the card details to ensure users focus on the content itself?
We can reduce the image sizes to place less emphasis on them and guide users to the next piece of content to deliver value and engagement from each card.
One more thing!
We increased the font weight of the links to make them easier to scan and read, ensuring users who scan the page can find relevant links quickly.
THE GRAND REVEAL
What would the changes look like altogether?
What would the changes look like altogether? With the above changes, our approach would make it easier for users to navigate from the home page to the licensing page to find the information they need quicker from the FAQ section.
The key benefits include the following:
- Clear call-to-action buttons in the header navigation bar with a clear distinction between the primary and secondary button styles.
- Helpful links passing WCAG color contrast AAA level to ensure clarity and usage of the sub-navigation links.
- Sentence-case question headings with distinct typography hierarchy to reduce confusion and increase readability for longer texts.
What do you think? Let us know!
...
Want to make your website easier to use?
Contact our team to optimize your site with seamless user experiences to achieve your business goals sooner.
Get in touch with us today!