Mobile App Design · Case Study
A more welcoming space for neurodiverse minds.
From information architecture and early wireframes to a polished mobile experience for resources, accessibility, and community.
Neurokami is a mobile app concept designed for the neurodiverse community. The project focused on UI/UX design and the consideration of accessibility features, bringing a resource library together with ways to connect and build community.
The Design Process
01 · Research
The project paired user personas with peer-reviewed research on autism, ADHD, and dyslexia to guide accessibility considerations for the app.
ADHD · Student
A university student who commutes and balances classes, activities, and volunteering. Marel wants to meet people beyond a small existing friend group.
Time management and visual disorganization can make it hard to stay on top of classes and assignments. Notifications and busy interfaces can pull attention away.
Design need: make social connection comfortable and keep key information organized and easy to return to.
ASD · Software Developer
A full-stack developer who enjoys gaming and feels more comfortable socializing online. Anna is interested in forming new relationships.
Starting conversations can be difficult. Cluttered visuals, bright colors, sound, unexpected movement, jargon, and sarcasm can make digital interactions harder to parse.
Design need: offer clear, calm screens and predictable ways to discover and join conversations.
Dyslexia · Engineer
An engineer with a busy work week who enjoys hands-on projects and is open to meeting people with similar interests.
Spelling can make messaging frustrating, and long processes are difficult to stick with. Jack uses spell-check and prefers to keep several tasks moving.
Design need: keep interactions concise, make text comfortable to read, and reduce friction in messaging.
02 · Information Architecture
The early structure groups the experience around onboarding, a home feed, messaging, resources, and settings. This gives each major task a clear place and makes the primary destinations easy to reach.
The map follows the path from login and onboarding into the app’s main destinations.
03 · Visual Design & Accessibility
A soft purple palette, clear typography, rounded controls, and persistent navigation shape the interface, with accessibility options built into settings.
The standard interface uses saturated purple and magenta with teal and light neutral tones. Calm Mode has a separate, softer palette.
The main action color, used for buttons and prominent interface controls.
An optional softer palette for neurodivergent users who prefer a quieter visual experience.
A softened purple that keeps the brand color present with a gentler feel.
Neurokami includes settings that let people adjust the interface to suit their preferences.
Adjust text size with an on-screen control, making interface copy easier to read at a comfortable scale.
Switch to a softer color palette designed for neurodivergent users who prefer a quieter visual experience.
Roboto is used throughout the app. Differences in size and weight create a clear hierarchy for titles, interface labels, and body copy.
Large, bold type gives welcome and screen titles a clear first read.
04 · Low-Fidelity Wireframes
Low-fidelity screens map the basic layout and navigation for sign-in, the home feed, conversations, and the resource library. Keeping these screens simple makes the content order and core actions easy to assess.
05 · Final UI
Move through the onboarding flow and explore the finished app screens.
Try the Prototype
Open the interactive Figma prototype to move through the designed experience.