Localize Design System
I led the design and creation of the Localize Design System, which has been adopted by the entire stakeholders cycle, including developers, product managers, marketing, and the company's leadership.
The design system's goal is to streamline design workflows, make start-to-end deliverable times faster, standardize the usage of reusable components and font styles, and implement standard base spacing units into the design team’s workflows.
I initiated the idea of creating a Design System because it is one of my personal design principles for working effectively and in an organized manner.
In this project, you will see some of the components I built for this design system but it is much more than just a library.
Design Systems are like living organisms in that they are complex and ever-evolving.
My role: E2E product design.
Why I created a design system for Localize?
When I started my position at Localize, there was no Design System file or documentation that designers and developers could use. Because I was regularly working with Design Systems, and understand the value it can bring, I initiated building it for my new company.
🎨 1. "Localize" company just started designing and developing a new product in addition to the existing CRM (LocalizeHQ) and I saw an opportunity to unify all the products into one language.
Throughout time, Localize had many different products, under the same name, so they must have uniform design characteristics.
👥 2. Many stakeholders were involved with Localize products (managers, designers, and developers) and I wanted that everybody will be aligned to one language. New designers joined the team, also new developers and product managers joined and it became harder to keep the consistency going.
⏳ 3. I wanted the daily work to be more effective and simple, to spend less time on repetitive parts of the product, and dedicate more time to developing more complex components and animations.
My Role in the Project
The Design System started as a passion project for me and my Head of Design. We chose to use the Atomic Design Methodology for it.
First, we started documenting the decisions I made for the app language - colors, text-styles, grids, etc. (which be the fundamentals).
Later we added basic UI atoms - buttons, shadows, fields, etc. and finally, I created the rest - filters, showcases, cards, inputs, and made them responsive.
As the owner of the project, I held workshops for my team so they could help maintain and grow it.
Localize have 3 product that should be in the same design language, but each one has also some different components. We checked and tried to work with some methods, but eventually, we felt that the above method is the best for us. We build a master file, that includes all the common decisions- which are the same for all products, then we built every Design System on its own file.
Flexible and consistent
One of my personal principles while working is to think widely, about the bigger picture, and not just the specific case, so the components could be really flexible and reduce the element's development effort.
Fundamentals
Colors
This project started with the color ◼ #0190A3 because it was the brand color of Localize. We wanted to continue using the existing language but adjust it to digital products.
This design system may include two brand colors (primary and secondary). For the secondary color, we chose the purple color because it is harmonic to the already chosen brand color.
Each color has lighter and darker shades for variety and flexible uses.
Next, follow the neutral colors such as white, black, and shades of gray.
Functional colors were also included. We chose to set 2 types of "bad" colors: "Negative" for minor concerns and non-critical issues, and "error" for important notices.
Typography
We were hoping to be able to handle the whole design system with 2 fonts. and we did it!
For the desktop, I chose the Archivo font, which has a variety of weights, so it can be flexible for creating many text styles. That, enables us to use it for both titles and as body text.
For the mobile ios app, I chose the SF Pro font, which is the official font for ios. This choice not only reduced the development effort required, but also contributed to faster app performance by utilizing a native ios font.
Grid & Spacing
Before, our products were designed without a consistent grid. As part of creating the Design System, I wanted to determine a uniform one.
The grid comprises 12 columns with rows spaced at 4px intervals.
An additional decision is to design every component-based spacing units with multiples of 8px (4px, 8px, 16px, 24px...).
UI Atoms
The next section of the design system is all about reusable components.
I designed components and variants for the most frequently needed design elements, such as buttons, inputs, menus, filters, radio and checkbox, forms, cards, pop-ups, navigational controls, and pagination.
Buttons
I used the Figma wonderful features to define the side controller for our buttons, for quick and effective UI designs. To know how to do it properly, I self-learned this ability using Figma official tutorials.
Properties descriptive names / Figma layers window
Components designed by the "auto layout" and the "variants" features:
Icons
We explored and tested few icon libraries. Eventually, we chose the following free library: phosphoricons.com,
because it's simple, and complements the overall visual language of the design system. In addition, it was important for us to find one library with icons that could be recognized on big screens and small screens.
In addition, I defined principal decisions in order to keep the icons grounded and consistent.
Illustrations
We added illustrations to the Design System, to be featured in future screens, for adding visual elements to create a positive atmosphere.
The illustrations were created by several external freelancers, based on our personal request.
Filters & Menu
We placed components that we use often in a "Quick Start" section, so the designers could pick them instantly.
Inputs
I created the "Inputs" component while thinking ahead it should be a versatile element, and being used in various versions and situations.
More components
Few more useful components I created for the Design System.
Components
The next portion of the Design System is all about reusable components. We designed components and variants for the most frequently needed design elements such as headers, tables, cards, pagination, navigational controls, and more.
For the ability to build and design a page quickly, we created responsive full-page blocks. The same blocks were developed and that helped to cut the development time.
Pages
As we moved ahead, after we created many components and reached a stable state of the system, we designed and documented the main pages.
The pages were established based on the most frequently needed page layouts on projects, such as Leads Pipeline, Tasks, thank you pages, error messaging pages, and more. This helped us work more effectively every time we started a new project.
With the addition of the styles and components, the page layouts could be easily edited to fit the brand’s needs and save designers time.
Here are some examples of main pages from the LocalizeOS CRM system:
Buyer profile + Timeline
Buyer's pipline
Upload leads
Tasks
