A full UX/UI overhaul and coded WordPress redesign for a nonprofit uplifting BIPOC communities across Southern California - transforming a cluttered, inaccessible experience into a living, breathing brand.
Visit Live Site
ASCENDtials is a nonprofit founded in 2014, offering holistic educational tools, Kemetic yoga, farmers' markets, environmental cleanups and youth programs across Southern California's BIPOC community. Their work is genuinely impactful. But their digital presence told a completely different story.
I joined as a volunteer UX/UI designer and developer. The CEO had a clear vision for how she wanted the organization to be perceived - as a serious, culturally rooted, forward-thinking community institution. My job was to translate that vision into a site that reflected it, while solving real usability problems.
The original design was described internally as their style - heavy, layered, rich. The CEO loved the aesthetic boldness. My challenge was to honour that personality while eliminating the parts that actively hurt users: the information architecture, the text overload, the inconsistent interactive elements.
This meant I couldn't do a clean-slate minimal redesign. I had to work with the brand's expressive DNA and make it better, not different.
Reviewed all existing pages. Mapped every navigation path. Identified pattern breaks and accessibility failures. Interviewed the founder to understand positioning goals.
Moderated usability testing sessions with community members and potential members. Identified 4 key failure points. Created 2 primary personas based on findings.
Researched comparable nonprofits, BIPOC-led organisations, and community platforms to understand positioning opportunities and patterns that resonate with the audience.
Developed font pair candidates, refined the colour palette to feel warmer and more culturally expressive. Presented options to CEO - she chose what felt uniquely theirs.
Restructured the information architecture from the ground up. Created low-fidelity wireframes for client sign-off before moving to high-fidelity design.
Designed and then hand-coded all 15+ pages in WordPress. Built custom animations, parallax effects, hover interactions, and a mobile-responsive layout throughout.
I wanted to sign up for yoga but I couldn't even find where to go. I gave up and looked for something else.
Two primary user archetypes emerged from research. They differ in familiarity with ASCENDtials but share the same core need: to quickly understand what the organisation offers and how to get involved.
Amara is a Black woman who recently moved to San Diego. She's actively looking for community, cultural events, and wellness activities that feel authentic to her background. She heard about ASCENDtials through Instagram and is visiting the site for the first time.
Marcus runs a small BIPOC-owned business and heard ASCENDtials has a farmers' market where he might be able to sell. He's evaluating whether the organisation is professional and trustworthy enough to partner with. He needs to see legitimacy fast.
Tracing Amara's first visit to the site - from discovery to (attempted) signup - reveals exactly where and why the experience broke down, and where my redesign intervened.
| Stage | Action | Thoughts | Emotion | Pain Points | Opportunities |
|---|---|---|---|---|---|
| Discovery | Sees ASCENDtials on Instagram. Clicks link in bio. Lands on homepage. | "This looks interesting. Let me see what they actually do." |
Curious
|
Homepage overwhelmingNo clear mission statement above fold | Strong hero with mission + visualPersonality-first layout |
| Explore | Scrolls homepage. Tries to navigate via the menu. Clicks "Programs" dropdown. | "Wait, what's the difference between Programs and Education? There are so many options." |
Confused
|
8-item navigation with similar labelsNo visual hierarchy | Simplified nav groupingsVisual program tiles on homepage |
| Find Yoga | Tries to find yoga sessions. Clicks multiple pages. Eventually finds Kemetic Yoga page. | "I had to click through 5 pages to find this. Hopefully it's still active..." |
Frustrated
|
Yoga buried 3 levels deepSession schedule unclearOutdated event dates | Yoga as featured section on Programs pageInteractive session cards with hover info |
| Consider | Reads about sessions. Wants to sign up. Looks for a button or form. | "How do I actually book? Do I need to be a member first?" |
Uncertain
|
No clear CTA on yoga pageMembership vs. free access unclear | Dedicated CTA per session typeMembership comparison made visible |
| Membership | Navigates to Membership page. Sees pricing. Tries to subscribe. | "$25 seems reasonable. But I don't understand what I actually get." |
Evaluating
|
Tier benefits poorly explainedNo social proof or testimonials | Clear benefit breakdown per tierAdd member testimonials |
| Decision | Clicks Subscribe. Navigates away. Doesn't complete. | "Let me think about this. I'll come back later." (She doesn't.) |
Abandoned
|
No urgency or motivation to act nowLost trust due to clunky experience | Streamlined subscribe flowAdd community photos for belonging signal |
The original site had no clear user flows - pages connected arbitrarily. Below is the redesigned path for Amara's primary goal: discovering yoga and signing up for membership.
To find a visual style that reflects the unique identity of ASCENDtials, I began by selecting fonts. My options included Aesthetic Romance, Grotesk, Amoret Sans, Harmony Embrace, Quantify, and Satoshi. I tested each pairing and presented them to the CEO. She chose what felt genuinely theirs.
This font perfectly conveys the lightness and friendliness the company aims for. It avoids excessive formality and gives the site a modern, elegant look that feels uniquely theirs.
Selected for readability and harmony with Amoret Sans. Noto Sans creates a clean, balanced style that reinforces an approachable feel across all pages.
Each page was designed with a single primary purpose and one clear call to action. I eliminated the visual noise, created consistent interactive patterns, and rebuilt everything in WordPress from scratch - custom post types, animations, mobile breakpoints, and all.
The homepage was the biggest offender - too much content, no hierarchy. I restructured it around a single editorial hero, followed by a clear program overview and a community-first visual language.
We host programs and events that teach, engage, and create change. Learn something new at one of our literacy workshops, buy locally grown produce and handmade crafts at our Farmers' Markets, or help us reduce environmental pollution at one of our highway clean-ups. There are so many ways to get involved!
View Programs & Events
Previously, all yoga session types were listed as walls of text. I redesigned them as interactive cards - text is hidden by default and revealed on hover, creating visual breathing room while keeping all the detail available.
The Donation page needed to inspire action, not just list options. I designed a set of distinct organic card shapes — each representing a different cause — giving the page an editorial identity unlike any other on the site.
Note: This project was a volunteer engagement. After my departure, the site was partially modified by a subsequent developer which altered some of the coded interactions. The screenshots and documentation in this case study reflect the original designs as I delivered them.
Being told "keep the bold, heavy style we love" while also fixing navigation and usability forced me to deeply understand the difference between aesthetic preference and functional design debt. The answer was never "simplify everything" - it was "simplify the right things."
Testing with community members - not generic user profiles - revealed barriers I never would have anticipated. Cultural context, trust signals, and belonging cues mattered enormously to this audience, and wouldn't have surfaced in a standard usability session.
Designing and coding 15+ pages gave me real insight into what's possible in production, how animations behave at real sizes, and where assumptions break. The parallax effects, hover cards, and responsive layouts I built would have been lost in translation to any developer who didn't share the design intent.
