Snapbrillia
Client Name. Snapbrillia
Role - Product designer
Project - Snapbrillia web-app design
Project time - July 2021- Feb 2022
What is Snapbrillia
Snapbrillia is a comprehensive hiring and workforce management system focused on Diversity, Equity, and Inclusion (DEI). The platform addresses systemic hiring biases by using AI technology to accelerate the recruitment of top-tier talent regardless of background. As a SaaS B2B solution, it integrates payroll management with advanced diversity analytics, providing companies with the tools needed to foster fair opportunities and scale inclusive teams with confidence.
Project goal
The goal of this project is to create a web app interface that leverages the user experience of hiring, managing emplyees and tracking DEI data across different hiring stages through a new visual style and modern design system.
The problem
Upon joining the project, I identified the lack of a centralized design system. To bridge this gap, I audited existing documentation and business requirements to build a scalable design system from the ground up.
By conducting user research to identify friction points, I discovered that the existing information architecture was disorganized and the visual hierarchy was too flat, leading to cognitive overload on the dashboard.
Specifically, the lack of an 'at-a-glance' analytics overview forced users to manually check individual dropdowns—a significant pain point I addressed by restructuring the data flow to better align with user needs and business goals.
Note: Snapbrillia.com is now under Grave.id and may not reflect the design works done during this project period.
The Design Team
The Design Process
Research
Empathy and intentionality drove our research process from day one. We committed to a collaborative approach, breaking down silos by leveraging established stakeholder relationships to conduct deep primary research.
Following a cross-functional discovery workshop, I led interviews with technical recruiters, hiring managers, and engineering managers. My objective was to uncover friction points in the existing recruitment workflow while identifying systemic barriers to diversity.
By synthesizing these insights, I ensured our design solutions struck a sustainable balance between user experience and high-level business objectives.
How might we questions
-
How might we better communicate the project overview to users?
-
How might we help recruiters tracking organization’s DEI progress?
-
How might we inform users of candidates in different stages?
-
How might we help recruiters use their time efficiently?
-
How might we make the web app simple and easy to use?
User Persona
.png)
Iteration
Following our discovery sessions, I transitioned into an iterative design phase. Working in a high-velocity startup environment, I focused on rapid prototyping and continuous testing.
I facilitated a tight feedback loop between the design team, engineering, and stakeholders to ensure technical feasibility and user alignment.
Synthesizing the data from our initial interviews, I identified a critical gap: the need for a centralized dashboard. I designed this hub to provide an immediate overview of new candidates, active projects, and real-time DEI pipeline metrics, effectively setting the visual and functional tone for the entire platform.
The Dashboard
For the dashboard to better serve the users, it should be glanceable, relevant and personalized. The first thing that i did is to recreate the dashboard so that users will have a pleasant and smooth experience using the app.
Design System/Style Guide
Illustrations used
Wireframe
Solution
Refined Case Study: Snapbrillia Dashboard & Design System
The Challenge When I joined the project, the design team was moving quickly, but without a centralized Design System, the product's consistency was at risk. The existing interface suffered from a flat visual hierarchy and fragmented analytics, which led to cognitive overload and friction in the user journey.
My Approach I took the initiative to build a scalable design system from the ground up, grounded in business objectives and user research. I conducted deep-dive sessions to identify pain points, ensuring every design decision was rooted in solving actual usability challenges.
Key Problems Identified
-
Fragmented Analytics: Users were forced to toggle through multiple dropdowns to see data, with no "big picture" overview of project health.
-
Disorganized Architecture: A lack of logical grouping made it difficult for recruiters and managers to navigate complex hiring pipelines.
-
Cognitive Overload: Both the landing page and dashboard were "information-heavy," overwhelming users with too much data at once.
The Solution
-
Unified Design System: Established a comprehensive library of components, typography, and interaction patterns to ensure brand consistency and speed up engineering handoffs.
-
Centralized Analytics Dashboard: Designed a high-level overview that surfaces project-wide metrics at a glance, eliminating redundant clicks and improving data transparency.
-
Restructured Information Architecture: Reorganized content into intuitive clusters, using progressive disclosure to show users only the information they need at any given moment.
-
Prioritized Visual Hierarchy: Optimized whitespace and typography to guide the user’s eye toward key actions, reducing time-to-task and mental fatigue.
The Outcome
The redesign successfully streamlined user workflows and aligned Snapbrillia’s visual identity with its mission of inclusive, efficient hiring. By implementing the new Design System, we reduced design-to-development time and created a foundational framework that supports the platform’s future scalability.
Key Improvements Made:
-
Power Verbs: Used words like "fragmented," "tethered," "spearheaded," and "optimized" to sound more authoritative.
-
Formatting: Used bullet points and bold text to make it easy for a recruiter to "skim" your case study and understand the value in 30 seconds.
-
Industry Terms: Included terms like "Progressive Disclosure" and "Time-to-task"—this shows you have a deep understanding of UX theory.
-
Flow: Improved the transition from the problem directly to the solution to show a clear "Cause and Effect."
Learning
Navigating the ambiguity of an early-stage startup requires a delicate balance of tactical execution and long-term vision.
As one of the company's first designers, I took on the responsibility of introducing structured design processes and a scalable design system to help our team thrive.
My journey was defined by a 'build-and-learn' mindset, relying on constant feedback loops with my engineering and product partners.
My core motivation remains the mission: leveraging AI and intentional design to solve systemic challenges in diversity hiring.
Being part of this collaborative team has allowed me to translate business needs into a product that makes a tangible social impact, proving that fair opportunities start with thoughtful design.
.png)
