This design system aims to enhance user experience and the overall quality of the product at various levels.
What is Taskpin?
Tools
Figma, FigJam
Role
Design System Manager
Timeframe
1 month
Study Overview
Why Taskpin Design System?
From a certain stage, any app catering to users on multiple platforms requires a design system, and Taskpin is no different. The Taskpin Design System, which originated from its UI Kit, seeks to improve the user experience and elevate the overall quality of the product at multiple levels.
Improve UX
Improve the overall user experience across different platforms.
Enhance Quality
Elevate the overall quality of the product at multiple levels.
Problem Statement
When I joined Taskpin, the product lacked a unified design that offers a seamless experience across different platforms. I have endeavored to plan, design, implement, and refine this design system so far.
No Unified Standards
Many elements in the product weren’t in component mode and lacked a unified standard. They were duplicated and altered as needed. I created components for each element, standardizing spacing, color, and fonts, which took considerable time.
Redundancy
In the above image, there are many similar elements that have not been defined as components and are merely replicated. Therefore, any changes made to one will not propagate to the other elements.
1
Different Button Height
2
Different Button Text Size
3
Different Border Radius
Study Goals
In this case study, my goal was to establish a foundation for developing a design system for Taskpin to enhance consistency, improve visual hierarchy, and reduce redundancy.
Solution Impact
Since I redesigned the entire process, we initially experienced a significant improvement.
Developers' Insights
The components aren’t structured the same way, so I can’t easily reuse them from other projects, which slows things down
Loghman, iOS Developer
it’s tricky to make the UI consistent across the app, and we end up interpreting things differently
Jalil, Android Developer
Our components for things like errors, warnings, and confirmations don’t have a clear theme, so it’s hard to keep the design consistent
Zahra, Web Developer
My Role
I was part of a cross-functional team that held daily and weekly meetings to stay aligned. My responsibilities ranged from research and defining requirements to UI design and documentation.
Study Approach
Benchmarking
I conducted an in-depth study of guidelines and components from popular design systems to learn from their best practices and determine which would best suit our product.
My Approach
I decided to begin with styles and primitive (Atoms) components, like the examples below, that we used in the product, instead of going through all components and patterns at once. This approach will reduce the time required to define higher-level components (Molecules, Organisms, Templates, and Pages).
Defining the Structure
Main Elements
This diagram shows three main elements of the Taskpin Design System, Foundations, Styles, and Components, that have been developed so far.
Key Criteria
From the start, I ensured that each of our components follows these criteria:
Aesthetics
All components must be designed based on the platform experience to ensure that our users are familiar with them and they need less time to learn how to interact with.
Accessibility
All styles and components must conform to WCAG standards to ensure accessibility across different scenarios.
Single Source
All components must be designed according to the platform experience to ensure users are familiar with them, reducing the time needed to learn how to interact with them.
Styles
Typography
I walk through different fonts and their sizes that I used for each platform.
Colors
In addition, I explained our color palette that contains Primary, Secondary, Neutral, and Feedback colors. All rules regarding accessibility of colors such as color contrast, proper text size on each color, and so on are in this section.
Icons
Single Mode
Dual Mode
Multi Mode
External
FIGMA STYLES
I used Figma styles to organize all text and color elements.
COMPONENTS
Overview
In this section, I plan to describe the components’ anatomy, properties, and other essential details that designers need to understand how to use them and developers need to know how to implement them.
Primitives
Primitives are fundamental elements that other elements are built upon them and are common in different design systems.
Label
Placeholder
Button Text
Nav Bar Item
Components Initial Draft
These are the initial drafts of our components for the web desktop.
End of First Iteration
This is the first iteration of the Taskpin Design System.