/ CASE STUDY 01
An accessibility-first sketching experience focused on creativity, not barriers.
A digital sketching platform designed to reduce barriers in creative software for users with physical, cognitive, auditory and visual impairments rethinking tool selection, layers, colour, tutorials and focus support.
↳ accessibility built into the workflow, not bolted on as a settings panel.
ROLE
UX Designer · UI Designer
TIMELINE
Jan 2025 - April 2025
TOOLS
Figma · MS Forms · Notability
FOCUS
UX/Accessibility
TL;DR
The Challenge
Creative software often relies on precise interactions, colour-coded information, audio-based guidance, and complex interfaces that may not be accessible to everyone.
My Approach
I translated accessibility needs into practical design decisions across drawing controls, feedback and interaction patterns, then tested the prototype with users and iterated based on usability findings.
The Outcome
A more inclusive drawing experience with accessibility built into the core interaction rather than added afterwards. After iteration, the prototype’s SUS score improved from 79.5 to 86.5.
Drawing tools often rely on precise hand control, colour-based visual cues, and audible feedback.
Drawing applications often depend on precise input, colour-based information, gestures, and visual instruction interactions that can create barriers for people with motor, visual, or cognitive access needs.
I wanted to explore how accessibility could become part of the creative workflow itself, rather than an additional settings layer added later in development.
Accessibility in creative tools remains underexplored
Creative workflows contain multiple accessibility barriers
Inclusive design should support creativity without reducing capability
#1
Provide flexible ways to interact
#2
Communicate information in multiple ways
#3
Keep the workspace focused and predictable
To guide design decisions, I created four research-informed proto-personas, each focused on one accessibility area addressed by the platform.
Alex
Early-stage Parkinson’s disease
NEED
Better support for selecting tools and managing layers.
BARRIER
Tremors, stiffness and difficulty with small targets.
OPPORTUNITY
Larger targets, keyboard access, alternative layer movement.
Mia
Complete hearing loss
NEED
Learn creative techniques without relying on audio.
BARRIER
Audio-dependent tutorials and cues.
OPPORTUNITY
Captions, transcripts, visual guidance.
Ethan
ADHD
NEED
Stay focused and avoid mistakes.
BARRIER
Distractions, time blindness, cognitive overload.
OPPORTUNITY
Focus Mode, timers, feedback, confirmation patterns.
Sophia
Deuteranopia
NEED
Identify and select colours confidently.
BARRIER
Difficulty distinguishing red and green.
OPPORTUNITY
Patterns, labels and text-based confirmation.
These proto-personas were informed by secondary research and accessibility guidance and used to guide design decisions throughout the project.
Before developing high-fidelity designs, I explored how accessibility challenges within digital sketching could inform interface decisions. Each concept investigated a different opportunity to make creative workflows more inclusive.
01
Accessible Tool Selection
Focus Visible(2.4.7)
Target Size Enhanced(2.5.5)
Keyboard Access(2.1.1)
On Focus(3.2.1)
Design Decision
Tool selection moved from small icon-only controls to a keyboard-supported toolbar with visible focus and larger icons with intentional activation.
Explored: Larger toolbar targets, Visible focus states, Enter-to-confirm activation
Early Exploration
High Fidelity
Final Features
Larger Targets
Visible focus states
Keyboard-supported selection
Intentional activation
Why it mattered
Small icon-only toolbars can create barriers for users with tremors, stiffness, limited fine motor control, or keyboard-only navigation needs. The final toolbar makes tool selection easier to target, easier to track visually, and safer to activate intentionally.
02
Layer Management Without Drag and Drop
Keyboard Access(2.1.1)
Dragging Movements(2.5.7)
Focus Visible(2.4.7)
Focus Order(2.4.3)
Design Decision
Layer management was redesigned around focus, shortcuts, and step-by-step keyboard-supported controls instead of relying only on dragging.
Explored: keyboard navigation between layers, shortcut-based movement, arrow-key control, visible selected-layer states, alternatives to drag-and-drop.
Early Exploration
High Fidelity
Keyboard shortcut initiates layer movement without drag-and-drop.
Visible focus indicates the currently selected layer while arrow keys reposition it.
An insertion indicator previews the new position before confirming with Enter.
Final Features
Keyboard-supported reordering
Visible layer focus
Insertion-position preview
Enter to confirm
Why it mattered
Dragging layers requires steady pointer control and precision. A keyboard-supported layer system gives users a more forgiving way to organise their canvas without depending on drag-and-drop alone.
03
Colour Selection Beyond Colour Alone
Use of Colour(1.4.1)
Design Decision
Colour selection was redesigned to provide multiple confirmation cues, combining colour names, patterns, and explicit feedback to reduce reliance on colour perception alone.
Explored: pattern-based colour cues · selected-colour confirmation · support for colour vision differences.
Early Exploration
High Fidelity
Final Features
Text colour labels
Pattern-based cues
Explicit selection feedback
Why it mattered
Users with colour vision deficiencies may struggle to distinguish similar colours or confirm their selection. Pairing colour with text labels, patterns, and clear feedback reduced reliance on colour perception alone when identifying and confirming a selection
04
Accessible Tutorial and Guidance
Non-Text Content (1.1.1)
Consistent Navigation (3.2.3)
Contrast Minimum (1.4.3)
Captions (Prerecorded) (1.2.2)
Design Decision
Tutorial guidance was designed to support learning through text, captions, transcripts, and predictable navigation instead of relying only on audio or visual demonstration.
Explored: tutorial cards with clear titles · captioned video guidance · transcript support · readable caption overlays.
Early Exploration
High Fidelity
Final Features
Captions
Transcripts
Readable Caption Contrast
Why it mattered
Captions, transcripts, and clear labels make tutorials accessible without relying solely on audio.
05
Focus and Task Completion
Headings and Labels (2.4.6)
Labels and Instructions (3.3.2)
Timing Adjustable (2.2.1)
Design Decision
Focus Mode was designed to reduce interface clutter while preserving the context, controls and feedback users need to complete their work.
Explored: reduced-distraction Focus Mode · adjustable focus and break timers · persistent project title · clear tool names · visible feedback after completing an action.
Early Exploration
High Fidelity
Final Features
Action confirmation
Distraction-reduced workspace
User-controlled focus timer
Why it mattered
Users with attention-related difficulties may become overwhelmed by dense controls, lose track of their current task, or struggle with rigid working sessions. A simplified workspace, flexible timing, persistent context, and clear feedback help users remain focused and work at a manageable pace.
Rather than shrinking a desktop interface onto smaller screens, I adapted accessibility patterns to each platform.
Mobile
Controls within easier reach
The desktop toolbar was adapted into a vertical mobile control strip with larger, clearly separated touch targets. Explored left- and right-side toolbar placement so controls could remain closer to the user’s preferred hand instead of enforcing one fixed position.
Preserving access when orientation changes
In landscape orientation, the toolbar remained attached to the side of the interface, giving the canvas more horizontal space while keeping the main tools visible and reachable. This prevented the mobile layout from simply stretching or overlapping controls when the device was rotated.
Tablet
Providing alternatives to precise touch
The tablet concept explored voice commands as an alternative to precise touch input. Layer deletion could be completed through either a swipe gesture or the Edit menu, preventing reliance on a single interaction method.
I conducted task-based usability testing followed by a System Usability Scale (SUS) survey and short post-test interviews.
Participants
5
Students, designer, working professional
Methods
Task Based Usability Testing
SUS Survey
Post-Test Interviews
6 Core Tasks
Select Pencil using keyboard
Select Green color
Move Layer using Keyboard
Delete layer
Access Tutorial
Enable Focus Mode
Testing focused on usability and accessibility-oriented interactions. Participants did not have disabilities.
Key Insights from Testing
01
Keyboard interactions were usable but required clearer guidance
Participants completed tool selection and navigation with minimal friction using keyboard controls.
02
Multiple cues clarified colour-selection feedback
Participants understood the selected colour through the combination of text labels, patterns and confirmation feedback.
03
Move Layer required more explicit guidance
Participants looked for contextual help when they could not remember how to enter Move Layer mode.
Iterations Based on Testing
Help and tutorials were doing the same job, so people found neither
Finding
Users could not distinguish between Tutorial and Help when both were presented as a single menu item.
Evidence
Participants seeking guidance for Move Layer selected “Tutorials/Help” but were taken to general tutorial content rather than contextual instructions.
Change
Separated the two functions. Tutorials remained in the menu with a video icon, while Help became a persistent button providing contextual guidance and keyboard shortcuts.
Impact
Separating the two functions made structured tutorials and contextual help easier to distinguish and locate.
Before
A combined “Tutorials/Help” entry made the type of support unclear.
After
Separate entry points distinguish structured tutorials from contextual help.
Measuring the Impact
Initial SUS Score
77.5
Final SUS Score
87.5
After addressing key usability issues, including unclear Help and Tutorial pathways, the SUS score increased from 77.5 to 87.5.
After developing the accessibility concepts through sketches and evaluating the interactive prototype, I refined them into a high-fidelity desktop experience.
Workspace Overview
The final interface keeps the drawing workspace uncluttered while ensuring accessibility features remain easily accessible throughout the creative process.
Colour Guidance
Colour choices are supported with labels, patterns, and confirmation feedback so selection does not rely on colour alone.
Accessible Learning
Tutorials include captions and a transcript so learning is not dependent on audio alone.
Error Prevention
Destructive actions include confirmation prompts, allowing users to reconsider before permanently deleting content.
Focus Support
Focus mode uses a visible timer and adjustable controls to help users structure drawing sessions.
Limitations
Small sample size of five participants limits generalisability
No disabled participants were included in usability testing
The prototype evaluation did not assess use with assistive technologies
Next Steps
Conduct usability testing with participants with disabilities
Improve onboarding for less-discoverable interactions
Further evaluate and refine mobile accessibility patterns
Reflection
WCAG can help you find the barriers. It can't tell you whether you removed them.
OpenCanvas taught me that accessibility is most effective when built into core interactions rather than isolated within a settings layer. It also clarified the limits of guideline-led design: WCAG can help identify potential barriers, but it does not replace co-design and testing with disabled people.
In a future iteration, I would involve disabled artists earlier and evaluate the implemented experience with assistive technologies across devices.