Status: Internally Deployed
Background
An internal design system to deliver unique customizable and reduce development times.
Boosting efficiency by eliminating repetitive tasks through reusable components, improving collaboration by establishing a common language, and saving time by accelerating web design workflows for faster time-to-market.
Problem
How does the company handle unique web design demands, navigating system limitations, delays, and client capacity?
Outcome
Created an Internal design system optimizing the design and development process, leading up to a 30% reduction in project development time.
Achievements
30%
decrease in the project's development timeline.
2x
estimated savings in revenue per project.
50%
reduction in design phase of the project.
Research Outcome
1. Design spec of each project took time to implement.
2. Lack of predefined set of rules and guidelines lead to confusion.
3. Existing design systems did not meet the requirements of company's vision.
Research
Build Process & Design Strategy
We followed the lean UX process, focused on time-to-market and incorporated the most high-value UX activities in the process.
Understanding the Problem
Conducted extensive research of end-to-end process to understand pain points
01
Stakeholder Interviews
Gathered insights into the challenges faced during the project lifecycle.
02
Process Audit
Evaluated the existing design processes from project initiation to completion.
03
Design System Audit
Reviewed existing design systems to understand strengths and weaknesses.
"We have to ensure that we have some pre-defined guidelines and style to follow so we can quickly drag and drop components to build templates for our clients."
Raf, CEO - Solid Tree
Define
Problem Statement from Research Insights
Problem 1
How do we navigate project delivery challenges with limited company resources, causing bottlenecks and potentially revenue loss?
Problem 2
How do we reduce the implementation of design and development specifications?
Created List of Core Components
Prioritized Core Features for MVP
We followed the lean UX process, focused on time-to-market and incorporated the most high-value UX activities in the process.
Atomic Design Approach
Inspired by Brad Frost, I chose this method for its logical organization, aiding in efficient component management based on complexity.
Design
4 Point Grid System
The 4-point system is used for building a design system because it provides a simple and effective way to achieve visual balance, making layouts aesthetically pleasing and easy to implement.
System Architecture
The design system aimed to establish a adaptable architecture for seamless future changes. Collaborating with the lead developer, we devised a generic structure, breaking down elements to their most basic form
Brad Frost's approach was adapted.
Highly customizable buttons with several states.
One change here will impact all the components.
Tailwind Color System
Tailwind CSS's color system was chosen for the design system to streamline and standardize color implementation
Strategic Simplicity
We opted for generic names for our typography styles in the design system to enhance flexibility and scalability. This choice allows for easy updates and accommodates evolving design needs seamlessly.
Implementation
Comprehensive Evaluation
Leveraging our design system, we successfully executed a comprehensive website redesign for a client, resulting in an impressive 50% reduction in time-to-market, translating to substantial time and cost savings.
Triumph: 50% Time-to-Market Slash in Client Website Redesign
Learnings
As the sole Product Designer in the startup, the Design System has been instrumental in saving time. This case study delves into my evolving process and shares insights gained along the way, highlighting the system's pivotal role
Takeaways
01
Collaborating with Multiple Teams
I had to constantly coordinate between Developers and PMs for data asks and to make sure my design was feasible.
02
No One Size Fits All
The design system, tailored to our key clientele base, was crafted to better meet their diverse needs, acknowledging that a one-size-fits-all approach may not be suitable.
03
Fast Thinking & Decision-Making
Since it was a quick sprint, I was pushed to make quick decisions and learned how to make decisions based on the data available to me as well as intuition.
Side Stuff
Designed by me with Chocolate Matcha
Zaid © 2024 All Rights Reserved