Revamp Tuntun design system
Revamp Tuntun design system
Revamp Tuntun design system
Product
Product
Product
Finance Technology
Finance Technology
Finance Technology
Release Date
1 August 2024
Release Date
1 August 2024
Release Date
1 August 2024
Role
Senior Product Designer
Role
Senior Product Designer
Role
Senior Product Designer
Background
Background
Background
TDS is a Tuntun design system for products and digital experiences to build consistency across user experiences. TDS was created to solve the problem of inconsistent design elements, which were causing confusion for users and slowed down design also development progress. TDS consists of token libraries that have foundational elements, such as colors, typography, gradients, shadows, and spacing, radius, height These elements work together to build components, starting from atoms and building up to molecules, which are then used to create the screens, designs, and flows that we see in user interfaces. In our Design System we have Foundations, Components, Assets & Illustrations.
TDS is a Tuntun design system for products and digital experiences to build consistency across user experiences. TDS was created to solve the problem of inconsistent design elements, which were causing confusion for users and slowed down design also development progress. TDS consists of token libraries that have foundational elements, such as colors, typography, gradients, shadows, and spacing, radius, height These elements work together to build components, starting from atoms and building up to molecules, which are then used to create the screens, designs, and flows that we see in user interfaces. In our Design System we have Foundations, Components, Assets & Illustrations.
Objective
Objective
Objective
The objective we revamp the design sytem is because the old design system is too outdated for the design, not scalable, and also have incosistent colors which have so many colors that affect the overall UI looks, Therefore we will use the new TDS and change the all of the looks in the app to make the UI more consistent across every flow and make it more simple, and we ensure that in this new TDS engineer can easily use it to craft the component and designer can easily custom and use the properties that align with every use cases when the team want to design.
The objective we revamp the design sytem is because the old design system is too outdated for the design, not scalable, and also have incosistent colors which have so many colors that affect the overall UI looks, Therefore we will use the new TDS and change the all of the looks in the app to make the UI more consistent across every flow and make it more simple, and we ensure that in this new TDS engineer can easily use it to craft the component and designer can easily custom and use the properties that align with every use cases when the team want to design.
Identify Problem
Identify Problem
Identify Problem
When I joined Tuntun as the only designer on deck, I suddenly had huge responsibilities placed on my shoulders. I was responsible to revamp the design system for the team. Seeing the lack of parity between the designs and the actual code, it was high time for a concrete design system.
When I joined Tuntun as the only designer on deck, I suddenly had huge responsibilities placed on my shoulders. I was responsible to revamp the design system for the team. Seeing the lack of parity between the designs and the actual code, it was high time for a concrete design system.
When I joined Tuntun as the only designer on deck, I suddenly had huge responsibilities placed on my shoulders. I was responsible to revamp the design system for the team. Seeing the lack of parity between the designs and the actual code, it was high time for a concrete design system.
Foundation
Foundation
Foundation
Foundation is core elements of all visual and interactive design decisions. In TDS, we have several foundation elements such as color, typography, spacing, layout, sizing, shadow and corner radius. These foundation’s elements are integrated with engineering through design tokens.
Foundation is core elements of all visual and interactive design decisions. In TDS, we have several foundation elements such as color, typography, spacing, layout, sizing, shadow and corner radius. These foundation’s elements are integrated with engineering through design tokens.
Foundation is core elements of all visual and interactive design decisions. In TDS, we have several foundation elements such as color, typography, spacing, layout, sizing, shadow and corner radius. These foundation’s elements are integrated with engineering through design tokens.
Colors
Foundation is core elements of all visual and interactive design decisions. In TDS, we have several foundation elements such as color, typography, spacing, layout, sizing, shadow and corner radius. These foundation’s elements are integrated with engineering through design tokens.
Foundation is core elements of all visual and interactive design decisions. In TDS, we have several foundation elements such as color, typography, spacing, layout, sizing, shadow and corner radius. These foundation’s elements are integrated with engineering through design tokens.
Foundation is core elements of all visual and interactive design decisions. In TDS, we have several foundation elements such as color, typography, spacing, layout, sizing, shadow and corner radius. These foundation’s elements are integrated with engineering through design tokens.
Typography
Typography organizes text placement and hierarchy levels when appearing on interfaces. By utilizing typography styles according to their characteristics, we can deliver well-structured content that comforts the readers’ eyes.
Typography organizes text placement and hierarchy levels when appearing on interfaces. By utilizing typography styles according to their characteristics, we can deliver well-structured content that comforts the readers’ eyes.
Typography organizes text placement and hierarchy levels when appearing on interfaces. By utilizing typography styles according to their characteristics, we can deliver well-structured content that comforts the readers’ eyes.
Spacing
Spacing is the system of setting distances between elements. Spacing balances the objects within layouts, making them more visually structured and focused. In Syllabus, we have defined a set of spacing values that can be applied to various components and layouts, making it easier to maintain a consistent and cohesive design system.
Spacing is the system of setting distances between elements. Spacing balances the objects within layouts, making them more visually structured and focused. In Syllabus, we have defined a set of spacing values that can be applied to various components and layouts, making it easier to maintain a consistent and cohesive design system.
Spacing is the system of setting distances between elements. Spacing balances the objects within layouts, making them more visually structured and focused. In Syllabus, we have defined a set of spacing values that can be applied to various components and layouts, making it easier to maintain a consistent and cohesive design system.
Drop Shadow
Drop Shadow uses shadows and blurs for a layered effect that gives users a visual cue that an object or experience is “elevated” in priority or hierarchy.
Drop Shadow uses shadows and blurs for a layered effect that gives users a visual cue that an object or experience is “elevated” in priority or hierarchy.
Drop Shadow uses shadows and blurs for a layered effect that gives users a visual cue that an object or experience is “elevated” in priority or hierarchy.
Corner Radius
This system helps us specify unique shapes for visual elements and gives the design a more friendly, modern touch. We use the corner radius system for most UI elements — from buttons to tabs, from snack bars to pop-ups.
This system helps us specify unique shapes for visual elements and gives the design a more friendly, modern touch. We use the corner radius system for most UI elements — from buttons to tabs, from snack bars to pop-ups.
This system helps us specify unique shapes for visual elements and gives the design a more friendly, modern touch. We use the corner radius system for most UI elements — from buttons to tabs, from snack bars to pop-ups.
Components
Implementing Brad Frost's Atomic Design, TDS components act like building blocks that are specifically created to build familiar and consistent patterns in user interface. Each component is designed with accessibility in mind and can accommodate a variety of UI requirements, state changes, and variants. Since we have various products, this approach allows us to create a more efficient and scalable design system, making it easier to maintain consistency across different products and platforms.
Implementing Brad Frost's Atomic Design, TDS components act like building blocks that are specifically created to build familiar and consistent patterns in user interface. Each component is designed with accessibility in mind and can accommodate a variety of UI requirements, state changes, and variants. Since we have various products, this approach allows us to create a more efficient and scalable design system, making it easier to maintain consistency across different products and platforms.
Implementing Brad Frost's Atomic Design, TDS components act like building blocks that are specifically created to build familiar and consistent patterns in user interface. Each component is designed with accessibility in mind and can accommodate a variety of UI requirements, state changes, and variants. Since we have various products, this approach allows us to create a more efficient and scalable design system, making it easier to maintain consistency across different products and platforms.
🎉 After We Revamp TDS
🎉 After We Revamp TDS
🎉 After We Revamp TDS
Learning from previous data, insights, and usability inspections, I decided to redesign the page by providing better insights and actionable results after users complete their assignment test. I will also add motivation and engaging copy to encourage them to continue and improve their learning based on their understanding.
Learning from previous data, insights, and usability inspections, I decided to redesign the page by providing better insights and actionable results after users complete their assignment test. I will also add motivation and engaging copy to encourage them to continue and improve their learning based on their understanding.
Learning from previous data, insights, and usability inspections, I decided to redesign the page by providing better insights and actionable results after users complete their assignment test. I will also add motivation and engaging copy to encourage them to continue and improve their learning based on their understanding.
📈 The Results & Key Takeaways
📈 The Results & Key Takeaways
📈 The Results & Key Takeaways
Revamping the design system was a transformative process that streamlined UI consistency, improved collaboration, and enhanced the overall product experience. By restructuring components, refining color guidelines, and enforcing a systematic approach, the team achieved:
A Unified & Scalable Design System – Reduced inconsistencies by establishing a structured system that designers and developers could confidently rely on.
Simplified & Harmonized UI – Applied the 60-30-10 color rule to create a visually cohesive experience, making the interface easier to digest.
Stronger Cross-Team Collaboration – We worked closely with developers to ensure seamless implementation, reducing design handoff friction and improving build accuracy.
Improved Efficiency & Adoption – Provided clear documentation and Figma resources, enabling the team to work faster while maintaining design integrity
Revamping the design system was a transformative process that streamlined UI consistency, improved collaboration, and enhanced the overall product experience. By restructuring components, refining color guidelines, and enforcing a systematic approach, the team achieved:
A Unified & Scalable Design System – Reduced inconsistencies by establishing a structured system that designers and developers could confidently rely on.
Simplified & Harmonized UI – Applied the 60-30-10 color rule to create a visually cohesive experience, making the interface easier to digest.
Stronger Cross-Team Collaboration – We worked closely with developers to ensure seamless implementation, reducing design handoff friction and improving build accuracy.
Improved Efficiency & Adoption – Provided clear documentation and Figma resources, enabling the team to work faster while maintaining design integrity
Revamping the design system was a transformative process that streamlined UI consistency, improved collaboration, and enhanced the overall product experience. By restructuring components, refining color guidelines, and enforcing a systematic approach, the team achieved:
A Unified & Scalable Design System – Reduced inconsistencies by establishing a structured system that designers and developers could confidently rely on.
Simplified & Harmonized UI – Applied the 60-30-10 color rule to create a visually cohesive experience, making the interface easier to digest.
Stronger Cross-Team Collaboration – We worked closely with developers to ensure seamless implementation, reducing design handoff friction and improving build accuracy.
Improved Efficiency & Adoption – Provided clear documentation and Figma resources, enabling the team to work faster while maintaining design integrity