Crafting an Accessible Experience: Designing the AudioEye Toolbar
UI design solutions for a web personalization tool that puts accessibility first.
0 0
PROJECT OVERVIEW
TIMELINE
December 2020 – March 2021 (Released April 2021)
ROLE
Lead UI Designer
TOOLS
Figma, Color Contrast Analyser, iOS VoiceOver
SUMMARY
As a Junior Product Designer and my third month at AudioEye, I was entrusted with leading the UI design for one of the company’s flagship products: The AudioEye Toolbar. This web accessibility tool empowers users to tailor their browsing experience to their unique needs. My mission was to refine the visual design, integrate new admin controls, and adapt the toolbar for mobile — all while ensuring compliance with Web Content Accessibility Guidelines (WCAG).
With support from a small yet focused team (1 Designer, 1 Product Manager, and Engineers), we launched a fresh, accessibility-first toolbar to production in April 2021.
ABOUT AUDIOEYE AND THE TOOLBAR
AudioEye is a SaaS company specializing in digital accessibility solutions. Once installed on a customer’s website, the AudioEye Toolbar provides users with customizable tools to enhance their browsing experience. From magnifying content to simplifying navigation, the toolbar is designed for people of all abilities.
Key Features of the Toolbar:
Customization: End-users can adjust tools to fit their preferences.
Accessibility: Built with WCAG compliance at its core.
Admin Controls: Enables businesses to brand and position the toolbar on their websites.
KEY DESIGN SOLUTIONS
1. Building a Mini Design System
When I joined the project, the toolbar’s design system was in its infancy. I expanded this system to ensure consistency and efficiency, contributing:
Typography: Scalable, accessible type styles.
Color Palette: Neutral tones to support white-labeling.
Keyboard Focus Styles: Enhanced for usability.
Custom Icons: Simple, stroke-based icons for a clean and modern aesthetic.
These updates provided our engineering team with a reliable foundation, accelerating development and ensuring a cohesive user interface.
0 1
DISCOVERING
2. Introducing New Features: The Admin Panel
The toolbar redesign included a major addition: an admin panel for business owners. This panel introduced:
Toolbar Placement: Customizable icon positioning on the webpage.
Accent Color Selection: Owners could choose a branded color for the toolbar’s icon.
Light & Dark Themes: Switchable themes for better visual harmony.
Challenge: Balancing infinite customization options with WCAG compliance.
In Version 1, owners could apply their selected color to the toolbar's top and bottom bars. However, this approach proved ineffective as a branding solution, as the chosen color would be prominently visible to end-users rather than serving the owner’s branding needs.
This realization prompted me to revisit and refine the design strategy.
In Version 2, the design focused on allowing owners to customize the toolbar’s icon color. This approach offered a more impactful branding opportunity, as the icon remains consistently visible, regardless of how users interact with the toolbar.
The default color was set to the standard accessibility blue (#1275B3), with an option for owners to select their own branding color. To ensure ease of use, I included a reset button, enabling owners to revert to the default color quickly if needed.
However, this introduced a new challenge: how to provide unlimited color choices while maintaining accessibility. For example, if an owner’s brand color was yellow, how could AudioEye ensure sufficient contrast to meet WCAG compliance?
Solution: For accent colors, we implemented dynamic contrast adjustments. For example, if a brand’s color choice was light yellow, the icon automatically adjusted to black or white outlines for optimal visibility. This innovation maintained accessibility while offering flexibility.
3. Mobile Adaptation
Designing for mobile required more than resizing — it meant rethinking functionality.
Key Adjustments:
Removed desktop-only features (e.g., cursor-related tools).
Optimized touch targets for mobile (increased from 24x24 to 44x44 px).
Designed a streamlined layout that prioritized clarity on smaller screens.
Admin features, such as icon placement, were also tailored to mobile, ensuring consistent branding across devices.
4. Elevating the Aesthetic
To create a less obtrusive and more seamless product, I introduced transparency to the Visual Toolkit’s background panel. At 90% opacity, it subtly showcased the client’s website underneath while maintaining WCAG compliance for buttons and key elements. This small change had a big impact, earning praise from stakeholders for its modern, unobtrusive design.
CHALLENGES AND SOLUTIONS
Color and Contrast Compliance - Navigating WCAG requirements was central to this project. Two key challenges were:
Accent Color Customization
Infinite color options meant maintaining a contrast ratio of at least 3:1.
Light Theme Contrast
Avoiding harsh black-on-white contrasts, which could cause eye strain.
0 3
DEFINING
Solution:
Dynamic outline adjustments for optimal contrast.
Solution:
Introduced muted greys with subtle blue tints for a softer, modern look.
RESULTS & NEXT STEPS
Launch Date: April 2021
The redesigned AudioEye Toolbar was successfully released and met its goals:
Improved usability across desktop and mobile.
Enhanced accessibility and branding options for businesses.
Positive feedback from stakeholders and users.
Next steps included usability testing with Fable, a company specializing in accessibility testing with people with disabilities.
04
DELIVERING
REFLECTIONS AND TAKEAWAYS
This project marked a turning point in my career, showcasing my ability to lead design initiatives for complex, accessibility-focused products. Here’s what I learned:
Involve Engineers Early: Collaboration in the initial phases ensures designs are practical and adaptable.
Leverage a Design System: Even a lightweight system accelerates workflows and maintains consistency.
Prioritize Accessibility: Testing for WCAG compliance challenged me to broaden my design perspective and create inclusive solutions.
05
REFLECTION