How might we develop a scalable design system for HR tech software?

Client

Role

Tools

Duration

SquarePeg Hires

Lead Product Designer

Sketch, Invision, Trello, Sketching, Google Docs, Google Hangouts

06 Months

About

Squarepeg is a smart job-matching platform, pairing job seekers and employers based on skills and personality assessments. They offer tools for job postings, candidate management, and application tracking. In January 2019, they hired me to redesign their user experience. However, during our initial projects, I identified fundamental issues with Squarepeg's product development process.

These Issues Include:

No feature validation
The feature validation process for Squarepeg was lacking. Product teams designed features by committee instead of leverage user data and research.

Unscalable Design
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.

Step 01 –

Laying the Foundations

Squarepeg was excited to get started rethinking it's user experience and building new products. Before that, however, it was my recommendation to improve the user experience of the existing pages before adding more design and tech debt.

UX Audit
I needed to quickly develop familiarity with Squarepeg, it's users, their flows, and the components that make up the app. I conducted an audit of the user interface and experience based on Jacob Nielsen's 10 principles of UI design.

Trello
I reviewed the results of the audit with the product team. These discussions sprouted user stories and epics that we managed using Trello.

Old Designs

Mini UI Refresh

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.

Navigation Redesign

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.

Step 02 –

Component Design & Exploration

Next, we explored the features that the design system would be applied to and extrapolated the components that were shared throughout. We also brainstormed ways for these pages to be even more consistent with each other through ideation.

Design Principles

We believed that it was necessary for the team to develop design principles early on to better align in the future.

Accessibility
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.

Consistency
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.

Grids

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.).

Step 03 –

Product Design

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:

Feature

Match Screen

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.

Feature

Employer Onboarding

 
Squarepeg's business onboarding allows employers to register their business, create job listings, and onboard to the platform. The challenge of creating the user flow came from converting a legacy user journey to a modern and succinct flow.

Feature

JobFit Assessment

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.

Step 05 –

Pattern & Component Library

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.

Patterns Intro
We developed intuitive patterns as solutions to recurring instances to problems throughout the product. These pattern instances include cards, tables, forms, animations, alerts, etc.

Components Intro
We developed components as solutions to specific recurring UI problems throughout the product. Examples of components include buttons, inputs, icons, toggles, status labes.

Documentation
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.

Tools
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.