Problem
In recent years, Accessibility has advanced to a hot topic, both in the real world such as in the digital realm. With important government regulations and accessibility guidelines such as WCAG 2.1 and the EU Accessibility Act (EN 301 549), building barrier-free products is not an option anymore, but an obligation. What had been a small niche before, often overlooked by designers, developers and stakeholders, is being integrated more and more into every step of the development process.
Solution
Accesswave is an application I designed to solve accessibility issues for digital products. The project aimed to create a user-friendly platform for auditing, monitoring and improving accessibility. As the UX/UI designer, I was responsible for conducting research, branding, creating prototypes, and usability testing. This case study showcases my end-to-end process for crafting an accessible, modern solution.
01 Research & Exploration
Research Objectives
I wanted to examine which problems the providers of digital services are facing when they transform their products for compliance with the current accessibility guidelines. I aimed to discover which additional services and advice they need to make the transition as easy and efficient as possible for them.
This will provide value for business owners, government departments and other key players as well as for the growing number of people with disabilities who depend on accessible products to live a comfortable and high quality life.
Determine which problems the providers of digital products are facing who have to adjust, change or re-build their products according to accessibility guidelines
Find potential pain points of business owners, government agencies and other key players when analyzing their product for compliance with accessibility laws
Understand the guidelines of the current accessibility laws and how they should be applied to digital products
Understand in which way business owners benefit from the EU Accessibility Act in cross-border trading
Competetive Analysis
I analyzed three competing services to identify gaps in their functionality. This research shaped the foundation of the solution.
The analysis showed that each service puts the emphasis on a different solution. While all services provide automated tools for accessibility audits, the additional features are different:
accessibilitychecker.org focuses on manual audits and provides resources about accessibility and WCAG
UserWay utilizes AI technology to make real-time adjustments to the content of a website, automating fixes such as modifying alt text for images, adjusting contrast, and improving navigation for keyboard users. This automation helps ensure your site is continuously optimized for accessibility without manual intervention
AccessiBe employs AI-driven technology to perform automatic scans of a website every 24 hours, identifying and addressing accessibility issues. This ensures continuous compliance without the need for manual intervention
Today, automated tools are not able to solve most of the issues to reach compliance with the WCAG and EU Accessibility Act guidelines. Manual auditing and fixing is still necessary to cover most of the process.
User Interviews
To understand the pain points in accessibility auditing and monitoring, I conducted 5 user interviews with business owners and managers of digital platforms, which are affected by the regulations of the European Union. The interviews showed many common issues: recurring challenges were the lack of expertise and understanding of the accessibility guidelines, how to solve the issues in their websites, maintaining accessibility audits over time and integrating these actions into their workflow.
Number of interviews
5
Methodology
Interviews were held via video conference
Average Interview Duration
25 minutes
Affinity Map
Key Findings
Users are primarily motivated by the need to comply with legal requirements like the EU Accessibility Act and WCAG 2.1 guidelines
Compliance is often driven by public funding requirements and the risk of penalties
While compliance is the primary focus, many users also value inclusivity as it aligns with their organizational mission
Users are facing challenges in understanding the guidelines
Users need clear steps and fix recommendations to take action
Users need explanations in non-technical terms as they often do not have a technological background
Accessibility auditing should not happen only once, monitoring is an ongoing process
Automated solutions only solve a small percentage of the problems
While full automation by AI might happen in the future, most of the issues have to be solved manually
Accessibility should be part of the workflow, because it is easier to prevent these issues than fixing them and making changes to the final product
02 Define
Problem Space
Based on the research, I defined the problem as: ‘Users struggle to analyze their websites according to complex accessibility guidelines and lack expertise to fix the detected issues. They are facing difficulties in tracking accessibility progress efficiently due to disjointed workflows and insufficient guidance.’ The primary goal was to simplify accessibility evaluations and make results actionable. I prioritized features like guided checklists and automatic WCAG reporting.
Organizations need to achieve compliance with accessibility standards quickly and effectively to avoid legal consequences and maintain public funding, but they often lack the expertise and resources to understand and implement EU Accessibility Act guidelines on their own.
User Personas
How might we
simplify accessibility guidelines to provide digital managers with quick, actionable steps that help them achieve compliance without needing deep technical expertise?
How might we
offer solutions that help organizations to constantly monitor the accessibility of their digital services, so they can track progress and make changes to reach compliance with the EU Accessibility Act?
Feature Roadmap
I determined the key features of Accesswave in order to allow users to audit and monitor accessibility in their websites. As I came up with many ideas (some of them not being possible solutions at the given moment), I used prioritization matrices to get a clear understanding of which features to include in my solution.
Automated audits
A quick way to scan websites and documents for accessibility issues.
Dashboard
A comprehensive dashboard which shows information about audits, including score, progress tracking and a list of violations.
Issue descriptions
how in-depth information for each issue
Issue fix recommendations
include code snippets and visual annotations
03 Build & Test
User Flows
.png)
.png)
.png)
.png)
Low-fidelity Wireframes
Testing
I tested three task flows with 12 participants via Maze. I collected important data and gathered feedback from the participants.
Research Goals
Evaluate the usability and clarity of the main navigation and the dashboard
Find out which function the user prefers to organize the results
Determine which way to display the detected issues is most useful to the user
Understand the way the user navigates the platform
Sucess Metrics
Task Completion Rate
Percentage of participants who successfully complete each task.
Time on Task
Average time taken to complete each task.
User Flow & Behavior
Detailed analysis of taken paths and heatmaps
User Pain Points & Participant Satisfaction
Measured through post-task feedback
Tested tasks
Open the past audit for the website of the “Random Government Department” and download the accessibility report
Open the latest accessibility audit and find the issues which are tagged as “Forms.” Then open the Accordion menu to see the details for “Form fields should be properly labeled” and click the “Fix now” button.
Upload and analyze a PDF-file for accessibility issues
Iterations
After the tests I made significant changes to the prototype and iterated into high-fidelity, ensuring the UI adhered to accessibility standards. Key design elements included a progress dashboard with accessibility score, a graph that shows the change of the score over time, and a detailed list with metrics, issues and fix recommendations for accessibility audits.
I re-named the links in the main navigation
I changed the structure and the hierarchy of the main navigation
I added a top navigation bar with tabs to switch between audits
I changed the placement of buttons in the dashboard
I added a form and section to upload documents on the homepage
04 Prototype
Branding
Just enough
In developing the branding, I focused on creating a minimalistic aesthetic to ensure clarity and professionalism while allowing the content and functionality to take center stage. The design relies on a monochromatic palette of grey shades, paired with a single primary color. The primary color mainly serves as a slight saturating factor for the grey shades to make them look a bit more vivid than a completely desaturated grey. By avoiding secondary colors, the visual language remains cohesive and unobtrusive, aligning with the project’s user-focused and accessible nature. This approach ensures the branding feels modern, understated, and universally appealing, resonating with a wide audience while maintaining a timeless simplicity
Typeface
Because of the reduced, simplistic nature and the minimalistic aesthetic, I paid a lot of attention to the use of fonts in my design. The whole design basically consists of one typeface in different sizes and with slightly different letter spacing, using the second typeface only on a few occasions on elements, which should be quickly distinguishable. Using the Mono variant of my typeface also works as a tool to evoke a spark of excitement in the user. Again the motto is “Just enough."
Components of the UI
All of the elements were designed to avoid being intrusive, with a caring eye for small details such as the shades of grey, the use of the typefaces, unobtrusive border colors, buttons and form elements discreetly changing their states to provide feedback, to reassure the user of events without causing unnecessary distraction. Almost all of the screens have an unobtrusive wavy pattern in the background, which I decided not to use in the actual dashboard, because the pattern would conflict with the lines of the boxes and put additional pressure on the eyes. The whole UI should feel like it is communicating with the user in a soft and whispering tone, with clear instructions, without having to force any action.
Homepage
Dashboard
Analyze Documents & Files
Challenges
As the platform is very text-heavy by nature, showing extended lists of inspected elements, found issues and fix recommendations, I focused on the clear display of information without causing cognitive overload. I achieved this by creating a clean layout for the dashboard and providing options to sort the audit results by using tabs, which are being displayed in accordion menus with the option to hide the details.
Button & Form Field States
The interactive elements change in a subtle way during interaction with the user. I paid special attention to the focus-states and designed them in a way which balances usefulness with aesthetics.
05 Usability Testing
I conducted a usability test of the UI with 15 participants via Maze, focusing on task completion, time on task and a detailed analysis of the heatmaps and user flows. Additionally, I used post-test surveys to measure user satisfaction and get feedback about the interaction with the UI. I tested the important features of the platform and added a login-creation flow.
Research Goals
Evaluate the usability of the account creation and login flows
Find out which navigation pattern the user prefers to start a new audit
Find out how the user wants to organize the results of the audit
Find out how the user finds critical issues
Collect qualitative feedback on the overall user experience
Success Metrics
Task Completion Rate
Percentage of participants who successfully complete each task.
Time on Task
Average time taken to complete each task.
User Flow & Behavior
Detailed analysis of taken paths and heatmaps
User Pain Points & Participant Satisfaction
Measured through post-task feedback
Tested Tasks
Create a new account and log in
Start a new accessibility-audit for the website of the “Random Government Department”. You want to scan only one page
After completing the audit, you want to find the critical issue and see the recommendation on how to solve it
Iterations
The testing showed that big improvements were made by testing and iterating the early lo-fi wireframes. I detected several weaknesses in the Hi-Fi testing and fixed them accordingly:
I changed the labels to mark “critical issues” in the dashboard, making them clearer by adding text labels and deleting the icons
I changed the order of the tabs which filter the audit results
I renamed the tab “Passed Audits” to “Passed Checks” to avoid confusion with “Past Audits”, which I renamed to “Previous Audits.
.png)
.png)
06 Final UI
The final design received positive feedback and testing confirmed its effectiveness in streamlining accessibility evaluations. This project taught me once again the importance of iterative design and user-centered feedback loops. The tests revealed how different each user navigates the same platforms and that it can make sense to provide multiple navigation patterns and options for sorting and filtering information. The aspect of which information to show and what to hide was especially important in this case. It was challenging to work with such a text heavy platform in which the information has to be organized carefully to avoid causing confusion and overwhelming the user.
Key Learnings
Solving problems for users who have little to no knowledge about the subject they are confronted with
Organizing information effectively
Providing a clear layout for dashboards and lists
The important decision of which information should be visible and which should be hidden
Providing different sorting and filtering options and evaluate their usefulness by testing
Maintaining a minimalistic aesthetic to focus on the important information without causing boredom
Using as little as possible different elements and making small changes in the used elements to distinguish them from each other
Next Steps
Future improvements include additional testing rounds and coming up with diverse approaches for the display of information in the audit dashboards. I want to add more functions to filter, sort and mark the audit results to guarantee the best possible way of using the platform to reach compliance with current accessibility standards. I plan to conduct long-term user testing to measure adoption and impact.
An efficient way to test further improvements would be to come up with different solutions for the same problem and conduct A/B-testing.
Other improvements would be integrating AI to automate report generation and expanding support for additional accessibility standards.
This project reinforced my commitment to designing for inclusivity and innovation: