Creating a Design System for a Productivity Startup
Championing and executing a design system and visual language overhaul by securing leadership approval, facilitating design sprints, and collaborating with developers for implementation.
Design System — component library overview
Overview
General Task's mission is to make knowledge workers more productive. I was the first full-time product designer alongside a small, but mighty cross-functional team of 6 developers, a product manager, and a product design intern.
Following a successful public beta launch and rebrand, my team looked toward improving our product development cycle. To address inefficiencies, I championed and executed a design system and visual language overhaul by securing leadership approval, facilitating design sprints, and collaborating with developers for implementation.
Business Goal
To streamline and improve the product development cycle in order to ship features at a higher quality bar and with minimal friction.
User Goal
Product designers and developers need an intuitive, consistent, and comprehensive system which accelerates the development of feature work.
My Contributions
- 📣Gathered feedback from colleagues and leadership
- 🔬Conducted a full product audit
- 🗓️Facilitated and scheduled design sprints
- 💻Designed new visual language and component library alongside my intern
- 🤝Improved documentation and handoff processes
Our Solution
With a focus on scalability and efficiency, my team delivered a revamped visual language that would serve as the foundation of our work, and an improved set of documentation, outlining new standard processes.
After an intensive period of research, revision, and planning, our team launched a comprehensive overhaul of General Task's design system. Through this process we refined our design philosophy, enhanced product usability, and improved our development process, guided by the following principles:
- •Visual consistency and harmony
- •Product usability and accessibility
- •A strong connection to our brand and mission
With a focus on scalability and efficiency, my team delivered a revamped visual language that would serve as the foundation of our work, and an improved set of documentation, outlining new standard processes.
After an intensive period of research, revision, and planning, our team launched a comprehensive overhaul of General Task's design system. Through this process we refined our design philosophy, enhanced product usability, and improved our development process, guided by the following principles:
- •Visual consistency and harmony
- •Product usability and accessibility
- •A strong connection to our brand and mission
New Styles
We were thoughtful about aligning our new styles with our product vision, striving for visual harmony, better accessibility, and better alignment with our rebrand.
Typography
We added type styles optimized for desktop for more flexibility, old styles were amended to address accessibility issues, and naming conventions were updated.
Color
Using semantic names for colors, rather than generic names or hex codes, made communication more efficient between designers and developers. We expanded our palette to accommodate our brand colors, various backgrounds, as well as semantic colors to indicate status.
Spacing and Grid System
Our team previously was not adhering to a pixel grid or had any spacing components. With our new spacing and grid system, we were able to deliver more robust consistency across the product.
We were thoughtful about aligning our new styles with our product vision, striving for visual harmony, better accessibility, and better alignment with our rebrand.
Typography
We added type styles optimized for desktop for more flexibility, old styles were amended to address accessibility issues, and naming conventions were updated.
Color
Using semantic names for colors, rather than generic names or hex codes, made communication more efficient between designers and developers. We expanded our palette to accommodate our brand colors, various backgrounds, as well as semantic colors to indicate status.
Spacing and Grid System
Our team previously was not adhering to a pixel grid or had any spacing components. With our new spacing and grid system, we were able to deliver more robust consistency across the product.
Updated Component Library
With our new set of styles, we refined our components library with a uniformity we were previously lacking. This enhanced library sped up our design process, enabling the team to churn out iterations faster than before.
Templates
We created templates out of commonly used components, outlining use cases and sizing specifications.
New components and interaction states
We accounted for error states, destructive actions, and several focus states, creating a more comprehensive library of components to account for a wider variety of use cases.
Brand alignment
Our color palette and design aesthetic fit our product vision and updated brand identity.
Flexibility
Leveraging Figma's capabilities, we were able to create flexible components that would allow us to efficiently create design iterations.
Task items were redesigned to accommodate our current and future integrations. We decreased padding for increased list item density, and moved the domino grabber outside to avoid moving the checkbox click target.
With our new set of styles, we refined our components library with a uniformity we were previously lacking. This enhanced library sped up our design process, enabling the team to churn out iterations faster than before.
Templates
We created templates out of commonly used components, outlining use cases and sizing specifications.
New components and interaction states
We accounted for error states, destructive actions, and several focus states, creating a more comprehensive library of components to account for a wider variety of use cases.
Brand alignment
Our color palette and design aesthetic fit our product vision and updated brand identity.
Flexibility
Leveraging Figma's capabilities, we were able to create flexible components that would allow us to efficiently create design iterations.
Task items were redesigned to accommodate our current and future integrations. We decreased padding for increased list item density, and moved the domino grabber outside to avoid moving the checkbox click target.
Improved Documentation
Our updated design document was built in Figma. It gave clear instructions to the team on how to use and update our design system. We kept a change log of items whenever things changed. I received positive feedback from our developers and leadership team that the extra instruction was a huge improvement from our past document which was often ambiguous and hard to navigate.
Our updated design document was built in Figma. It gave clear instructions to the team on how to use and update our design system. We kept a change log of items whenever things changed. I received positive feedback from our developers and leadership team that the extra instruction was a huge improvement from our past document which was often ambiguous and hard to navigate.
Process Overview
Phase One: Research and Discovery
General Task's UI suffered from inconsistencies, both visually and functionally. We were missing foundational interaction states and had inconsistent components across the app that led to an overall clunky user experience. These were definitely red flags which decreased the quality bar of our app.
Designer-to-developer communication was stifled by a lack of a source of truth for our designs. Oftentimes, components were created without defined spacing, color, or typographical specs, leading to inconsistency between projects. Developers often would take matters into their own hands and design components from scratch.
Phase Two: Synthesis and Analysis
It started to become obvious to us: we needed a source of truth for designers and developers. Without a fully comprehensive design system, the quality bar of our product would continue to suffer as we kept building new features.
After consulting with leadership, developers, and my design intern, we began to ask ourselves guiding questions:
- •How might we improve our design foundations so that we can grow at scale?
- •How might we create a system more accessible to our developers?
- •How might we create a system that encourages more alignment between designers?
Auditing Our Design Library
We went through a thorough audit process, analyzing our legacy design library which contained our (quite disheveled) set of product styles and components. We recorded what was missing, found opportunities for improvement, and prioritized which work was most feasible and pertinent within our timeline.
Notable observations from our audit:
- •We were missing standardized grid system and spacing units.
- •We lacked some essential interaction states for a majority of our components.
- •We were using an outdated color system which wasn't aligned with our recently updated branding.
Competitive Analysis
I conducted a competitive analysis of popular design systems which gave us inspiration for how we could improve our system and documentation: Google's Material Design 3, Figma's UI2, Linear's design system, and Stripe's design system.
Phase One: Research and Discovery
General Task's UI suffered from inconsistencies, both visually and functionally. We were missing foundational interaction states and had inconsistent components across the app that led to an overall clunky user experience. These were definitely red flags which decreased the quality bar of our app.
Designer-to-developer communication was stifled by a lack of a source of truth for our designs. Oftentimes, components were created without defined spacing, color, or typographical specs, leading to inconsistency between projects. Developers often would take matters into their own hands and design components from scratch.
Phase Two: Synthesis and Analysis
It started to become obvious to us: we needed a source of truth for designers and developers. Without a fully comprehensive design system, the quality bar of our product would continue to suffer as we kept building new features.
After consulting with leadership, developers, and my design intern, we began to ask ourselves guiding questions:
- •How might we improve our design foundations so that we can grow at scale?
- •How might we create a system more accessible to our developers?
- •How might we create a system that encourages more alignment between designers?
Auditing Our Design Library
We went through a thorough audit process, analyzing our legacy design library which contained our (quite disheveled) set of product styles and components. We recorded what was missing, found opportunities for improvement, and prioritized which work was most feasible and pertinent within our timeline.
Notable observations from our audit:
- •We were missing standardized grid system and spacing units.
- •We lacked some essential interaction states for a majority of our components.
- •We were using an outdated color system which wasn't aligned with our recently updated branding.
Competitive Analysis
I conducted a competitive analysis of popular design systems which gave us inspiration for how we could improve our system and documentation: Google's Material Design 3, Figma's UI2, Linear's design system, and Stripe's design system.
Impact and Results
Faster design and development turnaround
We were able to streamline the design-to-development process, significantly reducing the turnaround time. This was achieved by establishing a reusable component library and predefined design patterns, which minimized the back-and-forth communication, and allowed designers and developers to focus more on innovative features and problem solving.
Shared source of truth
The new design system served as a unified source of truth, making it easier for both designers and developers to stay aligned on product specifications. By maintaining consistency in styles, components, and design principles, misinterpretations and deviations were significantly reduced.
A higher level of visual polish
The consistent use of typography, colors, spacing, and other design elements across all screens and features elevated the aesthetic and usability of the product.
Faster design and development turnaround
We were able to streamline the design-to-development process, significantly reducing the turnaround time. This was achieved by establishing a reusable component library and predefined design patterns, which minimized the back-and-forth communication, and allowed designers and developers to focus more on innovative features and problem solving.
Shared source of truth
The new design system served as a unified source of truth, making it easier for both designers and developers to stay aligned on product specifications. By maintaining consistency in styles, components, and design principles, misinterpretations and deviations were significantly reduced.
A higher level of visual polish
The consistent use of typography, colors, spacing, and other design elements across all screens and features elevated the aesthetic and usability of the product.
Lessons & Takeaways
Learn fast, fail fast
Working for an early-stage startup taught me how to make the most out of limited time and resources. Since I was trusted with such a large project, and with little prior design systems experience, I had to embrace that I'd have to move quickly and make mistakes. It also showed me I can learn a lot in a short period of time.
Continuous improvement
Design systems are never finished. Although my time with General Task was nearing an end, there were a lot of moving parts within our design system that could've used improvement. We had to ensure that there was routine maintenance of our system and alignment with the team to keep everything up-to-date.
Thinking long-term can save you time in the short-term
Our investment into making a sustainable and organized system enabled us to iterate faster than we ever had before. This gave us more space to try new, creative solutions which we didn't have the bandwidth for before.
Prioritize, prioritize, prioritize
With such limited time it taught me to focus on the most impactful and foundational aspects first, allowing us to move faster through the rest of the project.
Learn fast, fail fast
Working for an early-stage startup taught me how to make the most out of limited time and resources. Since I was trusted with such a large project, and with little prior design systems experience, I had to embrace that I'd have to move quickly and make mistakes. It also showed me I can learn a lot in a short period of time.
Continuous improvement
Design systems are never finished. Although my time with General Task was nearing an end, there were a lot of moving parts within our design system that could've used improvement. We had to ensure that there was routine maintenance of our system and alignment with the team to keep everything up-to-date.
Thinking long-term can save you time in the short-term
Our investment into making a sustainable and organized system enabled us to iterate faster than we ever had before. This gave us more space to try new, creative solutions which we didn't have the bandwidth for before.
Prioritize, prioritize, prioritize
With such limited time it taught me to focus on the most impactful and foundational aspects first, allowing us to move faster through the rest of the project.