How might we develop a scalable design system for HR tech software?
Lead Product Designer
Sketch, Invision, Trello, Sketching, Google Docs, Google Hangouts
Squarepeg is an intelligent job matching platform that matches job seekers to employers. Job seekers (candidates) and employers are given assessments that track soft skills, hard skills, and personality traits. The Squarepeg team designs and builds applications that allow employers to post jobs and manage candidates. Job seekers are able to assess personality traits, upload work history, apply to jobs, and manage the application process.
Squarepeg reached out to me in January 2019 to create a new design system and user experience for their candidates and employers. Upon our first few projects together I noticed that there was something fundamentally wrong with the way that Squarepeg managed its products.
No feature validation
The feature validation process for Squarepeg was lacking. Product teams designed features by committee instead of leverage user data and research.
The developer designed components could not scale the product beyond MVP. The platform also featured several inconsistencies in typography, UI elements, grid system, and brand elements across the entire application.
UI Designed by developers
Squarepeg hired a development team to create the MVP of its app. This caused critical navigation issues and an outdated interface.
Disorganization of product features
The product team had no set processes in place to documents user stories and upcoming features.
Squarepeg wanted to hold off on a time-intensive rebranding until 2020 so I introduced an interface update strategy (that includes stakeholder interview, mood boards, and style tiles) to allow me to quickly update the existing design elements.
The audit uncovered gaps and major issues within our user flow. This prompted discussions for a complete rethinking of the navigation. First, I wanted to uncover various users' mental models of how the information should be organized. I conducted a card exercise with users and the product team to figure out where information lives in the app. Afterwards, I developed a new navigational flow and sitemap to be shared with the team.
We believed that it was necessary for the team to develop design principles early on to better align in the future.
Squarepeg users are most successful when they understand Squarepeg's data and how it's being used to match them to jobs and candidates. For our data to be useful for users we made sure data was legible, the source was clear, and the impact was evident. This is something that needed to be understood by a variety of candidates – from cashiers to CEOs. We used clear design and copy to ensure this.
Users such as HR specialists use Squarepeg along with other software such as ATS to perform work. They need to be able to use Squarepeg efficiently by developing usage patterns that are reminiscent of other HR tech software. This is done by using standard controls and gestures consistently so that the app behaves the way people expect.
Squarepeg's UI is dominated by white, navy, gray, and accents of green. One of Squarepeg's main offerings is clear and easy to understand test results, and we didn't want the design to distract from this. This is why we decided to use other bright somewhat-saturated colors to convey meaning. Green is used for primary actions since green is one of Squarepeg's legacy brand colors. Bright teal is for preferences. Purple is for personality traits. Bright blue is for work experience.
A strong grid and spacing system is essential to great design system. In order to create a harmonious experience we wanted the interface to promote clarity, space, and readability. In order to do this, we developed an 8 x 8 pixel-grid system which offers a vertical and horizontal rhythm for the showcasing data and UI elements. We based spacing on multiples of 2 (4, 8, 16, 32, 64, 128, etc.).
The goal of the Squarepeg design system was to create a solution that best met the needs of our users and business. This solution includes the ability to rapidly develop new app pages and features in order to scale to new heights.
Below is some insight into the three products that shaped the design system:
Squarepeg's job seeker platform allows users to search for jobs, view matches, and track applications. We allow users to view the strength of a job match based on personality traits, work preferences, salary preference, and experience match. The challenge of this project was creating a job details page that both showcased the power of Squarepeg analytics while also allowing users to view and apply to jobs quickly.
Squarepeg is powered by intelligent job matching. The begininng of each journey for all user groups (with the exception of HR teams) begin with competency, trait, and preference assessments.
Squarepeg's workplace personality report gives users insights about soft traits as an employee and which roles might be the best fit. JobFit assessments are based on extensive research and testing to ensure reliability and validity in job matching.
The team and I spent weeks researching, wireframing, designing, prototyping visual solutions for the future of Squarepeg. We were able to identify systemization opportunities and develop solutions across an extensive suite of new components.
Our design system is made up of foundational elements like defined type systems for headers and content, a color palette, patterns, components, and templates.
We developed intuitive patterns as solutions to recurring instances to problems throughout the product. These pattern instances include cards, tables, forms, animations, alerts, etc.
We developed components as solutions to specific recurring UI problems throughout the product. Examples of components include buttons, inputs, icons, toggles, status labes.
The documentation system was created using Notion - an open, collaborative, and easy-to-up, web app. We wanted to ensure that any team member found the document accessible and easy to understand.
We developed the design system UI exclusively in Sketch, we used Invision to manage the library and collaborate as a team. Sketch is a powerful tool for creating editable symbols and Invision is great for managing elements and keeping track of changes.
Working with developers
In order to communicate with developers efficiency we developed a strategy to track the progress of the design system. We used github and trello to manage user stories for specific components. We also collaborated on naming conventions to avoid issues as this system scaled. We also met weekly to discuss new components and discuss design questions on invasion.