Enhancing Design Consistency with Float Design System
Enhancing Design Consistency with Float Design System
Enhancing Design Consistency with Float Design System
Design system
Design system
Design system
2022
2022
2022
Squareboat
Squareboat
Squareboat
Streamlining reusable components and patterns to unify design efforts, improve consistency, and to bridge the gap between Designers and UI Engineers for a unified user experience.
Introduction
My Role
I joined Squareboat as a product design intern and was assigned the task of creating the design system of Squareboat in a month individually. It was made possible by receiving inputs from the Design Manager as well as the CEO which helped in making it more consistent, efficient and easy to use.
What is a design system?
It closes the gap between the designers and UI engineers who work on multiple products and often recreate or duplicate work done by other teams. It can also improve consistency across platforms, build more intuitive products, and allow designers to focus on addressing bigger problems.
What use a design system?
Imagine that your company has a product that it has been building for a long time. It’s likely that the many teams working on different parts of the product will create inconsistencies in the product over time.
This definition highlights the three main principles of Design Systems:
Efficiency: Instead of repeatedly building similar components from scratch, Design Systems enable designers & developers to reuse components and thereby increase efficiency.
Consistency: Design Systems introduce a shared set of principles and rules to build components. It becomes much easier to create consistent experiences across different platforms.
Scale: Increased efficiency and consistency lead a company to build faster products at scale.
My Role
I joined Squareboat as a product design intern and was assigned the task of creating the design system of Squareboat in a month individually. It was made possible by receiving inputs from the Design Manager as well as the CEO which helped in making it more consistent, efficient and easy to use.
What is a design system?
It closes the gap between the designers and UI engineers who work on multiple products and often recreate or duplicate work done by other teams. It can also improve consistency across platforms, build more intuitive products, and allow designers to focus on addressing bigger problems.
What use a design system?
Imagine that your company has a product that it has been building for a long time. It’s likely that the many teams working on different parts of the product will create inconsistencies in the product over time.
This definition highlights the three main principles of Design Systems:
Efficiency: Instead of repeatedly building similar components from scratch, Design Systems enable designers & developers to reuse components and thereby increase efficiency.
Consistency: Design Systems introduce a shared set of principles and rules to build components. It becomes much easier to create consistent experiences across different platforms.
Scale: Increased efficiency and consistency lead a company to build faster products at scale.
My Role
I joined Squareboat as a product design intern and was assigned the task of creating the design system of Squareboat in a month individually. It was made possible by receiving inputs from the Design Manager as well as the CEO which helped in making it more consistent, efficient and easy to use.
What is a design system?
It closes the gap between the designers and UI engineers who work on multiple products and often recreate or duplicate work done by other teams. It can also improve consistency across platforms, build more intuitive products, and allow designers to focus on addressing bigger problems.
What use a design system?
Imagine that your company has a product that it has been building for a long time. It’s likely that the many teams working on different parts of the product will create inconsistencies in the product over time.
This definition highlights the three main principles of Design Systems:
Efficiency: Instead of repeatedly building similar components from scratch, Design Systems enable designers & developers to reuse components and thereby increase efficiency.
Consistency: Design Systems introduce a shared set of principles and rules to build components. It becomes much easier to create consistent experiences across different platforms.
Scale: Increased efficiency and consistency lead a company to build faster products at scale.
“A design system isn’t a project. It’s a product serving products.”— Nathan Curtis, EightShapes
Float design system - the all-new design system of Squareboat Solutions Pvt. Ltd. is a complete set of standards intended to manage design at scale using reusable components and patterns.
Process Followed
“A design system isn’t a project. It’s a product serving products.”— Nathan Curtis, EightShapes
Float design system - the all-new design system of Squareboat Solutions Pvt. Ltd. is a complete set of standards intended to manage design at scale using reusable components and patterns.
Process Followed
“A design system isn’t a project. It’s a product serving products.”— Nathan Curtis, EightShapes
Float design system - the all-new design system of Squareboat Solutions Pvt. Ltd. is a complete set of standards intended to manage design at scale using reusable components and patterns.
Process Followed
Current Design Audit
Before beginning of the design system, I went through the website of Squareboat. Since the website is already live, some guidelines were already set but it lacked in terms of consistency and maintaining design standards in the labs-the internal products. Also, no design system raw files existed, so I had to make all the components from scratch.
Benchmarking & Analysis
In the benchmarking, I deeply analyzed the documentation of the guidelines and the components of popular design systems like Google, Apple, Atlassian, IBM (Carbon), Zomato (Sushi), Shopify etc. to take inspiration of good design patterns and guidelines being followed by them.
From the research, I analyzed and found out how the structure of the design system to be laid down. Some of the insights found:
Documentation layout
Design System Structure and arrangement of different components
Important components that form a part of the system
Best way to put out certain components that were not pre-defined
How different brands have put it out to public
Design System Structure
We followed the Atomic Design methodology by Brad Frost. Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.
1. Atoms
The atoms serve as the foundational building blocks that comprise all our user interfaces. These atoms include basic elements, which can't be broken down further like typography, colour palettes, icons, spacing and shadows of our design system.
2. Molecules
In interfaces, molecules are relatively simple groups of UI elements functioning together as a unit. For example, buttons, button groups, search fields, input fields, date and time picker, and button widgets can join together to create molecules.
3. Organisms
Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface. These include navigation Bar, Hamburger Menu, Ratings, Cards, check box areas, toast messages, accordions, etc.
4. Templates
Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure. We collect all the base components, which are then used to build more complex, reusable, and scalable snippets called templates.
5. Pages/Screens
Pages are specific instances of templates that show what a UI looks like with real representative content in place. This is what users will see and interact with when they visit your experience. This is where you see all those components coming together to form a beautiful and functional user interface.
Learnings 🤓
The Float Design system was made from scratch and then was uploaded using zeroheight with one of my colleague. After going through the website of Squareboat, I got to know about the details of making of a design system that could be reusable by anyone throughout. All the components were made keeping in mind the consistency and the future use of it.🤩 This is always an ongoing process and will keep iterating on it with further use.
So far, we have a set of basic components ready, which has been game-changing for our team in terms of efficiency, as well as consistency, and standardization.
Current Design Audit
Before beginning of the design system, I went through the website of Squareboat. Since the website is already live, some guidelines were already set but it lacked in terms of consistency and maintaining design standards in the labs-the internal products. Also, no design system raw files existed, so I had to make all the components from scratch.
Benchmarking & Analysis
In the benchmarking, I deeply analyzed the documentation of the guidelines and the components of popular design systems like Google, Apple, Atlassian, IBM (Carbon), Zomato (Sushi), Shopify etc. to take inspiration of good design patterns and guidelines being followed by them.
From the research, I analyzed and found out how the structure of the design system to be laid down. Some of the insights found:
Documentation layout
Design System Structure and arrangement of different components
Important components that form a part of the system
Best way to put out certain components that were not pre-defined
How different brands have put it out to public
Design System Structure
We followed the Atomic Design methodology by Brad Frost. Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.
1. Atoms
The atoms serve as the foundational building blocks that comprise all our user interfaces. These atoms include basic elements, which can't be broken down further like typography, colour palettes, icons, spacing and shadows of our design system.
2. Molecules
In interfaces, molecules are relatively simple groups of UI elements functioning together as a unit. For example, buttons, button groups, search fields, input fields, date and time picker, and button widgets can join together to create molecules.
3. Organisms
Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface. These include navigation Bar, Hamburger Menu, Ratings, Cards, check box areas, toast messages, accordions, etc.
4. Templates
Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure. We collect all the base components, which are then used to build more complex, reusable, and scalable snippets called templates.
5. Pages/Screens
Pages are specific instances of templates that show what a UI looks like with real representative content in place. This is what users will see and interact with when they visit your experience. This is where you see all those components coming together to form a beautiful and functional user interface.
Learnings 🤓
The Float Design system was made from scratch and then was uploaded using zeroheight with one of my colleague. After going through the website of Squareboat, I got to know about the details of making of a design system that could be reusable by anyone throughout. All the components were made keeping in mind the consistency and the future use of it.🤩 This is always an ongoing process and will keep iterating on it with further use.
So far, we have a set of basic components ready, which has been game-changing for our team in terms of efficiency, as well as consistency, and standardization.
Current Design Audit
Before beginning of the design system, I went through the website of Squareboat. Since the website is already live, some guidelines were already set but it lacked in terms of consistency and maintaining design standards in the labs-the internal products. Also, no design system raw files existed, so I had to make all the components from scratch.
Benchmarking & Analysis
In the benchmarking, I deeply analyzed the documentation of the guidelines and the components of popular design systems like Google, Apple, Atlassian, IBM (Carbon), Zomato (Sushi), Shopify etc. to take inspiration of good design patterns and guidelines being followed by them.
From the research, I analyzed and found out how the structure of the design system to be laid down. Some of the insights found:
Documentation layout
Design System Structure and arrangement of different components
Important components that form a part of the system
Best way to put out certain components that were not pre-defined
How different brands have put it out to public
Design System Structure
We followed the Atomic Design methodology by Brad Frost. Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.
1. Atoms
The atoms serve as the foundational building blocks that comprise all our user interfaces. These atoms include basic elements, which can't be broken down further like typography, colour palettes, icons, spacing and shadows of our design system.
2. Molecules
In interfaces, molecules are relatively simple groups of UI elements functioning together as a unit. For example, buttons, button groups, search fields, input fields, date and time picker, and button widgets can join together to create molecules.
3. Organisms
Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface. These include navigation Bar, Hamburger Menu, Ratings, Cards, check box areas, toast messages, accordions, etc.
4. Templates
Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure. We collect all the base components, which are then used to build more complex, reusable, and scalable snippets called templates.
5. Pages/Screens
Pages are specific instances of templates that show what a UI looks like with real representative content in place. This is what users will see and interact with when they visit your experience. This is where you see all those components coming together to form a beautiful and functional user interface.
Learnings 🤓
The Float Design system was made from scratch and then was uploaded using zeroheight with one of my colleague. After going through the website of Squareboat, I got to know about the details of making of a design system that could be reusable by anyone throughout. All the components were made keeping in mind the consistency and the future use of it.🤩 This is always an ongoing process and will keep iterating on it with further use.
So far, we have a set of basic components ready, which has been game-changing for our team in terms of efficiency, as well as consistency, and standardization.
