This design system aims to enhance user experience and the overall quality of the product at various levels.
What is Taskpin?
Platforms
Web, Android & iOS
Tools
Figma, FigJam, Notion
Role
Design System Manager
Timeframe
1 yr 6 mos
Study Overview
Problem Statement
Taskpin 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.
Study Goals
My goal was to establish a foundation for developing a design system for Taskpin to enhance consistency, improve visual hierarchy, and reduce redundancy.
Enhance Consistency
Improve Visual Hierarchy
Reduce Redundancy
Solution Impact
Since I redesigned the entire process, we experienced a significant improvement.
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.
Before Design System
No Components
Many elements in the product were not in component mode and lacked a unified standard. They were duplicated and altered as needed. Therefore, any changes made to one will not propagate to the other elements.
No Standards
In the image below, two buttons have different specifications.
1
Different Button Height
2
Different Button Text Size
3
Different Border Radius
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
Inefficient Design
A single design has been used for different platforms, while each platform has its own design language that should be considered.
1
2
3
4
5
Transition to Design System
Why Taskpin Design System?
Any app catering to users on multiple platforms requires a design system. The Taskpin Design System aims to achieve the following goals:
Improve User Experience
Improve the overall user experience on different platforms.
Increase Consistency
Ensure a consistent and platform-specific design.
Reduce Development Time
Reduce overall dev. time by using reusable components
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.
Atomic Design
I decided to begin with styles and primitive (Atoms) components instead of going through all components and patterns at once. This approach will reduce the time required to define higher-level components.
Implementation Roadmap
A design system is a product in itself, which requires iterative development. My vision for the Taskpin Design System was to have the following structure:
Design System Implementation
Key Factors
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.
First Iteration
In the first iteration, I was able to deliver the following elements of Taskpin Design System.
Gradual Development
As I began redesigning the product, I created product-specific components separately for Web, iOS, and Android.
Sample Component
This is a sample implementation of a component in which different atoms have been combined to create higher-level elements.
Before & After Designs
Design System in ACtion
The following timeline shows the effect of using a design system for the Task Alert feature. The redesign process for this feature took only 2.5 weeks to deploy.
some Screens
The following screens show the implementation of new designs based on the Taskpin Design System. Why is it different? Because the new frames are designed based on the native characteristics of each platform.
Explore Tasks
Android Design
Before
After
Messaging
iOS Design
Before
After
Report Task
iOS Design
Before
After
Post a Task
Web Design
Before
After
Next Iterations
What Were Next Steps?
Several additional iterations were made to develop the design system.
Styles to Variables
I converted all styles in Figma to variables and introduced primitive tokens.
Nested Components
I revamped all components, ensuring that higher-level components were built from nested components.
Designing Patterns
I created several patterns from frames that were not in component form for reuse.
Additional Properties
I added new properties to components and patterns, enabling more control without detaching them.
Optimizing Components
Unnecessary components are removed or redesigned to make the system more scalable.