Work Project
Work Project
Work Project
MAMPU UI Kit
MAMPU UI Kit
MAMPU UI Kit
Building an initial building blocks of new digital community bank transformation product.
Building an initial building blocks of new digital community bank transformation product.
Building an initial building blocks of new digital community bank transformation product.
My Role
My Role
Product Designer
Product Designer
Product Designer
For
For
MAMPU
MAMPU
MAMPU
Timeline
Timeline
December 2022 - May 2023
December 2022 - May 2023
December 2022 - May 2023
Tools
Tools
Figma, Spreadsheet, Notion
Figma, Spreadsheet, Notion
Figma, Spreadsheet, Notion
Team
Team
Product Designer with guidance from Senior Product Designer, 1 Project Manager, and 1 Developer
Product Designer with guidance from Senior Product Designer, 1 Project Manager, and 1 Developer
Product Designer with guidance from Senior Product Designer, 1 Project Manager, and 1 Developer
Background
Background
Initially, this project was intended for a product called Koperasi Maju which was later shifted to a new banking product called MAMPU. I will explain the process from the beginning.
Koperasi Maju, a rural "Koperasi" product from KlikCair, is experiencing rapid growth. To accelerate the design process for upcoming features and improvements, the team is developing master UI templates that address current challenges and adapt to various use cases.
As a Product Design Intern, I was tasked with cleaning up the design and creating a UI Kit Library to streamline the design process.
Initially, this project was intended for a product called Koperasi Maju which was later shifted to a new banking product called MAMPU. I will explain the process from the beginning.
Koperasi Maju, a rural "Koperasi" product from KlikCair, is experiencing rapid growth. To accelerate the design process for upcoming features and improvements, the team is developing master UI templates that address current challenges and adapt to various use cases.
As a Product Design Intern, I was tasked with cleaning up the design and creating a UI Kit Library to streamline the design process.
Initially, this project was intended for a product called Koperasi Maju which was later shifted to a new banking product called MAMPU. I will explain the process from the beginning.
Koperasi Maju, a rural "Koperasi" product from KlikCair, is experiencing rapid growth. To accelerate the design process for upcoming features and improvements, the team is developing master UI templates that address current challenges and adapt to various use cases.
As a Product Design Intern, I was tasked with cleaning up the design and creating a UI Kit Library to streamline the design process.
💡 What is Koperasi?
Koperasi is a business organization that is owned and operated by a group of individuals for their mutual benefit.
💡 What is Koperasi?
Koperasi is a business organization that is owned and operated by a group of individuals for their mutual benefit.
💡 What is Koperasi?
Koperasi is a business organization that is owned and operated by a group of individuals for their mutual benefit.
Why UI Kit?
Why UI Kit?
I discussed the current state of the design process, including its challenges and potential areas for improvement, with my Senior Product Designer and Product Manager. Additionally, they provided me with the current design files for the Koperasi Maju project.
I discussed the current state of the design process, including its challenges and potential areas for improvement, with my Senior Product Designer and Product Manager. Additionally, they provided me with the current design files for the Koperasi Maju project.
I discussed the current state of the design process, including its challenges and potential areas for improvement, with my Senior Product Designer and Product Manager. Additionally, they provided me with the current design files for the Koperasi Maju project.
Current design presentation
Current design presentation
The Current Challenges
The Current Challenges
1
1
Design Inconsistencies
At glance, it looks messy and inconsistent. I took initiative to look further later through Design Audit.
At glance, it looks messy and inconsistent. I took initiative to look further later through Design Audit.
2
2
Takes a lot of time when designing new feature request
The lack of a component-based library meant creating UI designs was time-consuming for Product Designers. They had to analyze each new design and manually copy essential elements from existing designs, if necessary.
The lack of a component-based library meant creating UI designs was time-consuming for Product Designers. They had to analyze each new design and manually copy essential elements from existing designs, if necessary.
3
3
Have specific use case about designing another brand of “Koperasi” with UI Kit but in different style.
Both my seniors envision the "Koperasi" product as a Software as a Service (SaaS) offering. They emphasize the need for a UI Kit that facilitates easy bulk editing.
Both my seniors envision the "Koperasi" product as a Software as a Service (SaaS) offering. They emphasize the need for a UI Kit that facilitates easy bulk editing.
The Scope
The Scope
While the project was initially called "Koperasi Maju Design System," my further research indicated that it doesn't possess the complexity or code implementation to be truly categorized as such. However, we envision the current UI Kit serving as a foundation for a future Design System.
The UI Kit will deliver a set of design elements and components for consistent mobile UI across upcoming Koperasi Maju features.
While illustrations have been excluded for now due to the future involvement of an illustrator, it's important to emphasize their vital role in enhancing visual appeal and user understanding.
While the project was initially called "Koperasi Maju Design System," my further research indicated that it doesn't possess the complexity or code implementation to be truly categorized as such. However, we envision the current UI Kit serving as a foundation for a future Design System.
The UI Kit will deliver a set of design elements and components for consistent mobile UI across upcoming Koperasi Maju features.
While illustrations have been excluded for now due to the future involvement of an illustrator, it's important to emphasize their vital role in enhancing visual appeal and user understanding.
While the project was initially called "Koperasi Maju Design System," my further research indicated that it doesn't possess the complexity or code implementation to be truly categorized as such. However, we envision the current UI Kit serving as a foundation for a future Design System.
The UI Kit will deliver a set of design elements and components for consistent mobile UI across upcoming Koperasi Maju features.
While illustrations have been excluded for now due to the future involvement of an illustrator, it's important to emphasize their vital role in enhancing visual appeal and user understanding.
Research
Research
Benchmark
Benchmark
Since this is my first time designing a UI Kit, I looked for examples on how big companies build their own Design System, specifically their UI Kit Elements. There are
IBM Carbon Design System
Shopify Polaris
Material Design
Since this is my first time designing a UI Kit, I looked for examples on how big companies build their own Design System, specifically their UI Kit Elements. There are
IBM Carbon Design System
Shopify Polaris
Material Design
Since this is my first time designing a UI Kit, I looked for examples on how big companies build their own Design System, specifically their UI Kit Elements. There are
IBM Carbon Design System
Shopify Polaris
Material Design
Benchmark Products
Benchmark Products
Design Audit
Design Audit
Audit Process
Audit Process
Design Audit is a systematic examination and evaluation of the user interface elements and design aspects. The primary goal is to assess the current design in the aspect of Consistency, Usability, and Accessibility Issue.
We grouped similar elements on the current design, screenshot, and analyze them in a Spreadsheet. We also tried to add some fix recommendation to provide possible solution for each elements.
Design Audit is a systematic examination and evaluation of the user interface elements and design aspects. The primary goal is to assess the current design in the aspect of Consistency, Usability, and Accessibility Issue.
We grouped similar elements on the current design, screenshot, and analyze them in a Spreadsheet. We also tried to add some fix recommendation to provide possible solution for each elements.
Design Audit is a systematic examination and evaluation of the user interface elements and design aspects. The primary goal is to assess the current design in the aspect of Consistency, Usability, and Accessibility Issue.
We grouped similar elements on the current design, screenshot, and analyze them in a Spreadsheet. We also tried to add some fix recommendation to provide possible solution for each elements.
The UI Design Audit
The UI Design Audit
Insights
Insights
Key Insights
Key Insights
The design is lack on variants in terms of size, states, and types.
The design has multiple and inconsistent typeface type, size, and spacing
Bad component naming conventions, some of them still using default name like ”Component x”, “Frame x”, etc.
Some essential elements like Avatar, Loading, Logo, and Divider need to be added to the UI library.
The design is lack on variants in terms of size, states, and types.
The design has multiple and inconsistent typeface type, size, and spacing
Bad component naming conventions, some of them still using default name like ”Component x”, “Frame x”, etc.
Some essential elements like Avatar, Loading, Logo, and Divider need to be added to the UI library.
About the Accessibility
About the Accessibility
The essential things that we look up about accessibility in this project is color contrast and touch size. Therefore, we focused on those two while doing the audit.
Some components has bad accessibility in terms of touch size, we followed Apple’s Human Interface Guidelines for touch target, which is 44px width and 44px height.
Some components has bad contrast, we followed WCAG 2.0 using Contrast Plugin to assess the color contrast problem
The essential things that we look up about accessibility in this project is color contrast and touch size. Therefore, we focused on those two while doing the audit.
Some components has bad accessibility in terms of touch size, we followed Apple’s Human Interface Guidelines for touch target, which is 44px width and 44px height.
Some components has bad contrast, we followed WCAG 2.0 using Contrast Plugin to assess the color contrast problem
Shifting to MAMPU
Shifting to MAMPU
Midway through the UI Kit design process, a change occurred with KlikCair's introduction of MAMPU, a digital community bank transformation product. Essentially, MAMPU will adopt and modernize the existing features and functionalities of Koperasi Maju, prompting our shift to designing a UI Kit specifically for it.
The project shifting presented an opportunity to craft a distinct design style for MAMPU, minimizing reliance on Koperasi Maju's aesthetics while leveraging insights from past research to establish a neater, more consistent aesthetic.
This UI Kit will serve as the foundation for MAMPU, providing the essential elements to build their initial sub-products and offering the flexibility to refine and improve it over time.
Midway through the UI Kit design process, a change occurred with KlikCair's introduction of MAMPU, a digital community bank transformation product. Essentially, MAMPU will adopt and modernize the existing features and functionalities of Koperasi Maju, prompting our shift to designing a UI Kit specifically for it.
The project shifting presented an opportunity to craft a distinct design style for MAMPU, minimizing reliance on Koperasi Maju's aesthetics while leveraging insights from past research to establish a neater, more consistent aesthetic.
This UI Kit will serve as the foundation for MAMPU, providing the essential elements to build their initial sub-products and offering the flexibility to refine and improve it over time.
Application
Application
Building Styles
Building Styles
We established the fundamental styles of the UI Kit.
We established the fundamental styles of the UI Kit.
We established the fundamental styles of the UI Kit.
Text Style
Text Style
The text styles are divided into two main categories: Heading and Body Text. Our explorations revealed that only 3 Heading Styles are sufficient to meet our needs. Each Heading style has three weight options: Regular, Medium, and Bold.
Body text styles differ slightly from headings, employing a distinct naming convention to facilitate frequent use. Clear and descriptive names ensure consistent application and mitigate confusion. Additionally, we introduced extra variations for body and subtitle styles, providing greater flexibility for diverse use cases.
The text styles are divided into two main categories: Heading and Body Text. Our explorations revealed that only 3 Heading Styles are sufficient to meet our needs. Each Heading style has three weight options: Regular, Medium, and Bold.
Body text styles differ slightly from headings, employing a distinct naming convention to facilitate frequent use. Clear and descriptive names ensure consistent application and mitigate confusion. Additionally, we introduced extra variations for body and subtitle styles, providing greater flexibility for diverse use cases.
The text styles are divided into two main categories: Heading and Body Text. Our explorations revealed that only 3 Heading Styles are sufficient to meet our needs. Each Heading style has three weight options: Regular, Medium, and Bold.
Body text styles differ slightly from headings, employing a distinct naming convention to facilitate frequent use. Clear and descriptive names ensure consistent application and mitigate confusion. Additionally, we introduced extra variations for body and subtitle styles, providing greater flexibility for diverse use cases.
The predefined Text Styles
The predefined Text Styles
Color Style
Color Style
We organized our color palette into four distinct groups. Neutral Colors, derived from our base Black and White shades, serve as the foundation for surfaces, backgrounds, and texts. Brand Colors include the primary Brand color, supported by Secondary and Tertiary colors for additional emphasis. Semantic Colors represent standard value states and Decorative Colors provide accents that complement the overall brand palette.
We organized our color palette into four distinct groups. Neutral Colors, derived from our base Black and White shades, serve as the foundation for surfaces, backgrounds, and texts. Brand Colors include the primary Brand color, supported by Secondary and Tertiary colors for additional emphasis. Semantic Colors represent standard value states and Decorative Colors provide accents that complement the overall brand palette.
We organized our color palette into four distinct groups. Neutral Colors, derived from our base Black and White shades, serve as the foundation for surfaces, backgrounds, and texts. Brand Colors include the primary Brand color, supported by Secondary and Tertiary colors for additional emphasis. Semantic Colors represent standard value states and Decorative Colors provide accents that complement the overall brand palette.
Various Color Styles of the UI Kit
Various Color Styles of the UI Kit
Each color has state variants, and we meticulously tested them to ensure sufficient color contrast for accessibility. This involved numerous tweaks and experiments to achieve optimal contrast levels.
Each color has state variants, and we meticulously tested them to ensure sufficient color contrast for accessibility. This involved numerous tweaks and experiments to achieve optimal contrast levels.
Each color has state variants, and we meticulously tested them to ensure sufficient color contrast for accessibility. This involved numerous tweaks and experiments to achieve optimal contrast levels.
Color Contrast Check for Accessibility
Color Contrast Check for Accessibility
Shadow Style
Shadow Style
We implemented two types of shadow styles, Neutral and Primary, to allow for greater flexibility. This decision arose from the need to create elements with varying levels of prominence, which can be effectively achieved through strategic shadow utilization. Consequently, providing both Neutral and Primary styles with several spread size options caters to this diverse need.
We implemented two types of shadow styles, Neutral and Primary, to allow for greater flexibility. This decision arose from the need to create elements with varying levels of prominence, which can be effectively achieved through strategic shadow utilization. Consequently, providing both Neutral and Primary styles with several spread size options caters to this diverse need.
We implemented two types of shadow styles, Neutral and Primary, to allow for greater flexibility. This decision arose from the need to create elements with varying levels of prominence, which can be effectively achieved through strategic shadow utilization. Consequently, providing both Neutral and Primary styles with several spread size options caters to this diverse need.
Two types of Shadow Styles
Two types of Shadow Styles
Grid & Spacing Style
Grid & Spacing Style
Grid and spacing styles ensure consistent whitespace across the design. We identified multiples of 4 and 4 columns as the optimal grid structure for this mobile UI kit.
We utilized this approach due to the lack of Figma features at the time for creating reusable styles like text, colors, and shadows.
Grid and spacing styles ensure consistent whitespace across the design. We identified multiples of 4 and 4 columns as the optimal grid structure for this mobile UI kit.
We utilized this approach due to the lack of Figma features at the time for creating reusable styles like text, colors, and shadows.
Grid and spacing styles ensure consistent whitespace across the design. We identified multiples of 4 and 4 columns as the optimal grid structure for this mobile UI kit.
We utilized this approach due to the lack of Figma features at the time for creating reusable styles like text, colors, and shadows.
Grid & Spacing Guidelines
Grid & Spacing Guidelines
Components
Components
Helper & Component
Helper & Component
We built the UI Kit using the Atomic Design approach, breaking down core components into reusable helpers. These helpers are also built as Figma components with their own properties, but we set them to hidden to prevent them from being published when the UI Kit is applied to a project.
Leveraging nested instances in Figma, we can assemble the helpers into a fully functional component. This approach also allows adding new properties to the component, granting significant flexibility for future UI design applications.
We built the UI Kit using the Atomic Design approach, breaking down core components into reusable helpers. These helpers are also built as Figma components with their own properties, but we set them to hidden to prevent them from being published when the UI Kit is applied to a project.
Leveraging nested instances in Figma, we can assemble the helpers into a fully functional component. This approach also allows adding new properties to the component, granting significant flexibility for future UI design applications.
We built the UI Kit using the Atomic Design approach, breaking down core components into reusable helpers. These helpers are also built as Figma components with their own properties, but we set them to hidden to prevent them from being published when the UI Kit is applied to a project.
Leveraging nested instances in Figma, we can assemble the helpers into a fully functional component. This approach also allows adding new properties to the component, granting significant flexibility for future UI design applications.
Combining some Helpers into a fully functioning Component
Combining some Helpers into a fully functioning Component
This approach excels at maintaining consistency. Some helpers are used in multiple components, so updating any single helper automatically applies the changes to all components utilizing it.
This approach excels at maintaining consistency. Some helpers are used in multiple components, so updating any single helper automatically applies the changes to all components utilizing it.
This approach excels at maintaining consistency. Some helpers are used in multiple components, so updating any single helper automatically applies the changes to all components utilizing it.
Assembling helpers into fully functioning Multi Stepper Indicator component
Assembling helpers into fully functioning Multi Stepper Indicator component
SLOT Approach
SLOT Approach
For components with highly customizable content, such as List Items, Card Items, and Accordions, we designed only the wrapper elements. Detaching content sections for individual customization would compromise overall design consistency.
For components with highly customizable content, such as List Items, Card Items, and Accordions, we designed only the wrapper elements. Detaching content sections for individual customization would compromise overall design consistency.
For components with highly customizable content, such as List Items, Card Items, and Accordions, we designed only the wrapper elements. Detaching content sections for individual customization would compromise overall design consistency.
How the Swap Intance SLOT Works
How the Swap Intance SLOT Works
A SLOT component is a component that has an empty layer attached to the List Item as a child component. This allows us to replace the slot component with a customized individual component that will serve as the content for the item.
A SLOT component is a component that has an empty layer attached to the List Item as a child component. This allows us to replace the slot component with a customized individual component that will serve as the content for the item.
A SLOT component is a component that has an empty layer attached to the List Item as a child component. This allows us to replace the slot component with a customized individual component that will serve as the content for the item.
Changing Card component's content by swapping instance the SLOT
Changing Card component's content by swapping instance the SLOT
Naming Conventions for Properties
Naming Conventions for Properties
Component naming conventions serve as properties, typically including Color, Type, State, Status, and Size, with values adapted to specific component needs and property usage. Text properties allow for text value insertion, while Boolean properties enable hiding or showing icons and choosing desired ones.
Component naming conventions serve as properties, typically including Color, Type, State, Status, and Size, with values adapted to specific component needs and property usage. Text properties allow for text value insertion, while Boolean properties enable hiding or showing icons and choosing desired ones.
Component naming conventions serve as properties, typically including Color, Type, State, Status, and Size, with values adapted to specific component needs and property usage. Text properties allow for text value insertion, while Boolean properties enable hiding or showing icons and choosing desired ones.
Several Naming Convention Property Names and Values
Several Naming Convention Property Names and Values
File Distribution
File Distribution
The main UI Kit file consists of all the reusable components. This file is published so that it can be activated and used in feature files such as Loan, Biller, and other upcoming features.
The main UI Kit file consists of all the reusable components. This file is published so that it can be activated and used in feature files such as Loan, Biller, and other upcoming features.
The main UI Kit file consists of all the reusable components. This file is published so that it can be activated and used in feature files such as Loan, Biller, and other upcoming features.
How the UI Kit File distributed to MAMPU's sub products or features
How the UI Kit File distributed to MAMPU's sub products or features
Implementation
Implementation
Adding UI Library
Adding UI Library
While implementing the UI Kit, we found some sets of components that is oftenly use. We will have difficulty finding this element when working on a feature in a new file, while the element is in another file. This can also cause design inconsistencies if one day the element needs to be updated, as well as an increase in the Figma file size too.
Therefore, we collect the reusable elements, then create a new section in the UI Kit called UI Library which will contain sets of components that formed into a functional elements, such as Filter, Alert, Option, etc.
While implementing the UI Kit, we found some sets of components that is oftenly use. We will have difficulty finding this element when working on a feature in a new file, while the element is in another file. This can also cause design inconsistencies if one day the element needs to be updated, as well as an increase in the Figma file size too.
Therefore, we collect the reusable elements, then create a new section in the UI Kit called UI Library which will contain sets of components that formed into a functional elements, such as Filter, Alert, Option, etc.
While implementing the UI Kit, we found some sets of components that is oftenly use. We will have difficulty finding this element when working on a feature in a new file, while the element is in another file. This can also cause design inconsistencies if one day the element needs to be updated, as well as an increase in the Figma file size too.
Therefore, we collect the reusable elements, then create a new section in the UI Kit called UI Library which will contain sets of components that formed into a functional elements, such as Filter, Alert, Option, etc.
Example of Filter UI Library Component
Example of Filter UI Library Component
Customizeable UI Kit
Customizeable UI Kit
Since the brand position of MAMPU is to transform community bank to be digital, there will be a possibility of each community banks to have their own branding. Therefore, we need to make the UI Kit to be as customizable as possible.
To resolve this case, we utilize Similayer and Styler plugin to make the change quicker
Since the brand position of MAMPU is to transform community bank to be digital, there will be a possibility of each community banks to have their own branding. Therefore, we need to make the UI Kit to be as customizable as possible.
To resolve this case, we utilize Similayer and Styler plugin to make the change quicker
Since the brand position of MAMPU is to transform community bank to be digital, there will be a possibility of each community banks to have their own branding. Therefore, we need to make the UI Kit to be as customizable as possible.
To resolve this case, we utilize Similayer and Styler plugin to make the change quicker
Similayer
The key of using Similayer is the naming convention. Fortunately, we think through this so it’s easier for us to use this plugin
The key of using Similayer is the naming convention. Fortunately, we think through this so it’s easier for us to use this plugin
The key of using Similayer is the naming convention. Fortunately, we think through this so it’s easier for us to use this plugin
Example on how to Use Similayer for editing Corner Radius of all elements in the UI Kit
Example on how to Use Similayer for editing Corner Radius of all elements in the UI Kit
Styler
Conversely, Styler allows efficient bulk editing of text and color styles already defined within Figma. This significantly accelerates the change process, particularly when all UI Kit text elements utilize pre-defined styles.
Conversely, Styler allows efficient bulk editing of text and color styles already defined within Figma. This significantly accelerates the change process, particularly when all UI Kit text elements utilize pre-defined styles.
Conversely, Styler allows efficient bulk editing of text and color styles already defined within Figma. This significantly accelerates the change process, particularly when all UI Kit text elements utilize pre-defined styles.
Example of how to bulk edit Text Styles for the UI Kit
Example of how to bulk edit Text Styles for the UI Kit
Before After Comparison
Before After Comparison
This showcases a comparison of two screens before the UI Kit was applied. We also revamped the design to reflect MAMPU's new brand identity.
This showcases a comparison of two screens before the UI Kit was applied. We also revamped the design to reflect MAMPU's new brand identity.
This showcases a comparison of two screens before the UI Kit was applied. We also revamped the design to reflect MAMPU's new brand identity.
Homepage
Homepage
Mutation Page
Mutation Page
Key Takeaways
Key Takeaways
We are aware that the journey of MAMPU is just beginning, and the changes we have made so far have only affected a few individuals in the design and development teams. However, we are optimistic about the potential to scale these improvements into a comprehensive Design System that involves a cross-functional team. By collaborating with experts from various disciplines, we can ensure that the Design System is robust, adaptable, and aligned with the goals and needs of the entire organization. This collaborative approach will enable us to create a unified design language, streamline the development process, and promote consistency across all MAMPU products and features.
We are aware that the journey of MAMPU is just beginning, and the changes we have made so far have only affected a few individuals in the design and development teams. However, we are optimistic about the potential to scale these improvements into a comprehensive Design System that involves a cross-functional team. By collaborating with experts from various disciplines, we can ensure that the Design System is robust, adaptable, and aligned with the goals and needs of the entire organization. This collaborative approach will enable us to create a unified design language, streamline the development process, and promote consistency across all MAMPU products and features.
We are aware that the journey of MAMPU is just beginning, and the changes we have made so far have only affected a few individuals in the design and development teams. However, we are optimistic about the potential to scale these improvements into a comprehensive Design System that involves a cross-functional team. By collaborating with experts from various disciplines, we can ensure that the Design System is robust, adaptable, and aligned with the goals and needs of the entire organization. This collaborative approach will enable us to create a unified design language, streamline the development process, and promote consistency across all MAMPU products and features.
1
The change from “Koperasi Maju” to “MAMPU”
Throughout the course of working on this project, I gained extensive knowledge and experience in effectively managing and adapting to changes in design requirements. This included learning various strategies and techniques to handle unexpected shifts in project scope Additionally, I developed a deeper understanding of the importance of clear communication and collaboration with my seniors.
1
The change from “Koperasi Maju” to “MAMPU”
Throughout the course of working on this project, I gained extensive knowledge and experience in effectively managing and adapting to changes in design requirements. This included learning various strategies and techniques to handle unexpected shifts in project scope Additionally, I developed a deeper understanding of the importance of clear communication and collaboration with my seniors.
1
The change from “Koperasi Maju” to “MAMPU”
Throughout the course of working on this project, I gained extensive knowledge and experience in effectively managing and adapting to changes in design requirements. This included learning various strategies and techniques to handle unexpected shifts in project scope Additionally, I developed a deeper understanding of the importance of clear communication and collaboration with my seniors.
2
The never ending iteration of component fixing and updating even after all component is designed
At first, I thought that building a UI Kit would limit us to using only predefined components. However, as I progressed, I realized that it shouldn't hinder our creativity in design. That's why I made some tweaks and improvements to the predefined components along the way. This was done to ensure consistency, seamless integration, and aesthetic appeal.
2
The never ending iteration of component fixing and updating even after all component is designed
At first, I thought that building a UI Kit would limit us to using only predefined components. However, as I progressed, I realized that it shouldn't hinder our creativity in design. That's why I made some tweaks and improvements to the predefined components along the way. This was done to ensure consistency, seamless integration, and aesthetic appeal.
2
The never ending iteration of component fixing and updating even after all component is designed
At first, I thought that building a UI Kit would limit us to using only predefined components. However, as I progressed, I realized that it shouldn't hinder our creativity in design. That's why I made some tweaks and improvements to the predefined components along the way. This was done to ensure consistency, seamless integration, and aesthetic appeal.