JOB ROLE
Product Designer
INDUSTRY
*Spec Work
YEAR
2026
Started with a broad prompt ("Create a sign up page, modal, form, or app screen...") and defined a clear, real-world product scope: building a responsive, multi-step volunteer registration flow for the Sheldrick Wildlife Trust.
Information Architecture & Low-Fi Wireframing
Mapped out the data requirements and user flow in Figma Make, testing structural layouts and progressive disclosure patterns early. This ensured the layout logic and form hierarchy were solid before diving into visual polish.
Brand Exploration & Visual Direction
Color Exploration: Curated a warm, WCAG-compliant color palette featuring earth tones, rich terracotta, and deep neutrals that reflect the Trust's physical environment in Nairobi while maintaining high contrast for text and controls.
Imagery Sourcing: Selected high-impact, authentic photography to ground the form UI in the Trust’s mission, balancing heavy data collection with strong emotional connection.
Imagery Sourcing: Selected high-impact, authentic photography to ground the form UI in the Trust’s mission, balancing heavy data collection with strong emotional connection.
High-Fidelity Responsive Flow
Translated low-fi wireframes into production-ready UI across mobile and desktop. Built reusable component structures, responsive layout grids, and interactive form states to create a seamless end-to-end journey from landed visitor to confirmed volunteer.
Spec Work Considerations & Handoff Simulation
Because this was a self-initiated exploration without a live engineering team, technical handoff was replaced with design system rigor. All components were structured with production-like constraints, explicit auto-layout rules, variant states, and clear token hierarchies so the flow could theoretically be handed off to engineering without friction.
Click the images below to enlarge.
Accessibility Overhaul
From Zero to 100% AA Compliance
I led the charge to scale our system to 100% WCAG Level AA compliance across web and iOS. Instead of just slapping reactive checklists at the end of a project, I built proactive token libraries and documentation that got design and engineering on the exact same page. The result? A measurable, audit-ready framework that took the guesswork out of all future client work.
Systemic Impact
Nationwide Enablement: Led US-wide lunch-and-learn presentations for our consultants, training them on how to confidently pitch accessibility compliance to prospective enterprise clients.
VPAT & Sales Enablement: Conducted comprehensive audits to achieve 100% WCAG Level AA compliance across web and iOS, authoring the formal VPATs that directly unlocked new enterprise sales revenue.
Accessible Architecture: Created semantic token libraries and strict screen-reader specifications to ensure a seamless, compliant product foundation across all client touchpoints.
VPAT & Sales Enablement: Conducted comprehensive audits to achieve 100% WCAG Level AA compliance across web and iOS, authoring the formal VPATs that directly unlocked new enterprise sales revenue.
Accessible Architecture: Created semantic token libraries and strict screen-reader specifications to ensure a seamless, compliant product foundation across all client touchpoints.
Problem Solving
Roadmap Development: Navigated a chaotic, undefined scope by mapping out a clear technical timeline for our massive accessibility migration.
Cross-Platform Parity: Balanced tricky WCAG rules with daily usability, keeping web and native mobile components perfectly in sync.
Adaptive Execution: Pivoted design strategies quickly when hitting technical development walls, keeping engineering moving without losing momentum.
Cross-Platform Parity: Balanced tricky WCAG rules with daily usability, keeping web and native mobile components perfectly in sync.
Adaptive Execution: Pivoted design strategies quickly when hitting technical development walls, keeping engineering moving without losing momentum.
Integration
Cross-Functional Bridge: Handled the end-to-end execution, acting as the daily translator between our design and engineering teams.
Process Optimization: Partnered with developers to build automated compliance checks and clean documentation directly into our active deployment pipeline.
Team Enablement: Created shared onboarding guides to take the pressure off a single owner, making the system easy for new teams to adopt.
Process Optimization: Partnered with developers to build automated compliance checks and clean documentation directly into our active deployment pipeline.
Team Enablement: Created shared onboarding guides to take the pressure off a single owner, making the system easy for new teams to adopt.
Implementing Design Tokens
Building a Scalable, Cross-Platform Foundation
To stop design and engineering from speaking two entirely different languages, I introduced design tokens to anchor our ecosystem. It cleared up the cross-platform static, ensuring that what we design in Figma actually matches what gets built. This system keeps our visual language tightly locked in, making team collaboration a breeze across every device.
Token Architecture
Scalable Structures: Spearheaded the foundation for a multi-tier (primitive and semantic) design token architecture that lets our system scale cleanly as the product grows.
Unified Grammar: Established a single naming convention inside Figma, aligning our design team around modern, engineering-friendly industry standards.
Future-Proofing: Wiped out massive design debt by constructing a flexible environment that adapts dynamically to changing product needs.
Unified Grammar: Established a single naming convention inside Figma, aligning our design team around modern, engineering-friendly industry standards.
Future-Proofing: Wiped out massive design debt by constructing a flexible environment that adapts dynamically to changing product needs.
Cross-Platform Sync
Platform Parity: Expanded the token system across web and iOS, ensuring a seamless, identical brand experience for users moving between devices.
Engineering Alignment: Partnered directly with mobile and web engineers to co-author a shared naming schema, cutting developer handoff friction and redundant code.
Source of Truth: Maintained a centralized token pipeline to bridge the design-to-code gap, guaranteeing 1:1 visual accuracy across production builds.
Engineering Alignment: Partnered directly with mobile and web engineers to co-author a shared naming schema, cutting developer handoff friction and redundant code.
Source of Truth: Maintained a centralized token pipeline to bridge the design-to-code gap, guaranteeing 1:1 visual accuracy across production builds.
Scale & Enablement
End-to-End Rollout: Owned the tokenization of our core component libraries, turning fragmented visual assets into a highly organized system.
Team Education: Acted as the core subject matter expert, running practical training workshops to drive token literacy and organic adoption across teams.
Iterative Problem Solving: Solved ambiguous edge cases by testing token structures in real time, rapidly pivoting our setup whenever engineering constraints hit a wall.
Team Education: Acted as the core subject matter expert, running practical training workshops to drive token literacy and organic adoption across teams.
Iterative Problem Solving: Solved ambiguous edge cases by testing token structures in real time, rapidly pivoting our setup whenever engineering constraints hit a wall.
