Built a design system that saved development time by 20%
Sami Bot Design System
Embedded Files
Impact:
Applying the atomic design system & design-to-dev handoff, reduced the front-end development time by 20%
TeamsMe as a solo designer2 Front-end engineer1 Back-end engineer1 product manager
Role
UI designer, Design system, Handoff DocTools
Figma, FigJam, Google meetDuration
May-Sep 2022Problem:
I was to design admin panels and landing pages for various devices and there were plans to expand the product soon.
Product:
As a result, I created a design system and a design-development handoff, which increased consistency throughout the entire product and reduced knowledge gaps between teams.
“Systems solve easy problems so products can solve hard problems more easily."
Nathan CurtisEightshapes Founder
Story of case study
Story of case study
I was the sole UX/UI designer on this project, designing the entire experience of the website and mobile product, but I'd like to focus on the design-dev handoff process that I improved, as well as a design system that I created specifically for this case study because it resulted in a 40% reduction in design-dev weekly meetings and a 20% reduction in front-end development time.
About SamiBot
About SamiBot
Sami bot is a cryptocurrency trading bot that eliminates the entry barrier for traders with no experience by taking over everything on their behalf.
For over 1 year, everything was done manually, and not effectively. There was no holistic user interface for adding users and bots or controlling them.
Showing hard work of admins to control everything without a holistic product
The goal was to design an admin panel to provide admins with a dashboard to monitor, add, or remove users, as well as to track user and strategy processes.
A landing page for introducing the business to users and capturing their contact information.
Admins work only on desktop versions of dashboards, so I designed a desktop version. However, users browse landing pages on mobiles, tablets, and laptop devices.
There were plans to expand the project soon to
Add more cryptocurrencies, and bots to the platform.
Introduce a user panel in the near future so users can take some control over their trading experience.
This website is in two languages English and Persian, so It includes some Left-to-right & right-to-left components.
Design system pros
Design system pros
Having a design system at the beginning is far easier than creating one after the product comes out based on big teams' experience.
The business will expand soon. With a design system, we can do more with less.
In the future, the team will grow, making it easier to onboard new designers.
It's easier for us to ship visual changes and maintain a coherent experience across our products
A unified design system can remove tons of UX & Tech debt
Increase consistency & good user experience
Eliminates implementation error
Speed up the development process with a set of robust components and documentation
Keep the designers on the right track.
“Without a shared [design] language, a group of people can’t create effectively together.”
— Alla kholmatova, Design Systems
Team work makes the dream work
Build vs. Use
Build vs. Use
Building it myself means that I am responsible for it all, and it will likely take longer to complete.
Leveraging a pre-existing one (which is what I do). I can still customize certain aspects of an existing component, but I am ultimately getting a lot for free.
On the engineering side, They decided to build on top of an existing solution by utilizing Material-UI. Material-UI is the most popular React framework that provides Google Material Design out of the box. Leveraging Material-UI, gave us a ton of components that we can configure and style to meet the needs of our product.
However, if all applications look the same, what’s the point of spending so much time on design, right? The real fun part begins when you customize the Material-UI.
Same same design
However, if all applications look the same, what’s the point of spending so much time on design, right? The real fun part begins when you customize the Material-UI.
I chose to customize its components to ensure upgrading or replacing components will be smoother.
Using customization, you can control almost every aspect of your application's look, feel, and behaviour when a user interaction happens. This is a great power right in the hands of designers and developers.
Stakeholder buy-in
Stakeholder buy-in
Regardless of the route I take, building out a design system comes with a definitive cost. Research, building out the design tokens, and building out the component library are all very expensive at the start. In order to consume libraries, developers must either rewrite their applications or add features one by one.
In a documented design, there is no room for interpretation.
I get stakeholders' buy-in across the company with
Deciding on Leveraging a pre-existing one
explaining the benefits of having a design system sooner in the making of the product before we scale
Providing engineers with support and guidance, enabling them to comment or send voice messages on the design, and to report any issues to make them more receptive to using the design library.
My 3-step approach to customizing the material UI design system
My 3-step approach to customizing the material UI design system
What is a design system?
It’s a collection of shared patterns and practices that allow our team to build quality user interfaces consistently and quickly. Patterns are the repeating, reusable parts of the interface, such as buttons, colors, and icons.
— Alla kholmatova, Design Systems
1- Customize and create the basic foundation of a design system (Atoms) from material design.
Some of the basic foundation of a design system
Grids & Breakpoints
Responsive design
I try to make a video of the responsive design and how each component behaves as the device width changes
for non-designer team members.
Color
Typescale
In order to choose the right typeface for this platform, I had to choose one that works well with numbers as well as text.
My typography is scaled by 150 %. Font size is created by multiplying or dividing the base (16 px).
I use 150% line height in English and in Persian, 170%.
The letter spacing remains at 0 for the base, at -3% for extra large, and at +3% for extra small text.
Monospaced font
A monospaced font, also called a fixed-pitch, fixed-width, or non-proportional font, is a font whose letters and characters each occupy the same amount of horizontal space. This contrasts with variable-width fonts, where the letters and spacings have different widths
They are very good with numbers, but they take up a lot of space. I decide to use another font face since I have to show a lot of data on tables and boxes.
As a result, I chose Roboto, which works fine with both numbers and text.
monospaced fonts take up more space than others with the same font size.
Spacing
Button
2. Using atoms to build molecules and molecules to build organisms ...to have scalable components.
In order to build larger reusable components, I combine atoms and molecules by looking at wireframes.
Here are some examples of components
Atoms
Molecules
Organism
Template
Page
3. Test to ensure each atom and molecule is modular, scalable, and independent.
In order to test components for modularity in Figma, I swapped instances or put long and short text, enlarged them horizontally and vertically, added or removed items, and changed icons and media to ensure each component was modularized without being detached from the master component in the future.
Testing dropdown menu component for modularity
Smooth design-dev handoff
Smooth design-dev handoff
After I was satisfied with the designs, I create a document containing all the details and digital assets the development team needs.
During meetings or when reviewing files, I communicate and collaborate with developers and answer any potential questions.
Design - develop handoff in Figma
In addition, I use annotations, which are good practice, to explain the decisions I made on each design. Detailed annotations describe the functionality and behavior of the product. They define the way the system behaves, responds to actions taken by the user, communicates results, and helps fulfill the user's intentions.
Annotations on design
For easy navigation, I label and organize everything clearly. During this review, I ensure that all links work, no typos appear, and the right imagery is used for the sections.
I included user flow diagrams. They help developers understand how the main flow of a design is structured and where a screen fits. Additionally, I provided the developer with task flow details and simple explanations.
When clear lines of communication were established, both teams were confident that any problems can be resolved easily.
Screen flow with descriptions
All the hard work paid off in the end. Applying the atomic design system & design-to-dev handoff, reduced the front-end development time by 20%
The product was developed faster than prior products without design systems or any sort of pattern libraries.
What were the constraints?
What were the constraints?
Time was one of the biggest constraints. Every decision I made was affected by it, so I decided to include developers and the product manager from the beginning for better collaboration and more iterations on the go.
Money was another constraint, which means I had to work as a solo designer and stick with free resources to stay within the company budget.
The fact that I was unfamiliar with the type of user interface elements, patterns, and components most commonly used in trading applications and websites added to my constraints.
Challenges
Challenges
My task was to test components for modularity by applying auto layout to all of them.
What I learned
What I learned
Develop the ability to articulate my decisions
Design is not only about creating good user experiences but also explaining what decisions you have made to a larger audience of non-designers. I developed skills in how articulating my design decisions to build trust with my stakeholders to get their buy-in. I tried to use data to support my design decisions.
He who wants to persuade should put his trust not in the right argument, but in the right word.
— Joseph Conrad
Learn and Grow
Each new project offers us an opportunity to learn and grow as professionals. Sami bot gave me an insight into trading cryptocurrencies in a way that challenged me to think about how we can simplify the trading experience.
Make trade-offs
Decision-making is a highly important skill to choose among alternative courses of action. Every decision we make directly affects the final result. Depending on what benefits we gain and what cost opportunities we tolerate we should do the trade-off wisely.
Next step
Next step
I would like to iterate more on my components in case of a problem and control if they are modularized and atomic.
Next
Page updated
Google Sites
Report abuse