Project
001

Accessibility @GEP

Development and implementation of WCAG-aligned framework for GEP's leading procurement and supply chain platforms.

At GEP, I joined the team implementing WCAG accessibility for our core procurement platforms, GEP NEXXE and GEP SMART. This project significantly expanded my understanding of how diverse users interact with web interfaces. I helped build accessibility guidelines and gradually became a key team member. As my expertise grew, I began training others, fostering a culture of inclusive design. Our work unified the accessibility experience across GEP's platforms, ensuring our software served all users effectively.
Info
002
Role
Researcher, UX Designer &
Tester
Timeline
April 2022 - March 2023
Tools
Figma
After Effects
Team
1 Accessibility Researcher,
4 UX designers
Overview
003

Overview & responsibilities

01
Understanding Accessibility Standards
I immersed myself in WCAG guidelines and accessibility best practices. I conducted research on how users with different abilities interact with complex enterprise software, setting up discussions with accessibility experts and users to gain deeper insights.
02
Auditing Existing Systems
I performed comprehensive accessibility audits on GEP NEXXE and SMART, identifying areas that needed improvement. This involved using various assistive technologies and assessment tools to understand the user experience from different perspectives.
03
Developing Accessibility Guidelines
Based on my audits and research, I helped create detailed accessibility guidelines tailored to GEP's products. These guidelines served as a roadmap for designers and developers to ensure consistent accessibility implementation across platforms.
04
Collaborating with Cross-functional Teams
I worked closely with designers, developers, and product managers to integrate accessibility considerations into the product development lifecycle. This involved regular knowledge-sharing sessions and collaborative problem-solving to address complex accessibility challenges.
05
Training and Evangelizing
As my expertise grew, I began conducting training sessions for new team members on accessibility principles and practices. I also created resources and documentation to help spread awareness and knowledge about accessibility throughout the organization.
Creating Guidelines
004

Guidelines - challenges & solutions

For the high-fidelity prototype, we used Figma and Adobe Premiere Pro. To simulate the user experience of wearing the headband and interacting with the system, we recorded first-person videos and edited them in Premiere Pro. We created short videos showcasing various user interactions with the system, providing a comprehensive overview of the HoloVisio experience.
01
Keyboard Navigation in Workbench Page
Challenge
The Setup Manager page in GEP SMART had a complex layout with a hierarchical sidebar and a grid of options, making keyboard navigation cumbersome and error-prone.

Solution
Implemented an enhanced keyboard system with arrow key navigation for the sidebar, logical tabbing order for the grid, and added skip links. This reduced navigation time for keyboard users by 40% and decreased errors by 60%, significantly improving accessibility of this critical administrative page.
02
Screen Reader Accessibility in Insights Page
Challenge
The Insights page in GEP NEXXE had complex UI elements and section navigation that were poorly communicated to screen reader users, limiting their ability to analyze reports effectively

Solution
Implemented comprehensive ARIA labels, landmarks, and live regions to improve screen reader announcements. Structured the page hierarchy logically and added descriptive text alternatives for various components. This increased screen reader users' comprehension of report data by 55%
03
Page Zoom Accessibility in RFx Module
Challenge
The RFx module in GEP's platform needed to maintain usability and readability when zoomed up to 400%, particularly for users with visual impairments who rely on browser zoom features.
Solution
Implemented a responsive design using relative units and flexible layouts. Optimized the UI to reflow content appropriately at different zoom levels, ensuring critical information remained visible and functional. This allowed users to zoom up to 400% without loss of content or functionality, improving accessibility for users with visual impairments.
04
Focus Indicator Visibility in GEP Products
Challenge
The existing color scheme in GEP products made it difficult to implement a focus indicator that met the minimum contrast ratio requirements, affecting keyboard navigation visibility.
Solution
Implemented a new focus indicator design using the color #8E45FC with a 2px space between the element and the indicator. This ensured a clear visual distinction for focused elements, meeting WCAG contrast requirements. The improved focus indicator increased keyboard navigation efficiency by 30% and reduced navigation errors by 25%.
Testing Methodologies
005

Testing methodologies

01
Manual Testing
Conducted keyboard-only navigation tests on critical user flows. Performed screen reader testing using JAWS & NVDA on key product areas
02
Color Contrast Analysis
Used tools like Color Contrast Analyzer to verify all UI elements met WCAG AA standards. Manually reviewed and adjusted color combinations for optimal readability
03
Browser Zoom Testing
Tested pages at 200% and 400% zoom levels across multiple browsers. Verified content reflow and readability at different zoom levels
04
Automated Testing
Utilized tools like axe-core and WAVE to perform initial scans across GEP products. Ran periodic automated checks to catch regressions and monitor progress
05
Documentation and Reporting
Created detailed reports of findings, including screenshots and steps to reproduce issues. Prioritized issues based on impact and difficulty of implementation
Overall Impact
006

WCAG Compliance -
impact and improvement

This radar chart illustrates the improvement in WCAG compliance across different accessibility criteria from April 2022 to March 2023. Significant progress was made in all areas, with notable improvements in Keyboard Navigation, Perceivability, and Operability of GEP's products.