Shipped
Team Collaboration
Design System
Establishing a Scalable Design System for a High-Growth Startup
Develop a scalable design system to align cross-functional teams and streamline workflows in a rapidly growing startup, ensuring consistency across all touch points while addressing both user and business pain points.
My role
I led the creation of a scalable design system, collaborating across teams to address user and business needs. My role involved prioritizing components, designing key elements, and ensuring design quality.
Team
Timeline
6 Months
(Including Design, DQA and DLS Check)
Impact
Components
Saved weekly
Project overview
Product Introduction
LineupX, an early-stage startup, operates in the B2B and B2B2C sectors, delivering tailored solutions to edtech companies. The platform enables these companies to offer customized job boards and personalized analytics tools, adding value to their offerings. LineupX scrapes relevant job data, empowering educational communities and validating the value of the education provided by its clients.
Problem Space
With rapid client expansion, LineupX required a unified design system to address platform inconsistencies. The company tasked the design team with building a new system from the ground up, ensuring scalability, consistency, and adaptability across diverse client needs. This design system was critical to support LineupX's growth trajectory and maintain a cohesive user experience.
plan of action
Setting the Vision
By following Dan Mall's Design System Guide, we set out to establish a new design system that would streamline future product development and ensure consistency across the platform. This case study outlines the structured process we undertook to build a robust design system, prioritizing both user and business needs, and navigating cross-functional collaboration.
Building for Scalability
The importance of scalability was paramount as this design system would serve as the foundation for all future design work. We were tasked with creating a system that wouldn’t just address current pain points but would also be adaptable to the evolving needs of the company as it continued to expand.
pain point discovery
Collaboration
Engaging with Front-End and Back-End Teams
Understanding the technical constraints and requirements was a key part of our approach. We conducted interviews with front-end and back-end developers to identify their specific pain points in working with the existing design components.
Consultation with Growth Product Managers
We also worked closely with Growth Product Managers (PMs) to understand the business needs driving the requirement for a new design system. Their insights helped us identify areas where design could contribute to business growth, ensuring that our system was aligned with broader company objectives.
Segregating Pain Points
Based on our discussions with various cross-functional teams, we categorized the pain points into two distinct areas: user pain points and business pain points. This segregation allowed us to prioritize our efforts and focus on the areas that would deliver the most significant impact.
Prioritization Process
Outlining Projects and Components
Together with my manager, we mapped out the workload by identifying and outlining upcoming design projects across the team. We created a detailed project roadmap and broke down the required UI components based on their importance in the upcoming quarters. By doing this, we could establish a clear priority list for the design system.
Heatmap for Component Overlap
We developed a heatmap to visualize overlapping UI components across different features. This heatmap was instrumental in helping us identify which components needed immediate attention and which could be deprioritized for later iterations.
Voting for Underdeveloped Components
To determine which components required the most work, we conducted a collaborative voting session with the design team. Designers were asked to vote by placing chocolates on the component postcards that they believed had the least work done.
As part of the component development process, I was assigned the redesign of Tooltips and Alerts. My role involved extensive design exploration, iterating on multiple design variations to ensure these components not only met the aesthetic standards but were also functionally superior. The design explorations were thoroughly vetted before moving into the implementation phase.
Component Development - Tooltips
Whats broken?
Design Exploration
Preparing Documentation
Component Development - alerts
Whats broken?
Design Exploration
Finding the Middle Ground
During the redesign of the Alert component, I encountered technical challenges. The developers indicated that the proposed design was difficult to implement within the constraints of the existing React component architecture. This required me to engage in multiple discussions with both developers and my manager to refine the design into something more feasible while still meeting the design objectives. This iterative process ensured that our final component was both visually appealing and technically sound.
Preparing Documentation
final delivery
Component Documentation
Once the components were finalized, each component was meticulously documented, detailing its visual anatomy, behavior, and interaction states. This documentation was essential for maintaining consistency as the design system scaled.
Handoff to Development Teams
The completed components, along with their documentation, were uploaded to Zeplin and Storybook for seamless exportation to the development teams. This ensured that developers had all the resources they needed to implement the components efficiently, reducing friction and eliminating misinterpretation during the handoff process.
reflective learnings
Collaboration is Key
Working closely with cross-functional teams highlighted the importance of clear communication and flexibility. I learned how to adapt my designs to meet both technical feasibility and business needs, enhancing my ability to deliver practical, scalable solutions.
Empathy Drives Design
Engaging with various stakeholders and understanding their pain points deepened my appreciation for empathy in design. I realized that creating a design system is not just about aesthetics but about making the process easier for everyone involved, from developers to end-users.
Strategic Prioritization Matters
The process of prioritizing components for the design system showed me how to think strategically about impact versus effort. This experience refined my ability to make informed, data-driven decisions, balancing short-term wins with long-term goals.
