Accessibility improvement of the core user flow - Quantive

Overview

At Quantive, the absence of a structured approach to accessibility created significant barriers for users with disabilities. As a Senior product designer and then Design Lead, I recognized the crucial need to champion accessibility initiatives to ensure an inclusive user experience across our products. As prioritised by our user and stakeholders, the first user flow to undergo accessibility improvements was the core one for the product - Create objective, Create key result, Update key result.

Company

Quantive

Objective

In this project, the primary objective was to comprehensively review and redesign the screens constituting the core user flow within our digital interface. The aim was twofold: to address prevalent accessibility shortcomings and to navigate through the challenges posed by legacy components entrenched within our existing code base. Our focus centered on identifying and rectifying accessibility barriers within these screens while simultaneously strategizing an approach to modernize the underlying codebase, liberating it from the constraints imposed by legacy systems and outdated design paradigms. This objective was crucial in aligning the user flow with contemporary accessibility standards and best practices, ultimately fostering a more inclusive and user-centric digital experience.

The problem

The core user flow was a prime example of accessibility issues found within Quantive Results as our application lacked compliance with the Web Content Accessibility Guidelines (WCAG), consequently failing to deliver an optimal experience for our disabled users. These screens posed substantial accessibility challenges, creating barriers for users with disabilities and hindering their seamless interaction with our platform. This particular user flow represented a significant aspect within our broader accessibility program, where one of the objectives was to address legacy functionality that impeded inclusivity and usability for individuals with diverse needs.

The goal

The overarching goal was to transform these screens to align with established accessibility standards, thereby ensuring a more equitable and accommodating digital experience for all users. As this was the first user flow that underwent accessibility work, a goal was to establish a collaborative process, onboard team members, and establish success metrics.

Approach

Research and analysis

In the research and analysis phase, our approach was in several directions, encompassing user interviews and rigorous accessibility testing to comprehensively assess the shortcomings within the user flow. Through user interviews, we engaged directly with our user base, uncovering specific pain points that were impeding usability for individuals with disabilities. Recurrent issues surfaced, including challenges related to color contrast, inconsistent interactions across screens, and a notable absence of keyboard and screen reader support. These insights shed light on critical barriers hindering user interaction and guided our subsequent efforts toward crafting solutions that prioritize inclusivity and ease of use.

Additionally, internal accessibility audits further illuminated the extent of the challenges within the user flow. The audits served as a comprehensive review mechanism, unveiling an array of additional accessibility issues that were previously unidentified. These findings underscored the urgency and depth of the enhancements required, reaffirming the significance of our redesign efforts to bridge these accessibility gaps and ensure a more accessible and accommodating digital environment for all users.

Design process

During the design phase, our focus revolved around translating the insights gathered from research into tangible solutions that prioritize accessibility and inclusivity within the user flow. We initiated this phase by addressing the identified pain points—specifically, the color contrast issues, inconsistent interactions, and the absence of keyboard and screen reader support.

To establish consistency in colors, interaction states and behaviors, we needed the design system. The creation of all necessary components was prioritized and the legacy custom code that was previously used was replaced by new reusable components that carry consistency across the board. For their design and implementation, all WCAG 2.1 AA requirements were taken into consideration. I also partnered with our UX Writer to improve the tone and voice and review the information architecture. Some of the issues we managed to tackle were the excessive use of tooltips and missing labels and placeholders for form inputs.

Then, we revised the interconnection of the different screens forming the user flow. This resulted in the redesign of several key screens - the main navigation, the update key result form, and the home dashboard. For those redesigns, several versions of prototypes were tested with users and we tried to solve information architecture issues, and lack of customization and we used the design system components to spread consistency.

Implementation

During the initial phase of the implementation, the developers tried to work with the legacy code which was on an old Angular version, and the design system components which were on a new Angular version producing a so-called “hybrid” app. This produced many bugs with keyboard navigation and screen reader support and it was a lesson learned for all of us. As a result, we identified the need to migrate the code base to the new Angular version to work for a sustainable future. At this point it was obvious to everyone that accessibility heavily relies on the quality of the codebase.

Results and impact

In the aftermath of the redesign efforts, the results and impact were strikingly evident, showcasing significant advancements in accessibility and user experience within the revamped user flow. Quantitative and qualitative measurements post-implementation revealed a notable improvement in several key areas. Notably, WCAG compliance percentage went up, weekly active users went up, user satisfaction went up, and the whole initiative allowed us to have conversations around accessibility both internally and externally with customers. Moreover, the implementation of consistent interaction patterns resulted in a more predictable and intuitive navigation experience across screens, positively impacting users' ability to comprehend and engage with the interface. The integration of robust keyboard navigation and screen reader compatibility facilitated seamless access for users reliant on these tools, removing barriers and allowing for a more inclusive digital experience.

Ultimately, these results underscored the tangible impact of our efforts, solidifying the redesigned user flow as a more inclusive, intuitive, and accessible component within our digital platform, catering equitably to users with diverse needs.

Lessons learned

One of the pivotal lessons learned was the paramount importance of early and continuous user involvement throughout the design process. Engaging users with diverse abilities from the project's inception proved instrumental in understanding nuanced accessibility needs, allowing us to craft solutions that better aligned with user expectations.

Additionally, the significance of cross-functional collaboration emerged as a crucial factor in successful accessibility initiatives. Integrating perspectives from design, development, and accessibility experts fostered comprehensive solutions that effectively balanced technical feasibility with user-centric design. Furthermore, iterative testing emerged as an invaluable tool, emphasizing the need for continuous validation and refinement of design choices based on user feedback and usability testing results.

The process also highlighted the ongoing nature of accessibility improvements. We learned that accessibility is not a one-time endeavor but an evolving journey requiring constant attention and adaptation. Embracing this continuous improvement mindset became integral, prompting us to embed accessibility considerations as an inherent part of our design ethos and development processes.

Overall, these lessons underscored the need for holistic, user-centered approaches in addressing accessibility challenges, emphasizing the iterative nature and collaborative efforts necessary to create more inclusive and usable digital experiences.