DrawBridge
Redesign of Brand Identity, Brand Guidelines & System, and Website
Since 1989, DrawBridge has provided free expressive arts programs to Bay Area children experiencing housing instability. Every week, DrawBridge’s trusted adult facilitators have shown up at the same shelters, because that consistency is the intervention. After 37 years and serving more than 35,000 children, the organization had the right track record. What it lacked was a brand and digital presence to match its reputation.
I led the company’s complete brand transformation, which included a new brand identity, a comprehensive 70-page brand guide, a related brand system, and a 13-page website. I sourced talent, directed a cross-functional team, and facilitated the organization’s first professional analytics infrastructure. The goal was not just to modernize the brand’s look, but to build a platform that earns donor trust, converts first-time visitors, and scales with DrawBridge’s next chapter of growth.
Live site- Role: Creative Director & Lead Product Designer
- Deliverables: Brand Identity · Brand Guidelines · Website · Design System · Brand Assets
- Team: Brand Designer · Developer · SEO Specialist
- Tools: Figma · Figma AI · Adobe Creative Suite · Midjourney · Adobe Firefly · Claude Code · CSS animation · Google Analytics · Bing Webmaster Tools · Givebutter
Design is the conscious effort to impose meaningful order.
- Victor Papanek
The Challenge
Despite 37 years of impact, DrawBridge operated with a legacy digital presence and undefined brand identity, which actively undermined its mission. These problems ran throughout the site. The Homepage, About, and Ways to Give pages are representative examples.
The Homepage buried the mission in body copy, led with urgency before establishing trust, and fragmented attention across multiple competing “Donate” buttons, none of which converted effectively. The navigation disappeared on scroll. The organization’s three decades of measurable impact existed only in dense prose, with no statistics, proof of scale, or anything a first-time visitor could easily grasp.
The About page was a text document, not a brand experience, with three core sections and one photograph. It showcased no named people, illustrated values, or social proof. Visitors learned what DrawBridge does, but nothing about who does it or why it works.
The Ways to Give page lacked visual hierarchy, tiered giving options, and donor-facing language. The donation path created friction at every step.
Critically, no analytics infrastructure existed. Leadership had no visibility into user behavior, conversion funnels, or where potential donors were dropping off. The organization was operating blindly.
The visual system compounded all of this, with its mismatched logos, generic stock layouts, and an inconsistent color palette that signaled “nonprofit boilerplate” rather than an established, confident brand.
Research & Strategy
Every creative decision in this project was grounded in discovery, not assumption.
Stakeholder interviews with leadership surfaced a core tension: the brand needed to emotionally connect with visitors while maintaining the institutional credibility that high-level donors and partners require. The organization’s name held an underused asset: “DrawBridge” is literally a bridge between trauma and creative expression, between the shelter and a trusted adult, between a child’s inner world and the page. That became the conceptual anchor for the rebrand.
A Competitive audit of high-performing nonprofit digital spaces established benchmarks for donation flow design, visual accessibility, and content hierarchy. The clearest finding: the best nonprofit sites earn the ask through evidence and narrative, they don’t lead with urgency.
Dual-audience persona development shaped every structural and visual decision. Two distinct groups needed to be served without alienating each other:
- The established donor, who values trust, transparency, ease of transaction, and needs to see proof of impact before being asked to give.
- The younger audience (youth, community artists, emerging donors), who responds to visual energy, authenticity, relatability, and a mobile-first experience that feels contemporary.
Iterative visual testing validated the direction. Multiple color palette and typographic combinations were tested against both personas to find the right balance, which our research kept surfacing as “refined yet bright.” The final system is confident enough for institutional credibility, and vibrant enough to honor the creativity of the children it serves.
Brand Identity & Guidelines
The wordmark’s bridge arc anchors the visual identity in the organization’s name and core mission.
Color
Strawberry red is a primary color, used with the discipline of an accent.
The primary color palette pairs deep purple with strawberry red, and is grounded by deep grey and warm cream. It is sophisticated enough for institutional credibility, yet distinctive enough to stand apart from the generic blues that dominate the nonprofit category. A secondary palette combines cool and warm colors, from vibrant brights to earthy tones, drawn from children’s artwork to add variety and playfulness, and chosen to complement all the primary colors rather than compete with them. Full CMYK and RGB specifications are documented in the Brand Guidelines for consistent reproduction across digital and print.
Strawberry red earns recognition without taking over. The logo itself is strawberry red, but this color is strategically used as an accent, not a foundation: it is reserved for the logo, calls to action, and stat highlights, where it draws the eye precisely because it appears sparingly. Deep purple leads the primary palette, grounded by deep grey and warm cream as neutrals, so everyday layouts stay calm and credible, while red (logo included) remains an accent used only where it matters most.
Typography
Raleway, the primary font used for body copy, is a structural, modern, geometric sans that stays highly readable across long text blocks. Bricolage Grotesque, the secondary font, is reserved for titles and display headlines, never for body copy. It injects brand personality at large scale. Together, these fonts run a full type scale, from a 54/58px display heading down to 14/20px body, each level with defined leading and tracking to ensure that the hierarchy remains consistent and intentional at every size.
Logo
The DrawBridge wordmark uses a custom rounded treatment with a bridge arc integrated into the lowercase “d.” It reads clearly at all sizes, works across violet and white backgrounds, and carries the organization’s core metaphor in its letterform.
Iconography & Motifs
A custom set of organic shape icons (botanical variants, geometrical forms) runs throughout the system, appearing in value cards, testimonial callouts, and section dividers. They reference growth, nature, and creative life without being literal, and imbue the brand with a distinctively playful visual texture.
A brand this size requires two references, not one: a stable document that keeps the identity consistent for anyone who touches the brand, and a living system that lets web designers and developers ship new pages quickly without a brand review at every step. So I built them as separate deliverables, each with a distinct job and audience.
The Brand Guidelines define the identity (logo, color, typography, photography, voice, social media) and the rules for using them. This is the essential reference for anyone touching the brand: staff, partners, agencies, printers, new board members, etc. It is built to remain stable and on-message.
The Brand Guidelines, for anyone who touches the brand.
The Design System defines the build: the implementation layer that lets the brand scale across digital touch points. It lives in Figma as reusable components so designers and developers can ship new pages quickly and consistently, without a designer in the loop. The DrawBridge Design System includes:
- Typography scale, heading and body tokens with desktop and mobile sizes, leading, and weights (Bricolage Grotesque + Raleway)
- Color system, primary, accent, and neutral palettes with hex values
- Spacing scale, an 11-step token set from 4px to 104px for consistent rhythm
- Responsive grid, 12-column desktop down to 2-column mobile, with gutters defined at every breakpoint
- Buttons & interactive elements, primary, secondary, outline, tertiary, and text buttons, each with a hover state
- Card components, value, testimonial, team, location, stat, and CTA cards with consistent padding, radius, and shadow
- Form elements, inputs, text areas, and validation styling
- Iconography, botanical motif set with usage rules
- Navigation & headers, sticky desktop nav and mobile hamburger patterns
Keeping the brand guide and the design system apart keeps each one sharp. The brand guide never buries the mission under pixel values, and the design system stays a living source of truth that evolves with the product, instead of a spec frozen inside a PDF the moment it’s exported.
Website Redesign
The site spans 13 primary pages, designed from the ground up, with new information architecture, new content hierarchy, and a new visual system throughout.
Acting as both the primary web designer and project director, I guided a brand designer through the initial concepts. I then directed a dedicated developer to execute the coding and production, alongside an SEO specialist to ensure strong discoverability.
Home Page
The homepage was rebuilt around a single principle: the ask comes after the evidence. The redesign follows a clear narrative arc, mission → proof of impact → methodology → pathways to give, that guides every visitor from emotional connection to informed action.
Persistent navigation. A sticky header keeps the menu and donate CTA accessible from every scroll position, removing the friction of having to return to the top of the page to act.
Mission-led hero. “Give Every Child a Creative Voice” reframes the site around visitor agency, not organizational urgency. A full-bleed photograph of a child mid-creation establishes emotional connection before any ask is made.
Quantified impact. 37 years, 35,000+ children served, 14 active sites, 15+ sites awaiting funding, translated into bold, visually distinct stat cards layered over photography. Three decades of impact made scannable in seconds.
Branded methodology. “Consistency Changes Everything” is more than a tagline, it’s a framework. Three named pillars (Trusted Adult Facilitator · Process Over Product · Grassroots & Community-Rooted) position DrawBridge as an organization with a defined theory of change, not just good intentions.
Differentiated engagement pathways. Donate, volunteer, sponsor a neighborhood, become a partner, each pathway is visually distinct and audience-specific, so they amplify rather than compete with each other.
Integrated giving widget. A Givebutter donation module with one-time/monthly toggle, tiered preset amounts, custom field, and program designation sits directly on the page, reducing friction to zero at the moment of decision.
About Us Page
The old About page was a wall of text, three sections, one photograph, not a single named person, illustrated value, or piece of social proof. It told visitors what DrawBridge does, but nothing about who does it.
The redesign built a layered narrative: History → Mission → Vision → Values → Team → Testimonials. Each section has a distinct visual treatment so the eye is always guided and the user always knows where they are in the story.
Named, illustrated values. Seven values (Child-Centered · Safety · Reliability · Cultural Responsiveness · Well-Being · Accessibility · Creativity) are presented as branded icon cards with supporting copy, a framework, not a list of adjectives.
Photography as narrative. Full-bleed and in-context photographs of children mid-creation, hands at work, and team portraits carry emotional weight across every section.
Quantified institutional credibility. “Nearly 40 years of showing up” and “35,000+ children and youth” translate the founding story’s scale into a single sentence.
Integrated social proof. Testimonials from a program coordinator and a former participant appear at the moment trust is being built, not sequestered on a separate page.
The page closes with a full-bleed CTA (“Join Us to Elevate Children’s Voices”), converting a dead-end about page into a momentum moment.
Ways to Give Page
The problem: the original Ways to Give page was a plain text document, with no visual hierarchy, no tiered giving options, and no donor-facing language. A visitor had to read through entire paragraphs just to find out how to give.
The solution: the redesigned Ways to Give page gives each of the eight giving pathways (Make a Donation · Monthly Giving · Sponsor a Neighborhood · Donor Advised Fund · IRA Rollover · Give by Stock · Legacy Giving · Give by Check) its own card, title, and single-sentence description, so a visitor can scan and choose in seconds. Above the fold, a Givebutter donation widget lets visitors toggle between one-time and monthly gifts, with preset amounts tied to a concrete outcome (e.g., $444 funds one program day for 15 kids), so the ask is specific, the stakes tangible, and the path to completion has no unnecessary steps.
Keep reading below to see the achieved improvement in donations, both from the updated Ways to Give page and redesigned website.
Selected Additional Pages
The Why Art Page structures DrawBridge’s methodology, “How We Work” framework, Theory of Change diagram, and program breakdown into a clear visual argument for the value of the organization’s approach.
The Locations Page pairs an interactive map showing where DrawBridge operates, with a direct, high-value CTA (“$25,000 Funds One Site For A Full Year of Programming”) and individual location cards (East Oakland, San Jose, Daly City) so donors know exactly where their contributions land.
The Our Gallery Page gives the BXP Embarcadero gallery its own dedicated space, a visually immersive experience that invites visitors to book private tours and attend civic events, expanding DrawBridge’s reach beyond the shelter context.
Testimonials
Testimonial cards follow a consistent system throughout the site: warm cream background, botanical icon indicator, centered quote, attribution. The same component appears on the Homepage, About Us, Ways to Give, and the dedicated Testimonials page, establishing design coherence across every touchpoint and reinforcing credibility wherever trust needs to be built.
Mobile Experience
The entire site was designed mobile-first, with a fully responsive component system: on every page, the menu bar stays fixed at the top as you scroll, collapsing to a hamburger menu with the logo and Donate button always visible. Stat cards, value grids, location cards, and the Givebutter widget all reflow cleanly at narrow widths, and photography maintains editorial weight regardless of screen size.
The redesigned site in use, scrolling through the mobile experience.
The phone grid demonstrates a full range of UI moments across all pages: full-bleed hero photographs, branded methodology accordions, embedded donation widgets, interactive maps, illustrated values systems, and the gallery experience.
