Accessibility Toolkit / UI/UX Design / Product Concept
What if accessibility guidance lived inside the design process instead of appearing after the design was already finished?
The platform brings key accessibility tools into one guided experience, including colour contrast checks, typography guidance, font resizing, screen reader considerations, inclusive design patterns, and practical accessibility recommendations. Rather than treating accessibility as a final compliance step, Able encourages designers to consider inclusion earlier in the creative process.
Project Overview
Able App was created as a comprehensive accessibility toolkit for digital creators. The goal was to design a product that could make accessibility feel less intimidating, less fragmented, and more integrated into everyday design workflows.
Many designers want to create accessible work, but accessibility guidance is often scattered across technical documentation, compliance checklists, browser tools, and developer-focused resources. Able App responds to this gap by giving users a clearer, more visual, and more approachable way to identify accessibility barriers and improve their design decisions.
This project combines product strategy, user experience design, interface design, visual identity, accessibility research, and prototyping into one cohesive digital system.
Tools
Figma/Adobe Illustrator/Adobe Photoshop/Adobe XD/User research/Wireframing/Prototyping/Accessibility research/Visual system design
My Role
Product Designer / UI Designer / Brand Designer
I led the concept, research, visual direction, user experience, interface design, prototyping, and brand system for Able App.
My responsibilities included:
- Defining the product concept and accessibility problem space
- Researching accessibility needs, inclusive design principles, and digital usability barriers
- Developing the user flow and core product experience
- Designing the interface, visual hierarchy, and interaction patterns
- Creating the brand identity, colour palette, typography, and supporting visual system
- Building the final prototype and presentation assets
The Problem
Accessibility is often introduced too late in the design process.
For many designers, accessibility can feel highly technical, overwhelming, or disconnected from the tools they use to build digital experiences. Important considerations such as contrast, readability, hierarchy, motion, screen reader compatibility, and inclusive interaction patterns are often reviewed after a design is already close to completion.
This creates a reactive workflow where accessibility becomes something to “fix” instead of something that shapes stronger design decisions from the beginning.
Able App was designed around a central question:
How might we help designers identify accessibility barriers earlier, understand why they matter, and apply better design decisions with confidence?
The opportunity was to reframe accessibility as a design companion rather than a compliance checklist.
Able App creates a more approachable way for designers and developers to review their work, understand accessibility issues, and make informed improvements. The product is designed to support learning while also helping users take action quickly.
The goal was not to replace accessibility expertise. The goal was to make inclusive design more visible, more actionable, and easier to integrate into everyday creative workflows.
Product Strategy
The product experience was built around three core actions:
Check
Users can review key accessibility factors such as colour contrast, font size, readability, content hierarchy, and interface clarity.
Understand
Able explains accessibility issues in plain language, helping users understand why a design decision may create barriers for certain users.
Improve
The platform provides practical recommendations, design patterns, and guidelines that help users make stronger, more inclusive design choices.
This strategy helped shape the structure of the app, the tone of the interface, and the way information is presented to the user.
Research Insights
Through research into accessibility standards, inclusive design principles, and common digital usability barriers, three key insights shaped the product direction:
1. Accessibility needs to feel practical
Designers are more likely to apply accessibility principles when guidance is clear, visual, and directly connected to their work.
2. Accessibility language can be intimidating
Highly technical language can create hesitation. Able uses plain-language recommendations so users can understand the issue before engaging with deeper accessibility criteria.
3. Inclusive design should support creativity
Accessibility should not feel like a limitation. It should help designers make more thoughtful, usable, and effective design decisions.
Design Direction
The visual direction for Able App was built around clarity, confidence, and support.
The interface needed to feel professional and trustworthy, while still being approachable for designers who may not be accessibility specialists. I focused on creating a system that felt structured, calm, and easy to navigate.
The brand system uses strong contrast, clean typography, clear hierarchy, and purposeful colour application to reinforce the product’s accessibility-first purpose.
The overall design language is:
Clear. Supportive. Functional. Inclusive. Human.
Brand System
Able’s identity was designed to feel modern, accessible, and product-driven.
The brand needed to communicate both technical credibility and human support. I avoided overly clinical or generic accessibility visuals and instead focused on a flexible visual system that could live across product screens, educational content, and marketing materials.
The visual system includes:
Logo and wordmark
Accessible colour palette
Typography system
Iconography
Interface components
Educational graphics
Product mockups
Prototype screens
Supporting brand assets
The system was designed to make accessibility feel integrated, not separate from the creative process.
User Experience
The Able App experience is structured to help users move from uncertainty to action.
The core flow allows users to enter or review a design, identify accessibility issues, understand the impact of those issues, and apply recommendations. The experience is intentionally guided so users do not feel overwhelmed by too much technical information at once.
Key experience areas include:
Onboarding
Accessibility toolkit dashboard
Colour contrast checker
Typography and font resizing guidance
Screen reader considerations
Design pattern library
Accessibility recommendations
Prototype interactions
Each section was designed to reduce friction and help users make more confident decisions.
Interface Design
The interface was designed with a strong focus on readability, hierarchy, and ease of use.
Since the product itself is about accessibility, the UI needed to demonstrate the same principles it promotes. This meant paying careful attention to spacing, contrast, typography, button states, layout structure, and the way information is grouped.
The interface avoids unnecessary visual clutter and uses clear content sections to help users understand what action to take next.
Key UI considerations included:
Strong visual hierarchy
Clear navigation
High-contrast interface elements
Legible typography
Consistent spacing
Accessible button and form states
Simple instructional language
Visual feedback for user actions
Key Design Decisions
Plain-language recommendations
I chose to explain accessibility issues in simple, direct language before introducing more technical criteria. This helps users understand what is wrong, why it matters, and how to improve it.
A toolkit-based structure
Instead of creating one long checklist, I organized the product into focused tools. This makes the experience easier to scan and allows users to access the support they need based on the specific design issue they are solving.
Strong contrast and hierarchy
Because the product is centered on accessibility, the visual system needed to model accessible design principles. Contrast, spacing, type size, and layout structure were treated as core design decisions rather than decorative choices.
Educational design patterns
The design pattern library gives users examples they can learn from and apply. This helps Able function as both a tool and a learning resource.
Prototype
The final prototype demonstrates how users can move through the Able App experience, access accessibility tools, review design decisions, and apply inclusive design recommendations.
The prototype was designed to communicate the product’s core value: helping designers create more accessible work through a guided, visual, and easy-to-understand interface.
Outcome
Able App became a complete accessibility-focused product concept supported by a brand identity, UI system, prototype, and design toolkit.
The project demonstrates my ability to move across product thinking, visual design, brand systems, user experience, accessibility, and interface design. It also reflects my interest in designing tools that are not only visually polished, but purposeful, inclusive, and useful.
Reflection
This project helped me understand accessibility as more than a technical requirement. Accessibility is a design responsibility, a creative constraint, and an opportunity to make digital experiences work better for more people.
If I were to continue developing Able App, I would expand the product into a Figma plugin, introduce AI-assisted accessibility suggestions, conduct usability testing with designers and developers, and map recommendations more directly to WCAG criteria.
The next evolution of Able would focus on making accessibility even more embedded into the design workflow — helping users not only check their work, but build better habits as they create.
