UX-UI designer Yuliia Bondareva

Overview
Design System
Prototypes
Reflections

Project Overview

One team- a desktop application for a CRM, customizable for any field of activity, which is easily adaptable for any company.

Design System

The Design system includes a variety of elements, such as typography, color palettes, iconography, grids, UI components, and design patterns. Also I was responsible for detailed documentations and guidelines that outline how these elements should be used, ensuring consistency and reducing the likelihood of design inconsistencies or errors. The main goal of the design system is to improve collaboration and productivity between designers and developers by providing them with a common language and set of tools. Having a set of predefined elements allows the team to work more efficiently, reduce redundant work, and create higher-quality projects that are easier to maintain and scale over time.

🔍 Research of other companies design systems

I used best practices of the following design systems in my work:

Material Design
Atlassian.design
IBM Design Language

Key decisions

Together with our team, we decided that we would use the Material Design System as the basis for our system. This decision was made jointly with our engineering team.

✏️ The elements of style guide

Colors
Typography
Spacing and Layouts
Icons and Illustrations
Images and Patterns

Component librarie consists of reusable UI elements like buttons, forms, cards, and navigation menus that help create cohesive and consistent designs. These libraries act as a central hub for all the components within a design system.

Typically, each component includes the following:

Name:A unique identifier to prevent misunderstandings.
Description:An explanation of the component’s purpose and usage, often accompanied by guidelines or best practices.
States: Visual representations of the component in various conditions, such as hover, click, or disabled states.

Typography

Roboto font family

Colour Palette

High-Fidelity prototypes

Authorization.

Projects.Category selection.

Projects. Task feed.

Projects. Tasks.

Projects. Editing a task.

Chat.

Chat. Location.

Mail.

Telephony.

Settings

Organization.

Staff.

Reflections from this project

The use of a component approach is a work technique that increases the quality and speed of user interface design development.
Reduced development cost.
Organization of joint work of designers. Allows you to organize the work of several designers on one project without the costs associated with different approaches to work.
Reduced errors. In the process of implementing the interface, details are revealed that were not taken into account in the design process.
Team scaling. Simplifies the integration of new team members into the development process.