Table component

Workstream

An all-in-one HR platform for hourly workers. It started as a hiring company, now and a multi-product company providing HR, Payroll and Hiring software solutions on desktop and mobile.

Role

Design System Lead | Designer

Team

2x Product Designers | Nash Sofan
1x Software Engineer | Sun Feng

In a nutshell

background and the problem

Tables are a crucial part of our users workflows, yet we have over 30 unique, non-reusable variations. Each is built from scratch, increasing development time reinventing the wheel and affecting quality, resulting in poor user experience.

Tables have major issues like inflexible design, excessive paginations, and inconsistent search/filtering.

Workstream has been pre-dominantly desktop, it was a given that we lacked mobile support in tables, adding extra design and development costs. This problem will worsen as we expand our Payroll/HRIS product offerings— Payroll, Team Records, Time off, Time and Attendance, Surveys, and Reporting.

Tables are a crucial part of our users workflows, yet we have over 30 unique, non-reusable variations. Each is built from scratch, increasing development time reinventing the wheel and affecting quality, resulting in poor user experience.

Tables have major issues like inflexible design, excessive paginations, and inconsistent search/filtering.

Workstream has been pre-dominantly desktop, it was a given that we lacked mobile support in tables, adding extra design and development costs. This problem will worsen as we expand our Payroll/HRIS product offerings— Payroll, Team Records, Time off, Time and Attendance, Surveys, and Reporting.

problems that we are facing
—-
Where we are

Impact and value

30%

faster production

4

products supported

+3hrs

per designer weekly

Today, our robust design system boasts 23 components, streamlining development and cutting time to market. It has supported numerous projects across GTM and EPD teams.

This work enabled us to launch Workstream Payroll and Time Off in nearly half the time it took to release similar sized products.

The journey

the audit

Upon joining Workstream, the design team had just initiated a pilot project to test an in-house design system, beginning with the Tabs component.

I wanted to gather insights on the Pilot project, the processes, successes, and areas needing improvement.

After meeting with engineers and designers, we found that the Tabs component was well-documented and met deadlines but lacked governance, process, and basic design elements such as colors and typography.

Examined 30+ pages across 4 product lines.

The major inconsistencies were:
— Header (Navigation and Title section)
— CTA
— Controls
— Data Row/Cells and more

After meeting with engineers and designers, we found that the Tabs component was well-documented and met deadlines but lacked governance, process, and basic design elements such as colors and typography.

Securing buy-in and setting objectives

It was evident that we weren't ready to dive into components—we needed a solid foundation first. Just like building a house, a design system requires a clear structure and plan.

After weeks of heads-down work, I came back with a plan to increase development velocity. I shared my vision to leadership and gained the support of Tim Rechin, the Head of Design; Jay Yuan, the Head of Engineering; and Max Wang, the Co-founder.

EPD_OBJ5.1 | End-to-end process
The company will understand the process and the guidelines of how we design

EPD_OBJ5.2 | Identity and a backlog
Establish a Notion hub and a roadmap to inform 2023 planning

EPD_OBJ5.3 | Foundational elements
Design, implement, and document the grid system, colors, typography, icons, elevations, and corner radius

It was evident that we weren't ready to dive into components—we needed a solid foundation first. Just like building a house, a design system requires a clear structure and plan.

After weeks of heads-down work, I came back with a plan to increase development velocity. I shared my vision to leadership and gained the support of Tim Rechin, the Head of Design; Jay Yuan, the Head of Engineering; and Max Wang, the Co-founder.

Deep dive

evolution of the process
Building a design system isn't one-size-fits-all, adopting an off-the-shelf process was not an option.
After 15+ hours of meetings, 5 iterations, and 6 whiteboard sessions with EPD members, I was able to finally land a bespoke end-to-end process tailored to our needs. Needless to say, we continue to enhance this process to this day…
It enabled us to build 20+ components, kept us honest and aligned, and empowered EPD members to contribute effectively. Plus, it's seriously boosted the quality of our components!

After 15+ hours of meetings, 5 iterations, and 6 whiteboard sessions with EPD members, I was able to finally land a bespoke end-to-end process tailored to our needs. Needless to say, we continue to enhance this process to this day…

It enabled us to build 20+ components, kept us honest and aligned, and empowered EPD members to contribute effectively. Plus, it's seriously boosted the quality of our components!

The process has enabled us to build 20+ components, kept us honest and aligned, and empowered EPD members to contribute effectively. Plus, it's seriously boosted the quality of our components!

A home for the design system

00

Retro and plans

takeaways

-

near-future focus

Adoption tracking
Use Figma analytics and dev data to create an adoption dashboard, highlighting value, identifying gaps, and celebrating successes.

Component
Building the Table, a key element in our users' workflows and product roadmap, enhancing velocity and cohesion across Workstream HRIS.

Nash Sofan

sofannashwan@gmail.com

(415) 757-7196

Nash Sofan

Work

About

Resume

Nash Sofan

Nash Sofan

Work

About

Resume