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 27 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 built a font carousel of six display-face candidates and tested each one live on real page content with the CEO. Playfair Display felt genuinely theirs, and I paired it with DM Sans for the body copy - rooted and warm, legible at every size.
This font brought the editorial warmth and quiet confidence the brand needed. Its serif detail feels rooted and considered without tipping into formality - it gives the site a distinct, memorable voice.
Selected for readability and harmony with Playfair Display. DM Sans creates a clean, balanced style that reinforces an approachable feel across all pages.
27 pages don't scale if every one of them is a one-off. I built a small set of reusable templates - nav, hero, tab container, card grid, and form block - and every page on the site is one of these five patterns with different content dropped in.
The homepage was the biggest offender - too much content, no hierarchy, no breathing room. I restructured it around a single editorial hero: mission-first copy, one clear CTA pair, above the fold. Same pattern reused on 3 top-level pages with different copy. (The nav above is doing its own thing too - flat at rest, floating glass on scroll, same component on all 27 pages.) Below is what these pages looked like before the redesign - the full after gallery is further down the page.
Kemetic Yoga, hikes, highway clean-ups, beach clean-ups, the garden project, and tree planting each used to live on a separate page - same header, same footer, same nav, six times over. I pulled them into one page with a tab switcher instead: one URL, one set of shared styles, and a much easier page for the team to update. Below is the actual component, pasted in with its real classes and real copy.
Kemetic Yoga is an ancient African Yoga art form that promotes African philosophy and practices originating from the land of Kemet. This ancient practice emphasizes the rejuvenation of the body and mind, providing BIPOC communities with cultural roots that stem from their African origins.
Our Kemetic Yoga sessions use our Whiteness to Oneness™ and KOS-Melanin-ology™ curricula at their foundation. We work to dismantle structural inequality and foster constructive dialogue around Melanin and its purpose.
ASCENDtials is hosting a hiking event for all skill levels, featuring guided tours of hidden treasures and breathtaking views. Participants will be captivated by towering mountains, waterfalls, and lush forests, while forming new bonds with fellow outdoor enthusiasts.
Monthly cleanups are conducted for 9 highways and ramps, with volunteers provided with safety equipment, trash grabbers, and bags. Reservations can be made via scheduling and entire groups can reserve space.
Cleanups are during the mornings on Saturdays and Sundays. Sign up as a volunteer for unlimited access.
San Diego's coastline is one of our community's most treasured resources - and one of the most threatened. ASCENDtials organizes regular beach cleanup events to protect our shores, remove harmful litter, and restore the health of coastal ecosystems.
Whether you're a first-time volunteer or a regular steward of the coast, you'll find community, purpose, and a cleaner beach at the end of your morning.
Welcome to the ASCENDtials Garden Project, where community and sustainability come together. Our garden, in Bonita's Sweetwater Summit Park, is more than a food source. It's a vibrant space for learning, connection, and caring for the environment.
Join ASCENDtials during the tree planting season and assist the Sweetwater Park Rangers in their efforts to restore San Diego's forests. Trees improve air quality, provide habitat for wildlife, reduce stormwater runoff, and cool off our cities.
Every page maps to one of the five templates above. Filter by category to see how the same system holds up across very different content.
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 27 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.