top of page
designsystem

Localize Design System

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.
 

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 and kept adding and documenting components, I held a workshop for my team so they can help maintain and grow it.

designsystem

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.

designsystem

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.

designsystem

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...).

designsystem

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.

designsystem

Properties descriptive namesFigma layers window

Components designed by the "auto layout" and the "variants" features:

designsystem
designsystem

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.

designsystem
designsystem

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.

designsystem
designsystem
designsystem

Filters & Menu

We placed components that we use often in a "Quick Start" section, so the designers could pick them instantly.

designsystem

Inputs

I created the "Inputs" component while thinking ahead it should be a versatile element, and being used in various versions and situations.

designsystem

More components

Few more useful components I created for the Design System.

designsystem
designsystem
designsystem
designsystem
designsystem
designsystem
designsystem
designsystem
designsystem

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.

designsystem
sidebar navigation
Navigation

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

designsystem

Buyer's pipline

designsystem

Upload leads

designsystem

Tasks

designsystem
bottom of page