Accessibility Resource Center (ARC)
Creating the next generation ARC Portal UI and design system
ARC (Accessibility Resource Center) is TPGi's SaaS accessibility management platform through which management and teams can access analytics, defect reports, eLearning modules, an extensive knowledge base of developer techniques, and support – all in a single location. It is the optimal platform for leveraging all your company’s accessibility-related assets and activities.
To make ARC into a modular and personalized platform that our accessibility consultants could use as a tool for their engagements, and our commercial clients could more easily learn. As Principal UI/UX designer, I used personalization and progressive disclosure as a guiding principles. We wanted to show only the data that matters most to each user type. These principles guided me in simplifying task flows and the overall navigation structure.
3 screenshots of ARC prior to the Gen 5 redesign
Stakeholder Personas
Our solution targeted what data was most important to our internal and external users. We started by using key personas based on surveys of external clients and exploratory usability testing of our accessibility consultants who were already using ARC. We wanted to know, based on their roles, what they use ARC for and the types of data most valuable to them.
Simplified Site Map
We used our personas and internal usability testing with our consultants to come up with a simplified site map which pulled out key landing pages and consolidated many pages into subsections of those pages. User stories based on key findings from testing helped guide me along in this process .
Streamlined Navigation
Our site map helped us create a mental model for how to approach our navigation and portal design. By placing the contextual navigation to the right of the primary navigation, our users could more easily associate sub-pages with key pages.
Layout Wireframes
We introduced tabs on pages as a way to organize and consolidate our dashboards so that our users can find the data that matters to them more quickly, as well as breadcrumbs to improve way finding.
ARC Gen 5 Support Menu Prototype
To help onboard new users, we created a contextual support menu that offers personalized resources, such as video and help topics related to where they are in the portal. The contextual menu pattern was chosen because it is more accessible to screen reader users than a traditional onboarding approaches other portals utilize.
High-Fidelity UI Screens and Design System
I created a design system for ARC in Axure, which the product and development team could use to construct each page and dashboard. This will be the foundation of our pattern library, which will streamline the speed and efficiency at designing and developing new features and components for ARC Gen 5.
Outcomes
Surveys and interviews with our consultants and clients after launch showed a considerable increase in key feature discoverability as a result of the redesign. Our enterprise clients reported the same outcome, along with positive comments related to increased personalization from the support menu. Users reported greater success in finding key dashboard data from the tabbed navigation.
