Supporting the all-in-one vision by building a Table component
Overseeing the design and delivery of a multi-platform table component integrated into our system.
Workstream
An all-in-one HR platform for hourly workers. It started as a hiring company, now a multi-product company providing HR, Payroll and Hiring software solutions on desktop and mobile.
Role
Design System Lead
Team
1x Product Designer | Nash Sofan
1x Product Design Intern | Junjie Tang
2x Software Engineers
In a nutshell
With fragmented design efforts, FE repositories, and slow development processes, I united teams by establishing a design system function with an end-to-end process, strategy, foundations, and design and code documentation.
As a result, we were able to build over 20 components and patterns that lead to increasing development efficiency by 30%, support Engineering/Product/Design (EPD) and go to market (GTM) projects, and launch Workstream Payroll in a record 5 month time frame.
Problem
How it started
Our product offering expanded as Workstream shifted from serving SMBs to targeting the mid-market. At the time, we had a basic Figma style guide and standard components from a popular design library. While this was sufficient for an early-stage startup, it wasn't enough to build fast and create cohesive solutions across products.
Development process problems
The development process fell short in speed, quality, and user experience. Without a unified design system, our distributed team faced fragmented design efforts, unshared front-end repositories, and low development velocity.
Layout inconsistencies
Understanding the problem
Knowing our audience
Upon joining Workstream, the team had initiated a pilot to test an in-house design system, beginning with the Tabs component. Familiarizing the problem before starting to solution was key.
Research objectives
I wanted to immerse myself in the daily realities of designers, developers, and decision-makers—identifying not just their challenges, but also existing processes, and understanding their unstated frustrations and desires.
Insights
There is no design system process, no gate-keepers and no communication.
Design documentation is nonexistent, with no style guide.
There is no shared FE repo, engineers are re-inventing the wheel.
Constant back and forth with a 24h turnaround time due to time differences.
Although the pilot was successfully delivered, it was evident that we weren't ready to dive into components—we needed to build it from the ground up.
Climax
Establishing a product and identity
To build credibility and enhance visibility across the organization, we approached the project like a product. We collaborated with our Brand Director, Vu, to create a design system identity and voice and tone guidelines.
Then established a comprehensive suite of resources, including a high-level documentation hub on Notion, a code library in Storybook, design documentation in Zeroheight, and a UI Kit in Figma. This was the result of several weeks of cross-functional collaboration, iterative development, and extensive secondary research.
Design system hub in Notion
End-to-end process and operating plans
High-level
Not a waterfall process, but do end sequentially, with the flexibility to skip steps when not needed
Detailed evolution
Planning and execution
Workflow backlog and roadmap
After setting the process, I sat in product squad's quarterly meetings, ran product audits, and led workshops to create a backlog, operating plans, and system roadmaps.
Backlog workflow views and prioritization framework
The roadmap not only detailed the steps but also aligned with Workstream’s strategy and the EPD team's goals. It became our guide, ensuring every decision was in sync with the bigger picture.
Design system V1.2 roadmap
Kicking off the foundations
Once the backlog was set, it became clear that the foundations had to be the top priority, as they would serve as the groundwork for everything else.
We kicked off the foundation work by partnering with Branding for colors, and voice and tone. After that, we tackled the remaining foundational work by conducting audits, workshops, research, design and code work, and stress tests.
Foundations UI Kit
With foundations set, our focus shifted to enable effective contribution. We provided office hours, request forms, monthly updates, and engaged in product meetings to tackle the backlog systematically. To date, Sun and I have collaborated to design, implement, and deliver over 20 cohesive patterns and components.
Code and design documentation
To reduce adoption friction and educate members on component usage, Sun and I developed detailed design and code documentation in Zeroheight and Storybook.
Sneak peak of our design documentation in Zeroheight
Where we are today
Impact
I’m really proud of the impact we’ve made. What started as a small initiative within the Design team has grown to influence Engineering, Go-to-Market, and Data teams.
We’ve streamlined thousands of lines of code, unified frontend repositories, and enhanced design consistency. This accelerated development while maintaining high standards for quality and accessibility.
Our work has been instrumental in advancing Workstream’s vision for an all-in-one HR platform, supporting the successful launch of Payroll and 4 other products.
~30%
increased velocity in design and engineering.
3hrs
saved per designer weekly by optimizing the Figma library.
20+
design system patterns and components across mobile and desktop.
86%
less design-related Jira tickets compared to last year. Less tech debt!
Takeaways
🍝
The product world is spaghetti—It's not linear and too much process is not ideal. Familiarize yourself with all product roadmaps and seize the moment.
🙅🏽♂️
Don't always say yes—You'll get caught up with requests, learn to prioritize effectively and make informed decisions. Stick to a plan.
🛤
Focus and be scrappy—It's always important focus on the goal and strategy, and don't be shy to use native components.
🗣
Adoption and maintenance is tough—You'll need to sharpen your sales and debating skills while you're building components. You will also need to maintain the system.