Wizehire.com
Freelance Product Designer · 2020–2022
Design Systems, User Interface Design, Web Design
Wizehire is a hiring platform for small business owners. My role at the company was to establish a formal design system to maintain design consistency across all of the company’s products and allow for more effective product development. As part of the project I’ve formalized the use of typography, color, layout grid, and set up a component library on Figma. I also designed several web-based features as well as the initial version of the company’s first iOS app.
Background
In 2020 Wizehire was growing rapidly as small business owners began adopting digital tools to improve their hiring practices, a trend that was accelerated by the COVID-19 pandemic. Wizehire initially approached me to design several new product features that were being requested by the company’s customers. Soon after I started working on my first project, though, it became apparent that the existing design system couldn’t keep up with the rapid pace of growth at the company and urgently needed updating. I was tasked with updating the design system as well.
Design Process
I met with the PM and the Lead Engineer on the project twice a week to discuss progress and gather feedback. At each session, I walked the team through the latest round of iterations, presented the pros and cons of each solution, and asked for input. We then decided what the focus of the next round should be. This tight feedback loop helped us keep a good cadence throughout the entire design process, from initial scoping to developer hand-off.
Designing the System
Working on new product features helped me to take stock of the different styles, components, and patterns used throughout the product. Once I had a firm grasp of the way things worked I started listing the improvements that could be made, which elements could be consolidated and which eliminated altogether. I then began setting up the new design system in a separate Figma file.
The areas I focused on were:
- Layout grid consistent with the grid system implemented in production.
- Accessible, scalable color palette based on HSL values.
- Typography styles including headings, body text, and labels.
- Scalable SVG icon library based on GitHub’s Octicons.
- Components library with support for auto-layout and variants in Figma.
- Template library of the main views showcasing best-practices.
The Figma file evolved side-by-side the new features I was working on, allowing me to see what worked and what didn’t in real time. It helped me refine various aspects of the design system and ensure better alignment with the direction the company was heading towards.
Designing in Parallel
Design systems play a dual role in product development: they support existing product features and help product teams skate where the puck is going. While it may seem that developing a design system should follow new product initiatives, in practice, the two should be done in parallel, informing and shaping one another. This approach ensures that product teams can meet not just current business needs and user expectations but also those that emerge in the future.