Building and evolving a design system that aligns UX strategy with the business
Improved how users navigated their content, increasing efficiency by 1.5x and task success rate by 11%, and paving the way for Inkling's first steps toward inclusive design.
Efficient & Inclusive Design
Responsive Design
Establish a responsive layout that adapts seamlessly across different screen sizes with proper breakpoints.
Accessibility
Ensure the app meets WCAG accessibility standards by improving text scalability, contrast, and screen reader compatibility.
Efficiency
Create a more inclusive experience that prioritizes both speed and ease of navigation without sacrificing accessibility.
Role & Team
Overview
It is well acknowledged that design systems play a crucial role in enabling rapid brand scalability, consistency, and cohesiveness. Thinking in systems and approaching design strategically has become a necessary skill.
This project walks through my journey of implementing a design system—not just the challenges I faced, but more importantly, how I approached it from a strategic and business-oriented perspective. My goal was to secure buy-in from leadership by framing the design system as a business necessity.
The Demand for Accessibility
Our customers include some of the largest retail and healthcare/insurance organizations, and they recognize that making their learning materials more inclusive not only broadens their reach but also supports critical compliance requirements. Accessibility wasn’t just a nice-to-have—it was a core expectation. Meeting that need became a key part of our mission and a standard we were committed to delivering across our products.
Redesign the layout for better usability and accessibility.
The primary UX challenge is to redesign the layout to improve both usability and accessibility without compromising the app's intended goal of helping users navigate content quickly. The existing small square layout with horizontal scrolling creates more friction than efficiency, especially across different screen sizes. The inconsistent information hierarchy and lack of accessibility features further prevent users — particularly those with visual impairments — from engaging with the content effectively.
The Solution
Utilizing Lists
I proposed replacing the horizontal scroll with a list view, which offered more space for titles, improved readability, and decreased the time it took users to scan through the list and find their documents, increasing efficiency by 1.5x.
Accommodating Accessibility
I highlighted the challenges of the usage of cards made it difficult to fit titles. I demonstrated how the list view would be more suitable for visually impaired users who often need to enlarge text for better readability.
Semantic Structuring
As part of my audit, I also noted that the semantic structure of a vertical list is typically easier for screen readers to navigate. By emphasizing that many of our users were frequently on the road, I effectively highlighted the importance of implementing a screen reader-friendly design to accommodate their needs.
Proper Breakpoints
and Grids
With a mobile-first approach, I led our product team to adopt responsive design principles in our design system. I collaborated with the design system owner to establish breakpoints and touch targets to make sure our platform would be able to scale across multiple devices and platforms.
Design System
Upon auditing the mobile platform, I updated the design system with guidelines for proper breakpoints across the responsive web platform, mobile devices, and tablets.
Additionally, I refined the icons to improve accessibility, ensuring they adhered to touch target guidelines and did not rely solely on color for state changes to make it clear for those who may have colorblindness.
Landscape Analysis
After discussing with engineers, I learned the heavy use of carousels aimed to fit more sections while minimizing vertical space — a design they strongly supported, citing Google's Play Store as an example of utilizing horizontal scroll.
However, thumbnails were hard to read in the limited space, and carousels, while suitable for images, are problematic for screen readers and text-heavy content. Narrow images also struggled to scale on mobile, reducing their effectiveness. There were also inconsistencies in hierarchy across the entire app.
Highlighting the Challenges
I highlighted the challenges of small thumbnail grids, explaining to the product team that grids with more than two columns made it difficult to fit titles — especially since many documents lacked unique covers.
Lack of Clarity
Titles were hard to read and only showed the first few words created confusion, particularly for visually impaired users.
Unscalable
When attempting to scale up the text for visually impaired users, the cards could only accommodate 1-2 words..
Inconsistent Visual Hierarchy
The absence of a clear information hierarchy resulted in inconsistent layouts, which added complexity to the user experience.
Presenting the Alternatives
By demonstrating how scaled-up text would appear and be read by screen readers on the using smaller cards versus edge-to-edge ones, our product team agreed to adopt a list view for courses and a two-column grid to prioritize titles over thumbnails.
Increased Visual Clarity
Thumbnails and titles are now more distinct, offering clearer and more informative content.
Scalable
Text can now be scaled up while still displaying most of the course title, making it easier for users to read and understand.
Consistent Hierarchy
The structure of the list view maintains design consistency, even when scaled to different sizes.
Using A/B Testing to Advocate for my Decisions
While the product manager supported the changes, the lead engineer disagreed, arguing that horizontal scrolling was more visually appealing and that ARIA roles would ensure screen reader functionality. I acknowledged his concerns but emphasized the importance of usability. To resolve the issue, I suggested an A/B test.
Results
User testing revealed that horizontal scrolling frustrated users, particularly on smaller screens, while the list view improved task completion speed and document discoverability, leading to better efficiency and higher compliance rates. By reducing task completion time and improving discoverability, we not only enhanced usability but also ensured that employees could engage with training content more efficiently, increasing compliance rates.
Inkling's Design System
These demonstrations and tests effectively advocated for a mobile-first approach, leading our product team to adopt responsive design principles in our design system. I collaborated with the design system owner to establish breakpoints and touch targets for both mobile & desktop, a foundation still in place today.
Implementing
WCAG practices
I also led the effort to ensure our color and contrast met WCAG guidelines, collaborating with the designer overseeing our Design Management System.
Project Reflection
Outcome
In the end, my efforts helped Inkling take meaningful steps toward an accessible and mobile-optimized platform, ensuring a better experience for all users while meeting WCAG guidelines. Although the transition to a mobile-first approach and more accessible design was a complex process, it ultimately led to substantial improvements. Despite early pushback from the engineering team, I was able to demonstrate through design iterations and examples how these changes would enhance the user experience for all users, especially those with disabilities.
What I'd Do Differently
Navigating WCAG guidelines was challenging, as they continuously evolve, much like UX. This was our first step toward making our product more inclusive, so we initially focused on testing semantic structuring for screen reader compatibility. However, since accessibility was still new to us, we were exploring the best ways to test with users who rely on screen readers and scaling up their text. My next steps would have been to conduct user testing on our accessibility improvements.