Snapbrillia
Client Name. Snapbrillia
Role - Product designer
Project - Snapbrillia web-app design
Project time - July 2021- Feb 2022
What is Snapbrillia
Snapbrillia is an inclusive hiring system that creates fair opportunities and empowers teams to hire the best people faster regardless of who they are. Snapbrillia provide diversity analytics and an unbiased hiring platform for enterprise businesses and fast-growing startups. Snapbrillia addresses the deep-seated challenges of diversity, equity and inclusion hiring with comprehensive AI technology that accelerates the quality of hires and DEI (Diversity, Equity, and Inclusion).
The goal of this project was to create a new web app interface that leverages the user experience of tracking DEI data across different hiring stages through a new visual style and modern design system.
The problem
While i join this project the design team has already started to develop some design flows, I have found out that there were not a design system to guide designer and i have started creating the design system based on available documents and business needs. To understand the expectations of the user pain points and comprehension around the design i have gathered information. There are elements and features that are not convenient to users, hence upgrading the design is important to full-fill the needs of users and achieve the business goals. In the original design, in order to check analytics, users need to click on each dropdown and there's no overview analytics for the project as a whole. The information architecture is not well organized it is difficult to understand elements. The visual hierarchy is flat, with all the information showing on landing page and customer dashboard it is overwhelming for users.
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
Whether it is to better understand the people we are designing for or just learning more about difficulties in diversity hiring – every bit of research was done with intention. We've committed early on to never do research in a silo and took full advantage of the relationships established early on to also conduct primary research.
After having a discovery meeting among our entire team we started conducting our interviews with technical recruiters, hiring managers and engineering managers. Going into the interviews, my goals were to understand not only the difficulties users faced with the current recruiting process, but also the diversity challenges in the process. In order for our design to sustain and perform, we need to find strong balance not just for the End User, but also for the Stakeholders behind the products and services we design.
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 the research and the and depending on the design discovery sessions i and the design team started working on the design process. Through the design process, I was quickly creating sketches and prototypes, conducting user testings, getting feedback from my teammates and engineers, and implementing changes. Snapbrillia is a startup, so I have a great opportunity to constantly get advices and suggestions from the whole team. After a few brainstorming sessions and going through notes I took from the interviews, I realized a dashboard page, which includes new candidates, an overview of all the open projects and the DEI data of the pipeline, was needed. A dashboard page will be a good beginning to potentially set up the design tone started.
​
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
When I joined the project, the design team had already begun developing some design flows; however, there was no established design system to ensure consistency across the product. Recognizing this gap, I took the initiative to create a design system grounded in existing documentation, business objectives, and user needs.
To ensure the new design aligned with user expectations, I conducted research and information-gathering sessions to identify pain points, usability issues, and comprehension challenges within the current interface.
Key Problems Identified
-
Lack of overview analytics: Users had to open multiple dropdowns to access analytics, with no holistic project view available.
-
Poor information architecture: The layout and organization of information made it difficult for users to locate elements and understand relationships between them.
-
Weak visual hierarchy: The landing page and customer dashboard displayed too much information at once, causing cognitive overload and reducing user efficiency.
Proposed & Implemented Solutions
-
Developed a cohesive design system – established a unified set of components, typography, colors, and interaction patterns to improve consistency and scalability.
-
Redesigned information architecture – reorganized the content structure to create clear navigation paths and logical grouping of elements, enabling users to find data quickly.
-
Introduced a high-level analytics overview – added a centralized dashboard view that presents project-wide metrics at a glance, reducing the need for repetitive dropdown interactions.
-
Enhanced visual hierarchy and layout – prioritized key information, incorporated progressive disclosure principles, and improved whitespace usage to create a more intuitive and less overwhelming user experience.
Outcome
These improvements streamlined user workflows, enhanced usability, and aligned the product’s visual and interaction design with both user needs and business goals. The newly established design system also laid the foundation for consistent future development and faster design iterations.
Learning
Since joining this project I have got a great understanding how hiring process works. The biggest challenge for me is to work between ‘what is’ and ‘what could be’ at an early-stage startup. It's like if I'm in a dark room and I sort of know where I am, but can’t really see all that well and I'm only focused on what’s right in front of me. But I'm not alone in this journey, the cross-functional partners are there with me, building the product and culture together. Always seeking feedback from the team and be open to changes are the keys.
As one of the first designers in the early stage of the startup i have gained a lot about the design process, my role is to introduce the first process and to create the design system for us to thrive and a product that can make a difference. What motivates me to take this project is being able to create solutions of diversity hiring, I truly appreciate the opportunity to join such a collaborative team and to make a difference.
.png)
