The Axxessibility Chrome extension is a tool developed internally by Equisolve to audit websites for accessibility compliance. It leverages Axe Core, an open-source accessibility testing engine, to evaluate web pages against established accessibility standards, identifying issues that need remediation. Accessibility remediation involves correcting these issues to ensure that websites are usable by people with disabilities, adhering to guidelines such as the Web Content Accessibility Guidelines (WCAG).
The extension integrates directly into the browser, providing users with a sidebar that lists accessibility issues detected on the current web page. By clicking the plugin icon, users can see a comprehensive list of potential accessibility barriers, each linked to the specific element on the page causing the issue. This interactive approach enables users to quickly identify and address areas of concern, making it a vital tool for ensuring web accessibility.
Equisolve, an award-winning digital agency specializing in services for public companies, created the Axxessibility extension to streamline the process of ensuring accessibility compliance in their client websites. As an internal tool, it was primarily used by the development and design teams to audit and improve website accessibility efficiently.
The Axxessibility Chrome extension, while functional, had a user interface that lacked visual appeal and clarity. The existing design did not effectively guide users in navigating and interpreting the information, leading to potential inefficiencies in the accessibility auditing process.
The project focused on redesigning the user interface to enhance visual appeal and usability without altering the extension's core functionality. This involved working within the existing framework while implementing a more cohesive and intuitive design.
The redesign of the Axxessibility Chrome extension aimed to achieve several key objectives to enhance its overall usability and effectiveness:
The existing interface was functional but lacked modern design elements that enhance user engagement. The goal was to create a more visually appealing interface that reflects current design trends and meets the professional standards expected by users.
Users needed a clearer and more intuitive navigation experience. By reorganizing information and employing effective design strategies, the redesign aimed to make the extension easier to use, allowing users to access and understand key data efficiently.
While improving the UI, it was crucial to preserve the extension’s functionality. The redesign focused on enhancing the user experience without disrupting existing workflows that users were accustomed to.
As a tool dedicated to identifying and correcting accessibility issues, the redesign needed to emphasize features that support effective remediation. This included clearer identification of issues and intuitive guidance for resolution.
I led the UI redesign process, focusing on developing a new visual identity and reorganizing the interface to improve usability. My responsibilities included creating branding elements, high-fidelity mockups, and design documentation to guide development. While I worked independently, I collaborated with the development team and the creative director to ensure alignment with technical requirements and design standards.
The extension is particularly aimed at vendors and agencies that build and manage websites for various clients, including public companies that require strict adherence to accessibility regulations.
Since the tool is used by developers and designers, the interface needs to cater to technically savvy users who require detailed information about accessibility issues and their remediation.
These users work under tight deadlines and need to quickly resolve accessibility issues. An intuitive interface streamlines their workflow, enabling them to focus on adjustments without complex navigation or unclear data.
Inspiration for the redesign came from various sources. Google's PageSpeed Insights was a significant influence, as it is widely recognized for its expert approach to performance analysis and clear, actionable feedback. This tool's focus on delivering critical information concisely and effectively guided my approach to improving the Axxessibility interface.
Additionally, I reviewed numerous data-heavy dashboard designs on platforms like Mobbin and Dribbble. These resources provided insights into best practices for organizing complex information in a visually appealing and user-friendly manner. Key takeaways included the importance of a clear information hierarchy, intuitive navigation, and effective use of visual elements to convey data.
The design system I developed for the Axxessibility Chrome extension was crucial in ensuring a consistent and professional user experience. It provided a structured approach to design, allowing for cohesive visual elements that enhanced usability and accessibility:
I designed a simple, professional logo to give the extension a unique identity, ensuring it aligned with the overall branding of Equisolve. The logo was crafted to be easily recognizable within the browser interface, reinforcing the tool’s purpose and identity.
I selected a color palette with high contrast ratios (minimum 4.5:1) to ensure the interface met accessibility standards and provided clear visual cues. The colors were strategically chosen to differentiate information by severity, helping users quickly identify critical issues.
The typography was chosen to enhance readability across the extension, with fonts that are legible on various screen sizes. I ensured the minimum text size was 12 points, balancing accessibility with modern design aesthetics.
I established guidelines for consistent spacing and layout to improve clarity and navigation. This included the use of whitespace to separate content and the strategic placement of elements to guide users through the interface efficiently.
Using Figma, I created high-fidelity mockups to visualize the redesigned interface. Key features included:
This top section provided a snapshot of essential audit information, including the page title, URL, and evaluation status, offering users a quick overview at a glance.
The middle section displayed key audit metrics, such as the accessibility score, rules tested, violations found, and the number of elements on the page. This area was designed to provide users with a clear understanding of the website’s accessibility status.
The bottom section presented a breakdown of each violation, organized by severity (critical, serious, minor). I used an accordion layout to facilitate easy navigation and included help links to assist users in addressing each issue.
