Situation / Project
I owned the visual design for a fundraising web app redesign used by small nonprofits. UX delivered user flows and low-fidelity wireframes; my role was to translate those into a polished, accessible UI and a reusable component library.
Task
Create a cohesive visual system that improved clarity, conversion on the donation flow, and sped up developer handoff — within a 6-week sprint and existing brand constraints.
Actions (process & decisions)
- Audit & moodboard: Aligned with brand voice; proposed brighter primary palette for trust and urgency.
- Typography: Chose Inter for UI (weights 400/600/700) and Georgia for headings when brand allowed. Base scale: 16px body, 20/24/32px headings; 1.25 modular scale for rhythm.
- Color & accessibility: Primary #0A72FF, Accent #FF6B35; ensured WCAG AA contrast for body text and AA/AAA for key CTAs. Generated semantic color tokens in Figma.
- Spacing & grid: 8px baseline grid, 12-column responsive grid; container max 1200px. Component padding multiples of 8.
- Components: Built accessible atoms — button variants (primary/ghost/outline), input states (error/valid/disabled), modal, progress stepper for donations. Added motion spec: 120ms easing for microinteractions.
- Constraints: Legacy frontend used limited CSS variables and tight sprint deadlines. I produced a prioritized token set and code-ready Figma tokens, plus a 1-page spec for devs to implement iteratively.
- Handoff: Delivered Figma library, redlines, SVG icons, and Storybook-ready CSS tokens; ran two dev pairing sessions.
Result
- Quantitative: Donation completion rate up 18% in A/B test; average time-to-donate down 22%.
- Qualitative: Stakeholders praised clarity of donation steps; developers reported 40% faster implementation for UI screens.
- My contribution: End-to-end visual design, component library ownership, accessibility verification, and developer handoff materials. Learned to balance aesthetic goals with engineering constraints by prioritizing tokens and core components first.
