Culikid: Redesigning a nonprofit site for the community it serves

Summary

The Problem

Culikid's existing site had fallen behind modern accessibility and usability standards with unintitive navigation, generic stock imagery, and an unclear mission. Buried navigation made it difficult for families and volunteers to find programs or take action. A lack of authentic imagery and impact data made it hard to build trust, and accessibility gaps excluded the neurodivergent users Culikid exists to serve.

As Design Manager on a Develop for Good project team, I coordinated a remote, globally dispersed team through discovery, IA restructuring, iterative design, and a full Webflow build, while managing client relationships, scope alignment, and project deadlines across every phase.

Research & Discovery

Research began before any design work. We audited the existing Culikid site for usability and accessibility gaps, reviewed comparable nonprofit sites to benchmark expectations, and aligned with the client on visual direction for a specific color palette, engaging and dynamic navigation, and an updated logo. This upfront discovery established a shared definition of success and surfaced the biggest structural problems before wireframing began.

Phase 1 evaluated the low-fidelity prototype using two methods. A 12 participant structured survey measured mission clarity, program findability, trust, and donation confidence. Program discoverability scored highest at 4.3/5, while trust and donation confidence lagged at 3.5/5, revealing a gap between understanding the organization and feeling ready to act. AI usability testing across five representative personas ran in parallel, independently surfacing the same three priorities: stronger trust signals (authentic imagery, impact stats, testimonials), more scannable program details, and clearer CTAs.

Phase 2 ran an AI-assisted A/B test comparing two high-fidelity visual directions, a darker and a lighter color scheme, evaluated by the same five personas. The findings pointed toward a hybrid direction that optimized warmth, readability, and user flows, which became the final design.

Key Design Decisions

Design

Lo-Fi Wireframes

Wireframes established layout and information hierarchy for key pages like the homepage, programs, get involved, donate, and volunteer, defining content placement and CTA flow before any visual styling began.

Then, a style guide was created by enhancing the client requested color scheme of navy and beige, with the additio n of guidelines for typography, spacing, border radius, etc. The initial logo design was iterated on, eventually culminating in a more refined and simple logo that can be seen in the final design.

Hi-Fi Iterations

Four hi-fi iterations (v1.0 – v1.3) refined the visual system across typography, spacing, component design, and color. Each round incorporated research findings and client feedback, culminating in the hybrid visual direction selected after A/B testing.

Outcomes

The redesign delivered 23 fully built pages across a restructured IA, 36 CMS templates for ongoing self-management, and resolution of 6+ accessibility issues present in the original site. The new site features modernized visual design with authentic program imagery, intuitive dropdown navigation, and embedded impact statistics and testimonials to build visitor trust.

Google Analytics was implemented site wide to track program registrations, volunteer applications, and donation completions. Post launch metrics are pending.

Reflection

Leading Culikid as Design Manager on a Develop for Good team required shaping the research plan and design direction, contributing screens across four hi-fi iterations, and managing the coordination and communication that kept a remote, globally dispersed team on track. I contributed heavily to the Project Requirements Document, built and maintained the project plan, created meeting agendas, and led both client communication and internal team communication throughout.

Balancing client preferences with user research findings and design knowledge was an ongoing negotiation. The client came in with a clear visual direction, and while that gave the team strong guidelines, it sometimes contradicted what research was surfacing about user needs or what the designers knew were best practices. Presenting findings as shared evidence rather than a challenge to the client's instincts helped move those conversations forward. The design library, built on a standardized system of color, typography, spacing, and auto-layout components, also gave us a common language between designers and the technical team, making handoff more efficient.

With a fixed project timeline, certain interactions and page level functionality had to be reduced or scoped out due to the site development requiring more resources than expected. Knowing when to accept a constrained outcome rather than chase perfection was a skill I developed throughout this project. As the session wrapped up, I worked with the Technical Manager to produce handoff documentation covering in scope and out of scope items, outstanding issues across all pages, and CMS navigation guidance, so the client could continue building on what the team had started. Despite the deviations from the initial project requirements, the client approved the design direction and build framework, and the site is pending final desktop ad mobile QA edits and some interactivity additions before going live.

The most consistent challenge was coordination. Working across time zones with team members who had different skill sets, priorities, and availability did produce some misalignment in communication. I found that keeping the team motivated and engaged was most effective through post meeting action item summaries, regular mid week check-ins, and tagging individual contributors on Slack to maintain accountability. Structuring communication this way freed up design time and reduced extended discussion during group meetings.