Refining a Design System for ContentGrow
Refining a Design System for ContentGrow
Refining a Design System for ContentGrow
Wednesday, February 1, 2023
Wednesday, February 1, 2023
Overview
Overview
Overview
ContentGrow is a provider of freelancers for writers and blog writers, both for companies looking to hire freelancers and for those seeking in-house writers. As a platform that bridges freelancers and companies, ContentGrow must maintain design consistency and its library to facilitate user and system management (developer) aspects.
ContentGrow is a provider of freelancers for writers and blog writers, both for companies looking to hire freelancers and for those seeking in-house writers. As a platform that bridges freelancers and companies, ContentGrow must maintain design consistency and its library to facilitate user and system management (developer) aspects.
ContentGrow is a provider of freelancers for writers and blog writers, both for companies looking to hire freelancers and for those seeking in-house writers. As a platform that bridges freelancers and companies, ContentGrow must maintain design consistency and its library to facilitate user and system management (developer) aspects.
Problem Statement
Problem Statement
Problem Statement
The initial version of the ContentGrow design system had some issues that affected usability and user experience. This led to inconsistency in the design implemented on the company and freelancer dashboards. The non-reusable library resulted in a lack of organization in the documentation, making it challenging for developers to categorize various components, such as atoms, molecules, and organisms.
The initial version of the ContentGrow design system had some issues that affected usability and user experience. This led to inconsistency in the design implemented on the company and freelancer dashboards. The non-reusable library resulted in a lack of organization in the documentation, making it challenging for developers to categorize various components, such as atoms, molecules, and organisms.
The initial version of the ContentGrow design system had some issues that affected usability and user experience. This led to inconsistency in the design implemented on the company and freelancer dashboards. The non-reusable library resulted in a lack of organization in the documentation, making it challenging for developers to categorize various components, such as atoms, molecules, and organisms.
Process
Process
Process
I applied several methods and processes that are similar to the UX Design Process.
I applied several methods and processes that are similar to the UX Design Process.
I applied several methods and processes that are similar to the UX Design Process.
Evaluation
Evaluation
Evaluation
I began by evaluating the components of the initial version by auditing each instance and variant, such as buttons, input fields, dropdowns, etc.
I began by evaluating the components of the initial version by auditing each instance and variant, such as buttons, input fields, dropdowns, etc.
I began by evaluating the components of the initial version by auditing each instance and variant, such as buttons, input fields, dropdowns, etc.
Inconsistency
Inconsistency
Inconsistency
As visible in the image above, several components lack consistency in terms of size, variants, and usage. This results in a diminished user experience on the ContentGrow website.
As visible in the image above, several components lack consistency in terms of size, variants, and usage. This results in a diminished user experience on the ContentGrow website.
As visible in the image above, several components lack consistency in terms of size, variants, and usage. This results in a diminished user experience on the ContentGrow website.
Documentation
Documentation
Documentation
The absence of developer-readable documentation during the development phase. Consequently, developers must invest more time manually defining colors and component variants.
The absence of developer-readable documentation during the development phase. Consequently, developers must invest more time manually defining colors and component variants.
The absence of developer-readable documentation during the development phase. Consequently, developers must invest more time manually defining colors and component variants.
Structureless
Structureless
Structureless
Without a clear structure, the initial version of the library became disorganized and challenging to maintain for product designers or other designers.
Without a clear structure, the initial version of the library became disorganized and challenging to maintain for product designers or other designers.
Without a clear structure, the initial version of the library became disorganized and challenging to maintain for product designers or other designers.
Not Proper Properties
Not Proper Properties
Not Proper Properties
Unstructured properties create confusion when integrating these components into the design.
Unstructured properties create confusion when integrating these components into the design.
Unstructured properties create confusion when integrating these components into the design.
Benchmark
Benchmark
Benchmark
I analyzed open-source design systems from various communities and tech companies in this benchmarking phase.
I analyzed open-source design systems from various communities and tech companies in this benchmarking phase.
I analyzed open-source design systems from various communities and tech companies in this benchmarking phase.
Consistency
Consistency
Consistency
Several popular design systems maintain consistent components in terms of size, variants, states, and hierarchy, including the use of colors in their products.
Several popular design systems maintain consistent components in terms of size, variants, states, and hierarchy, including the use of colors in their products.
Several popular design systems maintain consistent components in terms of size, variants, states, and hierarchy, including the use of colors in their products.
Flexibility
Flexibility
Flexibility
These systems implement flexible components for specific use cases, such as buttons within a form and buttons in the navigation bar.
These systems implement flexible components for specific use cases, such as buttons within a form and buttons in the navigation bar.
These systems implement flexible components for specific use cases, such as buttons within a form and buttons in the navigation bar.
Reusability
Reusability
Reusability
Many popular design systems implement reusable component systems that are easy to maintain.
Many popular design systems implement reusable component systems that are easy to maintain.
Many popular design systems implement reusable component systems that are easy to maintain.
Documentation
Documentation
Documentation
Well-structured documentation that enables developers to easily use each component due to clear and informative documentation on usage.
Well-structured documentation that enables developers to easily use each component due to clear and informative documentation on usage.
Well-structured documentation that enables developers to easily use each component due to clear and informative documentation on usage.
Structure
Structure
Structure
The component structure, from atoms to organisms, is well-organized and user-friendly.
The component structure, from atoms to organisms, is well-organized and user-friendly.
The component structure, from atoms to organisms, is well-organized and user-friendly.
Tokens
Tokens
Tokens
I applied the atomic design concept to the design system that will be developed.
I applied the atomic design concept to the design system that will be developed.
I applied the atomic design concept to the design system that will be developed.
This atomic concept will facilitate communication between designers and developers during the design hand-off and component delivery to the developer. Within the atomic system, tokenization was implemented for naming conventions in each component.
This atomic concept will facilitate communication between designers and developers during the design hand-off and component delivery to the developer. Within the atomic system, tokenization was implemented for naming conventions in each component.
This atomic concept will facilitate communication between designers and developers during the design hand-off and component delivery to the developer. Within the atomic system, tokenization was implemented for naming conventions in each component.
Furthermore, the developer and I discussed the name of the design system for ease of reference and to ensure consistent component naming. Ultimately, we decided on a temporary name for the ContentGrow design system, which is 'ContentGrow Design System’.
Furthermore, the developer and I discussed the name of the design system for ease of reference and to ensure consistent component naming. Ultimately, we decided on a temporary name for the ContentGrow design system, which is 'ContentGrow Design System’.
Furthermore, the developer and I discussed the name of the design system for ease of reference and to ensure consistent component naming. Ultimately, we decided on a temporary name for the ContentGrow design system, which is 'ContentGrow Design System’.
Structure
Structure
Structure
I began by structuring the atoms, which are the smallest units and will serve as the foundation of the design system.
I began by structuring the atoms, which are the smallest units and will serve as the foundation of the design system.
I began by structuring the atoms, which are the smallest units and will serve as the foundation of the design system.
Furthermore, I employed the a11y plugin in Figma to assess color contrast to ensure compliance with WCAG standards. I adopted a 0-900 range as the global palette for global color shades, offering flexibility for use beyond UI design needs.
Furthermore, I employed the a11y plugin in Figma to assess color contrast to ensure compliance with WCAG standards. I adopted a 0-900 range as the global palette for global color shades, offering flexibility for use beyond UI design needs.
Furthermore, I employed the a11y plugin in Figma to assess color contrast to ensure compliance with WCAG standards. I adopted a 0-900 range as the global palette for global color shades, offering flexibility for use beyond UI design needs.
Designing Components
Designing Components
Designing Components
Next, I concentrated on crafting the design system for each component, aligning with the component structure table.
Next, I concentrated on crafting the design system for each component, aligning with the component structure table.
Next, I concentrated on crafting the design system for each component, aligning with the component structure table.
Consistency
Consistency
Consistency
I needed to define each component's size, variants, and properties to achieve consistency. For instance, I focused on buttons and input fields in this case. Both of these components share similar sizes, states, and properties. Additionally, I adjusted the spacing between components to maintain consistency across the board.
I needed to define each component's size, variants, and properties to achieve consistency. For instance, I focused on buttons and input fields in this case. Both of these components share similar sizes, states, and properties. Additionally, I adjusted the spacing between components to maintain consistency across the board.
I needed to define each component's size, variants, and properties to achieve consistency. For instance, I focused on buttons and input fields in this case. Both of these components share similar sizes, states, and properties. Additionally, I adjusted the spacing between components to maintain consistency across the board.
Flexibility
Flexibility
Flexibility
The application of flexibility relates to creating intuitive design components, often referred to as responsiveness, for each design platform. Defining these components requires thoroughly analyzing their structure and hierarchy, ensuring they can adapt flexibly to different platforms.
The application of flexibility relates to creating intuitive design components, often referred to as responsiveness, for each design platform. Defining these components requires thoroughly analyzing their structure and hierarchy, ensuring they can adapt flexibly to different platforms.
The application of flexibility relates to creating intuitive design components, often referred to as responsiveness, for each design platform. Defining these components requires thoroughly analyzing their structure and hierarchy, ensuring they can adapt flexibly to different platforms.
Reusable
Reusable
Reusable
To make components reusable, I audited to identify which components could be reused in different design contexts. One example is the navigation bar component, with variations for mobile and desktop components and different component types. This approach aligns with the initial consistency principle.
To make components reusable, I audited to identify which components could be reused in different design contexts. One example is the navigation bar component, with variations for mobile and desktop components and different component types. This approach aligns with the initial consistency principle.
To make components reusable, I audited to identify which components could be reused in different design contexts. One example is the navigation bar component, with variations for mobile and desktop components and different component types. This approach aligns with the initial consistency principle.
Documentation & Development
Documentation & Development
Documentation & Development
Once all components, from atoms to organisms, were created, the next step involved documenting each component, including states, properties, and variants. This documentation will serve as guidelines for developers during the implementation process, ensuring consistency and alignment with the established design.
Components are translated into code during development, and developers can easily utilize and reference the provided documentation. The straightforward naming convention also aligns the ContentGrow design system with atomic design principles and tokens.
Once all components, from atoms to organisms, were created, the next step involved documenting each component, including states, properties, and variants. This documentation will serve as guidelines for developers during the implementation process, ensuring consistency and alignment with the established design.
Components are translated into code during development, and developers can easily utilize and reference the provided documentation. The straightforward naming convention also aligns the ContentGrow design system with atomic design principles and tokens.
Once all components, from atoms to organisms, were created, the next step involved documenting each component, including states, properties, and variants. This documentation will serve as guidelines for developers during the implementation process, ensuring consistency and alignment with the established design.
Components are translated into code during development, and developers can easily utilize and reference the provided documentation. The straightforward naming convention also aligns the ContentGrow design system with atomic design principles and tokens.
Last
Last
Last
Result
Result
Result
The ContentGrow Design System is released as a full version with the second iteration, which incorporates the atomic and tokens concepts. Furthermore, this new version is flexible and can be applied across various ContentGrow products, such as dashboards, company profiles, and marketing landing pages.
In its implementation within UI design, designers can easily make use of it due to the well-structured documentation and properties. With this documentation, both designers and developers can understand how to use and follow the guidelines for each component, ensuring their effective use and preventing duplications.
The ContentGrow Design System is released as a full version with the second iteration, which incorporates the atomic and tokens concepts. Furthermore, this new version is flexible and can be applied across various ContentGrow products, such as dashboards, company profiles, and marketing landing pages.
In its implementation within UI design, designers can easily make use of it due to the well-structured documentation and properties. With this documentation, both designers and developers can understand how to use and follow the guidelines for each component, ensuring their effective use and preventing duplications.
The ContentGrow Design System is released as a full version with the second iteration, which incorporates the atomic and tokens concepts. Furthermore, this new version is flexible and can be applied across various ContentGrow products, such as dashboards, company profiles, and marketing landing pages.
In its implementation within UI design, designers can easily make use of it due to the well-structured documentation and properties. With this documentation, both designers and developers can understand how to use and follow the guidelines for each component, ensuring their effective use and preventing duplications.
Reflections
Reflections
Reflections
In the process of creating the ContentGrow Design System, I, as a Product Designer, was able to discover new knowledge and applications in Design Systems. One of them is the implementation of the atomic and tokens concepts, which I learned during the design system creation process. However, my experience in building components and utilizing various Figma plugins greatly aided me in developing the design system. Additionally, I encountered some challenges and limitations:
Limited time and resources
Lack of discussion and brainstorming with fellow designers
In the process of creating the ContentGrow Design System, I, as a Product Designer, was able to discover new knowledge and applications in Design Systems. One of them is the implementation of the atomic and tokens concepts, which I learned during the design system creation process. However, my experience in building components and utilizing various Figma plugins greatly aided me in developing the design system. Additionally, I encountered some challenges and limitations:
Limited time and resources
Lack of discussion and brainstorming with fellow designers
In the process of creating the ContentGrow Design System, I, as a Product Designer, was able to discover new knowledge and applications in Design Systems. One of them is the implementation of the atomic and tokens concepts, which I learned during the design system creation process. However, my experience in building components and utilizing various Figma plugins greatly aided me in developing the design system. Additionally, I encountered some challenges and limitations:
Limited time and resources
Lack of discussion and brainstorming with fellow designers
Other Projects
Other Projects
Other Projects
A UX Success Story: Refining the Calculator Function in OnlyGym App
A UX Success Story: Refining the Calculator Function in OnlyGym App
The Diet Calculator is one of the features within the OnlyGym member application. This feature determines dietary needs based on user-provided information and their dietary goals.
The Diet Calculator is one of the features within the OnlyGym member application. This feature determines dietary needs based on user-provided information and their dietary goals.
Optimizing User Experience: Cryptocurrency Trading App Design
Optimizing User Experience: Cryptocurrency Trading App Design
Airaa is a cryptocurrency application that incorporates automated trading features or bots. This application enables users to configure profit or purchase amounts according to their preferences automatically.
Airaa is a cryptocurrency application that incorporates automated trading features or bots. This application enables users to configure profit or purchase amounts according to their preferences automatically.
Creating a Clean and Clear Experience for Gym Member Management
Creating a Clean and Clear Experience for Gym Member Management
OnlyGym is a Software as a Service (SaaS) website that provides gym necessities and member data management for gym owners.
OnlyGym is a Software as a Service (SaaS) website that provides gym necessities and member data management for gym owners.
Optimizing Catholic Content: A UI/UX Case Study for Articles and Prayers on a Faith-Based Website
Optimizing Catholic Content: A UI/UX Case Study for Articles and Prayers on a Faith-Based Website
BPN PKKI is committed to providing learning resources and a spiritual sanctuary for the Catholic faithful, allowing them to enhance their understanding of divinity and strengthen their faith through contemplation, prayer, and online article readings at a distance.
BPN PKKI is committed to providing learning resources and a spiritual sanctuary for the Catholic faithful, allowing them to enhance their understanding of divinity and strengthen their faith through contemplation, prayer, and online article readings at a distance.