SAVING TECH BANDWIDTH
BY IMPLEMENTING A DESIGN SYSTEM
SAVING TECH BANDWIDTH
BY IMPLEMENTING A DESIGN SYSTEM
My journey of developing and consistently maintaining a design system that resulted in saving tech bandwidth.
Also allowed designers to concentrate solely on problem-solving, as the UI design process has been greatly simplified.
My journey of developing and consistently maintaining a design system that resulted in saving tech bandwidth.
Also allowed designers to concentrate solely on problem-solving, as the UI design process has been greatly simplified.
My role
Research &
Design
Collaborators
Tech team ❤️
Timeline
In process always
Outcome
Saved a lot of time
CONTEXT
CONTEXT
In the fast-paced world of startups, design can sometimes become an afterthought, leading to inconsistencies, inefficiencies, and a fragmented user experience. When I joined Cradlewise, a burgeoning tech startup revolutionizing baby tech, I was met with a product that brimmed with potential yet was marred by design disparities. This case study outlines the journey of creating Cradlewise's first design system, aimed at unifying our product's aesthetic, improving design efficiency, and laying a foundation for scalable growth.
In the fast-paced world of startups, design can sometimes become an afterthought, leading to inconsistencies, inefficiencies, and a fragmented user experience. When I joined Cradlewise, a burgeoning tech startup revolutionizing baby tech, I was met with a product that brimmed with potential yet was marred by design disparities. This case study outlines the journey of creating Cradlewise's first design system, aimed at unifying our product's aesthetic, improving design efficiency, and laying a foundation for scalable growth.
THE CHALLENGE
THE CHALLENGE
Cradlewise's app, while innovative, faced several design-related challenges that hindered its ability to deliver a seamless user experience:
Inconsistency Across Screens: Every screen had a unique look and feel, leading to a disjointed user experience
Cradlewise's app, while innovative, faced several design-related challenges that hindered its ability to deliver a seamless user experience:
Inconsistency Across Screens: Every screen had a unique look and feel, leading to a disjointed user experience
Typography Chaos: The usage of two different fonts lacked a clear rationale, muddying the visual hierarchy and communication effectiveness.
Typography Chaos: The usage of two different fonts lacked a clear rationale, muddying the visual hierarchy and communication effectiveness.
Hardcoded UI Elements: The prevalence of hardcoded UI elements meant that any change required substantial time and effort, significantly slowing down development.
Hardcoded UI Elements: The prevalence of hardcoded UI elements meant that any change required substantial time and effort, significantly slowing down development.
Dual Theme Design Burden: The necessity to design for both dark and light modes doubled the workload for our designers, creating inefficiencies in our design process.
Dual Theme Design Burden: The necessity to design for both dark and light modes doubled the workload for our designers, creating inefficiencies in our design process.
So that's why a design system was required.
So that's why a design system was required.
PLANNING
PLANNING
The first step was a comprehensive audit of our existing UI components. Given our focus on parents and their babies, it was crucial to adjust our UI elements to convey trust, safety, and a sense of calm. This meant reevaluating everything from color schemes to the geometry of components to ensure they resonated with our target users' needs and preferences.
The first step was a comprehensive audit of our existing UI components. Given our focus on parents and their babies, it was crucial to adjust our UI elements to convey trust, safety, and a sense of calm. This meant reevaluating everything from color schemes to the geometry of components to ensure they resonated with our target users' needs and preferences.
I planned I'll first define foundational elements and then create components out of it (pretty simple approach).
I planned I'll first define foundational elements and then create components out of it (pretty simple approach).
01
Foundation
Typography, Colors, Spacing
01
Foundation
Typography, Colors, Spacing
02
Components
Buttons, controls, cards, bottom sheets, tooltips, etc
02
Components
Buttons, controls, cards, bottom sheets, tooltips, etc
CRAFTING HUSH DESIGN SYSTEM
CRAFTING HUSH DESIGN SYSTEM
I named it "Hush" as it is an evocative and fitting name, particularly given the context of Cradlewise as a baby-centric app. The word "Hush" conjures images of tranquility, comfort, and calmness, aligning perfectly with the ethos of your product aimed at soothing babies and providing peace of mind to parents.
I named it "Hush" as it is an evocative and fitting name, particularly given the context of Cradlewise as a baby-centric app. The word "Hush" conjures images of tranquility, comfort, and calmness, aligning perfectly with the ethos of your product aimed at soothing babies and providing peace of mind to parents.
COLORS
COLORS
I introduced a design tokens approach to standardize our color palette across both the tech and design realms. By naming our colors systematically and utilizing local variables in Figma, we bridged the gap between dark and light modes, facilitating effortless transitions between themes. This not only streamlined the design process but also enhanced visual consistency across our application.
I introduced a design tokens approach to standardize our color palette across both the tech and design realms. By naming our colors systematically and utilizing local variables in Figma, we bridged the gap between dark and light modes, facilitating effortless transitions between themes. This not only streamlined the design process but also enhanced visual consistency across our application.
Figma is the best:)
DESIGNING FOR DARK MODE GOT EASY 🥹
DESIGNING FOR DARK MODE
GOT EASY 🥹
TYPOGRAPHY
TYPOGRAPHY
To address our typographic chaos, I established a clear hierarchy and purpose for our fonts: Montserrat for headings, subheadings, and calls-to-action, and Open Sans for all other text types. This decision was informed by their readability and emotional impact, crucial for engaging our audience across large phones, and small to extra small devices. This thoughtful typography strategy significantly improved our content's accessibility and user engagement.
To address our typographic chaos, I established a clear hierarchy and purpose for our fonts: Montserrat for headings, subheadings, and calls-to-action, and Open Sans for all other text types. This decision was informed by their readability and emotional impact, crucial for engaging our audience across large phones, and small to extra small devices. This thoughtful typography strategy significantly improved our content's accessibility and user engagement.
I defined a type system tailored for three types of devices: Large, Small, and Extra-Small. Different devices possess unique viewing contexts and limitations. What may appear visually pleasing on a large phone could feel cramped on a smaller screen, and vice versa.
I defined a type system tailored for three types of devices: Large, Small, and Extra-Small. Different devices possess unique viewing contexts and limitations. What may appear visually pleasing on a large phone could feel cramped on a smaller screen, and vice versa.
UNITS: SPACING & RADIUS
UNITS: SPACING & RADIUS
Implementing a token-based system for spacing and radius allowed us to create a more structured layout and visual rhythm throughout our app. I’ve created variables to define rules for Spacing and Radius for use throughout the design system. Note that these are a different type of variable to the Color variables used above, here we use Number Variables.
Implementing a token-based system for spacing and radius allowed us to create a more structured layout and visual rhythm throughout our app. I’ve created variables to define rules for Spacing and Radius for use throughout the design system. Note that these are a different type of variable to the Color variables used above, here we use Number Variables.
This is extremely useful for improving consistency and increasing the speed at which we can design for all types of devices as they don't need to find the perfect corner radius and spacing for a device.
This is extremely useful for improving consistency and increasing the speed at which we can design for all types of devices as they don't need to find the perfect corner radius and spacing for a device.
COMPONENTS
COMPONENTS
With a focus on evoking trust and friendliness in our user interface, I refined our UI components to embody a softer, more welcoming aesthetic. Employing squircle shapes for cards and buttons, we achieved a smoother, more approachable look, resonating with our ethos of comfort and care for babies and parents alike.
With a focus on evoking trust and friendliness in our user interface, I refined our UI components to embody a softer, more welcoming aesthetic. Employing squircle shapes for cards and buttons, we achieved a smoother, more approachable look, resonating with our ethos of comfort and care for babies and parents alike.
Rounded corners in a baby app UI psychologically signal safety and warmth, fostering a nurturing and welcoming environment that resonates with parents’ desire for a gentle and caring experience.
Rounded corners in a baby app UI psychologically signal safety and warmth, fostering a nurturing and welcoming environment that resonates with parents’ desire for a gentle and caring experience.
I designed only those components that were required at that time.
I designed only those components that were required at that time.
I created some product illustrations too. They were used to teach how to set up crib at the time of onboarding.
I created some product illustrations too. They were used to teach how to set up crib at the time of onboarding.
IMPLEMENTATION AND COLLABORATION
IMPLEMENTATION AND COLLABORATION
The journey from design conceptualization to full implementation was not without its challenges. Collaborating closely with the tech team, we navigated through the complexities of integrating the design system across all screens. This process involved continuous dialogue, iteration, and compromise, ensuring that our design vision was realized without compromising on functionality or performance.
We created logics around using a UI component. For ex - A bottom sheet will be used for every L2 actionable item.
The journey from design conceptualization to full implementation was not without its challenges. Collaborating closely with the tech team, we navigated through the complexities of integrating the design system across all screens. This process involved continuous dialogue, iteration, and compromise, ensuring that our design vision was realized without compromising on functionality or performance.
We created logics around using a UI component. For ex - A bottom sheet will be used for every L2 actionable item.
It took a month to design and implement this across every screen on the app.
With new and reusable components, we significantly saved bandwidth for both the tech and design teams.🎉🎉
It took a month to design and implement this across every screen on the app.
With new and reusable components, we significantly saved bandwidth for both the tech and design teams.🎉🎉
THANK YOU FOR READING!
THANK YOU FOR READING!
Feel free to connect let's chat about design, product, mentorship, community, or anything
© 2024 Vaibhav Shukla. All right reserved.
Feel free to connect let's chat about design, product, mentorship, community, or anything
© 2024 Vaibhav Shukla. All right reserved.