Duration
3-4 months
Tools
Figma, WordPress
Role
Sole Designer
Team
Independent
INTRODUCTION
How It Started
A simple question that changed the whole trajectory, "What does Amanati mean to you?"
During a volunteer discussion circle, we were each asked this question. My answer was simple: Amanati is a place for me to learn and do better for my community. A place where I can offer skills that not everyone has access to. A place where I can make sure that the digital side of things, so often an afterthought, is done properly and accessibly. Everyone focuses on the physical. I wanted to be the person making sure the digital wasn't left behind.
Before I'd even finished speaking, Amanati's founder turned to me and said: "We need to talk."
And the rest is history…
Context
Amanati is a non-profit organisation which aims to raise awareness and acceptance of individuals with special needs within the muslim, shia community. It's a place where parents with Special Educational Needs & Disabilities (SEND) children can come to and be around other parents who can come together, share experiences, and be around others who truly understand what they're going through, because they're living it too. It's also a place where young adults can contribute, find their place in the community, and be part of a movement that's removing the stigma around special needs and building a better future for everyone.
Discover
INITIAL AUDIT
Problem Space
I started my work by doing an audit of the site. The moment I landed on the Amanati website, the fundamental issue was so incredibly clear nobody could tell what it was.
The homepage opened with a full-bleed photograph of a mosque interior. Beautiful, but completely disconnected from SEND, from families, or from anything Amanati actually does. There was no headline, no context, no obvious next step.
The deeper I analysed the website, the more issues I could see. Beyond clarity, there was a much more uncomfortable problem that struck me straight away…. for a charity dedicated to inclusion and accessibility, their website was riddled with accessibility issues.
Specifically:
Yellow mission and vision cards with text that failed WCAG contrast requirements
Images across the site with no alt text, making them invisible to screen reader users
Text placed directly over dark photography, making it nearly unreadable
Inconsistent button colours; red, blue, teal, with no unified system
A broken heading hierarchy that assistive technologies couldn't navigate correctly
From that point, I knew what the main focus should be: accessibility first, prettiness second. I took screenshots of every page and added sticky notes next to every section that required immediate attention.
PRIMARY RESEARCH
Interviews
To make sure my assumptions were accurate, I conducted five user interviews with parents who had children with SEND. I wanted to understand not just how they experienced the existing website, but how they sought information and support more broadly.
INTERVIEW RESULTS
Key Themes
1
Clarity over cleverness
Parents visiting the site were often already stretched. They didn't have patience for a homepage that made them work to understand what they were looking at. They needed to know within seconds: what is this, is it for me, and what can I do here.
2
Trust through warmth
The community Amanati serves is tight-knit and relationship-driven. The website needed to feel like it came from people who understood their experience.
3
Accessibility isn't optional
Several interviewees were themselves neurodivergent or caring for neurodivergent children. Readability, clear structure and logical navigation weren't nice-to-haves. They were essential.
Inspiration
Competitive Analysis
I looked at established charity websites operating in SEND spaces to understand what good looked like. Three that particularly shaped my thinking were BRAAIN, Autism UK and SOSSEN.
What struck me about the best examples was how much warmth they conveyed without sacrificing clarity. They're approachable and child-friendly while still informative and trustworthy. I built an inspiration board and began identifying the visual language that felt right for Amanati's audience.
Define
How might we redesign Amanati's website so parents instantly understand who they are and how to get help while also making sure the website is accessible?
GOALS
Key Decisions
Rather than building a persona or journey map, the site's structure and content were already well-organised. The problem was how that content was being communicated. I moved directly into three guiding design decisions that shaped everything that followed.
Design
Iteration
Playground
Before committing to any direction, I gave myself space to explore. I tried multiple visual directions in Figma from structured and editorial to warmer and more illustrative. I even tried a bolder and more graphic look.
The visual anchor came from an unexpected place. I was thinking about what makes children with SEND feel genuinely included and joyful in media, and landed on Mr Tumble, the beloved CBeebies character known for making Makaton accessible and fun. His world uses soft circles, considered colours, and a warmth that feels genuinely safe.
That became the visual system: a circles-based design language, rounded everywhere, nothing sharp or clinical.
BRAND DEVELOPMENT
Design System
The colour palette was rebuilt from scratch using the four colours already present in Amanati's logo; red, green, yellow and blue. Rather than introducing anything new, I worked with what the brand already had and made it consistent and accessible. Every colour combination was tested against WCAG AA contrast requirements before it was used anywhere on the site.
Logo colours
WCAG AA
Accessibility
Accessibility wasn't a slide at the end. It was baked into every decision above. Specifically:
Font — PT Sans chosen for readability and dyslexia-friendliness
Heading hierarchy — restructured across all pages into a logical H1–H2–H3 order that assistive technologies can navigate correctly
Navigation — active page indicator added so users always know where they are
Colour contrast — every combination tested against WCAG AA
Alt text — added to every image across the entire site
Deliver
RESULTS
Before & After
The colour palette was rebuilt from scratch using the four colours already present in Amanati's logo; red, green, yellow and blue. Rather than introducing anything new, I worked with what the brand already had and made it consistent and accessible. Every colour combination was tested against WCAG AA contrast requirements before it was used anywhere on the site.
MAKING IT LIVE
Constraints
From Figma to WordPress
Handing designs off to a developer is one thing. Being the designer and the developer is another entirely.
Once Amanati's founders approved the final designs, I was given full access to their WordPress account to implement the redesign myself. On paper, straightforward. In practice, a masterclass in constraint.
The site ran on an older version of WordPress, not the modern block editor, but the legacy theme-based system with limited layout flexibility. What I could build was determined not by what I'd designed, but by what the theme would allow. That gap between design and reality became the most challenging, and most educational, part of the entire project.
Writing the CSS
Before moving into UX design, I worked as a software engineer. So picking up the codebase and writing custom CSS wasn't a new skill I had to learn but a tool I already had in my belt. What made it interesting was applying it with a designer's eye rather than an engineer's one. Every line of code I wrote was in service of a specific design decision, not just a functional requirement.
Using WordPress's custom CSS panel, I wrote styles to bridge the gap between what the theme offered and what the designs needed.
The Sacrifices
Not everything made it. Some design decisions had to be let go because the theme couldn't support them without a level of development that was beyond the scope of a volunteer project:
Some of the more considered grid layouts had to be simplified into what the page builder could handle
The floating decorative circles had to be used more sparingly than designed, as precise positioning in the live environment was limited
Each was a deliberate call. I kept every accessibility improvement, the full navigation restructure, the new content hierarchy, and the visual identity system. The finer details can wait for a future version with a more flexible theme.
