What is Taskpin?
This design system aims to enhance user experience and the overall quality of the product at various levels.
Role
Design System Designer
Timeframe
1 year 6 months
Platforms
Web, iOS, and Android
Responsibilities
Component & Pattern Development
System Maintenance
Collaboration with Dev. Team
Tokens Manager
Documentation
Pitching & Presenting
00/prologue
Study Overview
Problem Statement
Lack of Consistency & Design Language
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.
Study Goals
Improve Consistency & Visual Hierarchy & Reduce Dev. Time
My goal was to establish a foundation for developing a design system for Taskpin to enhance consistency, improve visual hierarchy, and reduce redundancy.
Impact
Task Completion Rate Increased
Since I redesigned the entire process, we experienced a significant improvement.
01/Audit
Chaos & Redundancy
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
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
Team's Insights
We spent a lot of time rebuilding the same components for each feature, which slowed us down and made the product feel uneven.
Brian, Product Owner
Without a shared system, I was tweaking buttons and layouts over and over, things looked slightly different each time and devs had to guess the intent.
Mahsa, Designer
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
02/Research
Transition to Design System
a base design system
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 to build on.
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:
03/Design
Creating the Design System in Figma
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.
04/Comparison
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
05/Next Steps
Adding More Features
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.