Design System
Our team was working on creating a dashboard for managing leads and a chatbot, but we needed a detailed Design System that could combine with other future features. Ideally, it should be as minimal as possible and scalable to any venue.
Project Overview
A Design System for Lead generation services using chatbots that provide built-in chat scripts for legal issues. The widget is hosted on the client’s website and captures potential leads through various prompts.
Other features include two-way SMS, follow-up automation, client onboarding, & lead management designed for advanced law firms.
My Role
- Analyzing other current design systems in similar matters.
- Integrating with the product team to ensure the decisions.
- Working with developers to design more practical elements.
- Creating a wiki about using aspects of the design system in the product interface.
Networking
Letting everyone participate and make recommendations to enhance the design creates a consistent stream of ideas and a sense of membership.
Visual Design
Due to fast collaboration with other teammates, I designed all elements in Adobe XD and made an entire package in Figma for some possible cases.
Grid System
The grid system uses a set of containers, rows, and columns to organize and align content. We can create layouts of all shapes and sizes thanks to a one-row system that is entirely responsive, delivers content correctly, and provides a pixel-perfect design.
Spacing
I’ve chosen a 8px spacing as a basic unit to work with because it’s easy to use and multiply and provides flexible and consistent yet distinct steps. Most measurements align to a 8px grid applied, which aligns both spacing and the overall layout.
Colors
I’ve tested many color pallets according to the brand design of the product. I also had to decide on using harmonious colors, ensure accessible text, and distinguish interface elements and components from one another.
Although most main buttons on actions should be green, other activities like Create, Add and Publish require another color as a primary.
Typography
The typography scale determines which typefaces will become a standard, but also how we organize a constant hierarchy, which will build a predictable information architecture across the product. We’ve used the Ubuntu and the Roboto font family.
Iconography
Creating an icon family requires a thoughtful approach and a bit of iteration for the set to be organized, well-documented, and tested in context. To achieve harmony for an icon family, I needed to maintain the same stylistic rules throughout: 1.5px centered stroke and grid for 24x24px icon size.
Corners
Changing shapes can be subtle or significant; forms can reflect a specific meaning or purpose. Shape both helps users identify components and affects how usable they are. I’ve used two values to make components recognizable.
Components
Components are the reusable building blocks of our design system. Each component is designed to create patterns and intuitive user experiences to meet a specific interaction or user interface need.
Further
A design system is in a constant phase of development, maintenance, and improvement. As we continuously use it and expand it to multiple teams and organizations, the design system will evolve and cover all requirements of building any product.
Results
Users felt that the site was cleaner and more straightforward than the competitors.
Some users had difficulties creating the bot, taking considerable time to find their way on the old version.
Lead generating has risen to 50%, sometimes even 80%.
By redesigning the entire dashboard, the conversion rate has risen.
Moderating more will impact how users use it to generate leads and improve their experience.