A Scalable Design System for AccessAlly

AccessAlly is a powerful membership and LMS platform for WordPress. As the product grew, inconsistencies in UI elements and design patterns led to inefficiencies in development and a fragmented user experience.

My goal was to create a centralized product pattern library that would streamline design and development, improve UI consistency, and enhance usability across the platform. The key objectives were to improve user adoption of new features, reduce development time, and create a scalable system for future updates.

Research Process

To understand the scope of the problem, along with the product manager I conducted:

• UI Audit to identify inconsistencies across the product.
• Stakeholder Interviews with developers, support teams, and clients to gather pain points.
• Competitive Analysis of design systems used by similar SaaS platforms.
• User Feedback Review to pinpoint usability issues related to UI inconsistencies.

Key Insights

• Inconsistent UI Components: Buttons, forms, fonts, and navigation styles varied across different areas.
• Redundant Development Effort: Developers were recreating similar components from scratch.
• Steep Learning Curve: Users found it challenging to navigate due to inconsistent patterns.

To address these challenges, I proposed a unified product pattern library that would include:

1. Standardized UI Components – Colors, buttons, forms, modals, tables, charts, and typography guidelines.
2. Reusable Design Patterns – Common UX flows like onboarding, notifications, and settings.
3. Centralized Documentation – A single source of truth for designers and developers.
4. Accessibility Best Practices – Ensuring compliance with WCAG 2.2 for inclusivity.

• A design system is a living document. Regular updates and governance are essential for long-term success.
• Cross-functional collaboration is key. Involving developers early led to smoother adoption.

Initial Wireframes & Prototyping

I collaborated with the product manager to create a low-fidelity component library, which was tested internally before moving to high-fidelity designs.

Usability Testing & Iteration

• Ran internal usability tests to refine the UI patterns.
• Based on feedback, we introduced component variants to accommodate customization flexibility.

The final AccessAlly Product Pattern Library included:

• A comprehensive component library with standardized UI elements.
• Pre-defined UX patterns to ensure consistency across features.
• Detailed design documentation for both designers and developers.
• A scalable system that could grow with future product updates.

Results

• Reduction in UI-related development time.
• Significant decrease in design inconsistencies across the platform.
• Faster feature deployment, with developers having a library to leverage reusable components.

Expand the library to include motion guidelines and micro-interactions.