Ideation

My aha moment

My earliest design challenge was to propose how we would make a clearer project overview page with all the information necessary for our users to understand and utilize easily.

As a designer, I studied a lot about “keep it simple” and “don’t make me think” concepts and I’ve also learned that, in the enterprise world, these principles can sometimes be detrimental to good user experience. Simplicity can clash with the fundamental complexity of enterprise apps and processes. Here at Snapbrilia, we were designing an enterprise product that help both power users and occasional users to hire candidates from diverse background based on their needs.

Complex ≠ Complicated

Knowing who exactly I was designing for allowed me to ask myself how to provide users with something glanceable, expandable, and customizable. While I was on my phone trying to find design inspirations, these widgets on my phone struck me. Aha! I had my answers.

As purple was our branding color, I was trying to keep consistency by using mainly purple throughout the page. Through the design process, I was quickly creating prototypes, conducting user testings, getting feedback from my teammates and engineers, and implementing changes. Snapbrillia is a nimble startup, so I have a great opportunity to constantly get advice and suggestions from the whole team.

Early design concepts for widgets.

However, as I thought I should maintain consistency on the colors, you may have noticed that the pages were a bit too purple and the data were difficult to read. You were right and these designs were called a "lavender garden" by our team🙃. While I thought I nailed the main design conponent, we faced a particular challenge with data visualization.

D3.js or Google Charts?

One of the main features of our app is to provide users with clear and comprehensive diversity analytics for expedited decision-making. In the search to make data consumable and accommodate our needs, we discussed and debated which is the best tool for presenting our insights. As we are building an enterprise platform that provides a customizable diversity analyzing tool tailored toward all kinds of hiring needs, users should be able to make the visualizations the way they want without limitation on the amount of data.

I spent a lot of time dabbling with two tools in the market — Google Charts and D3.js — and after discussing with our engineers, we decided to move forward with D3.js.

Google Charts

D3.js

✅

Color Choice for More Effective Data Visualization.

One of the main features of our app is to provide users with clear and comprehensive diversity analytics for expedited decision-making. We have 9 kinds of diversity and each one consists of at least 4 variables, and these graphs need to be customizable based on users' needs. we might add more into the category based on users' needs. The choice of color in the charts is a major factor in creating effective charts, but also a potential challenge because of the number of diagrams we need to create.
‍

For a more holistic understanding of how to better choose colors for data visualizations, I spent a lot of time buried in the research and articles. I learned from Mike Yi that a general rule of thumb is to avoid overly high levels of color saturation and brightness in order to reduce eyestrain. It's better that we use a qualitative color palette as we are working with categorical variables, which take on distinct labels without inherent ordering.

Example of a pie chart made with qualitative color palette.

*In a qualitative palette, the colors assigned to each group need to be distinct.

The Missing Centerpiece-Dashboard.

While I thought we had all the pieces together, I wanted to make sure our application provided an as frictionless as possible experience. So I put all the segments together, and I suddenly realized we didn't have a landing page after logging in. I asked myself where users land among all these projects, and apparently, we needed a space for users to track the DEI progress of the whole team/organization, a dashboard that provides vital analytics across the entire company.

The Dashboard page was the centerpiece of our design for the bate release. Nailing the user's needs on the Dashboard meant setting up a clear direction and connection to the rest of the pages. I presented 4 iterations out of over a dozen iterations for this page alone. We continued this process for the rest of the project.

Dashboard

Glanceable Overview

● I included a dashboard page in the application where recruiters can easily track hiring progress, new candidates, and DEI data across all the job openings at the company.
‍
● I adapted the widgets design here to give users a glanceable and digestible dashboard and also enable users to create projects on the dashboard page.

Project Overview

Keep Talents
On Track

● With the slider, recruiters can keep candidates in the pipeline on track. Additionally, the disparity rating, candidate response rate, and analysis regarding the role can be easily accessed without extra clicks.
‍
● I optimized the data visualization of DEI analytics by choosing distinctive colors and chart types based on the data we have.

Analytics

DEI  Initiative

● Users are able to personalize the analytic page based on needs but also check the disparity status across different hiring stages.
‍
● I provided more DEI initiatives to users by enabling them to track disparity status from the perspective of both the role and the company.

Validation

With the design changes I made, usability testing is going much smoother than before, the product got more positive feedback at the same time , and we successfully raised 1 Million in Pre-seed funding.

Pain & Gain

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 being open to changes are the keys.

Being a founding designer is about so much more than design, and I'm like a change-maker, my role is to introduce the first process and system to create a home for design to thrive and a product that can make a difference. What motivates me to take this project is being able to create solutions for diversity hiring, so I truly appreciate the opportunity to join such a collaborative team and to make a difference.