Usability Report

In this section, I have outlined the improvements made to the landing page of The Alchemist's Atlas to enhance both accessibility and usability. The goal was to ensure that the mindfulness themes of the site were supported by a frustration-free user experience with user-friendly navigation.

Using the automated validation tools, I was able to identify and resolve several underlying code issues present on the site. For example, W3C flagged < section > elements that lacked proper headings. I fixed this by converting the containers to < div > classes. WAVE identified very low contract errors when it came to h1 and h2 elements. I fixed this by adjusting the CSS color palette to ensure the text pops against the background, meeting the standards for readability. I had some trailing slashes on elements, specifically < input / > and I cleaned up redundant backslashes in the code. In the CSS, I was able to refine the clip property and noted that pointer-events:auto is supported across browsers.

I also conducted a blind usability test with three users to see how they interacted with the site without guidance.
The three questions I asked were:

  1. Do you know how to navigate between pages?
  2. Can you find the link to the Substack blog?
  3. Can you find the link for The Atlas page?

I found that users were able to easily identify the large portal GIFs as the primary way to move through the site and then played with the compass rose icon as a secondary option. The Substack was easily located at the footer of all pages across the site for users with a 100% success rate. For finding The Atlas page, this was a major pain point. Most testers missed the Atlas link entirely because it was represented by a small emoji in the compass menu, which they perceived as decorative art rather than a button.

Based on the test results, I made some strategic updates to the site to improve use and accessibility. I removed position: absolute from the footer to ensure the footer stays at the bottom of the content naturally across different browser heights, preventing overlap on smaller screens. To address the Atlas link that felt hidden to some users, I've worked on making the navigation icons more intuitive and ensuring they have clear labels for screen readers. Added visually-hidden classes where necessary to provide context to assistive tech without cluttering the minimalist visual design.

This module helped transform the site from a visual-aesthetic experience into a more standards-compliant prototype. By testing for different issues and cleaning up HTML/CSS, the site is now significantly more inclusive for users with visual impairments.