Brushfire Design System
THE CLIENT
Brushfire is a SaaS platform that enables organizations to create events and sell tickets through an admin portal and customer facing web interface.
This project was completed with Made with Future, a design and development agency. I was the primary product designer for the project and collaborated with project managers, and the client.
December 2024 - April 2025
The Challenge
Users were struggling to navigate Brushfire's admin portal effectively, requiring intensive customer support assistance to complete basic tasks. The navigation structure was confusing, the visual design lacked consistency, and there was no systematic approach to component usage across the application.
Screenshots of demo app before redesign (some data has been blurred out)
Key Pain Points
Navigation Confusion: Users couldn't easily understand where they were within the app's hierarchy
Accessibility Issues: Brand colors were too bright and failed accessibility standards
Inconsistent UI: Lack of standardized components led to a fragmented user experience
Support Burden: High volume of user confusion led to increased customer support tickets
Design Solutions
Navigation Restructure
Solution: Implemented a nested navigation system with clear hierarchical levels
Separated global navigation from event-specific navigation
Created visual and structural distinctions between navigation levels
Established clear wayfinding indicators to help users understand their current location
Impact: Users could now easily navigate between global settings and specific event management without confusion.
Comprehensive Color System
Challenge: Existing brand and accent colors were too bright and inaccessible
Solution: Developed a complete color framework including:
Grayscale System: Full range for backgrounds, foregrounds, text, and subtle UI elements
Brand Colors: Adjust the brand color palette to add a wider range of tones and decrease the saturation for better accessibility
Accent Colors: Simplified accent color palette to have few colors but expanded to range by adding tints and shades.
Impact: Improved accessibility compliance and visual hierarchy while maintaining brand consistency.
Complete Component Library
Designed all components needed for the admin portal application. Each component was designed with multiple states, sizes, and variants to handle diverse use cases across the application.
Organized component library with robust documentation and best practices
Consistent spacing and typography scales
Responsive behavior guidelines
Template Screen Library
Purpose: Accelerate design and development of new features
Deliverables:
Pre-built screen templates for common user flows
Layout patterns for different content types
Responsive templates for various device sizes
Impact: Reduced design and development time for new features while ensuring consistency.