Fortis

MONOPOLy.ONLINE

Design System
KYC for partners

Transportation company Monopoly is the second largest park in Russia but first in many effectiveness key metrics. Fortis started out in 2015 as an IT service structure for Monopoly group business-processes automatization.

Today Fortis is autonomous IT company. Our main product is platform for integration independent carriers into big supply chains.

Team

Artem Gendler (Design System Lead)
Vitaly Shmelev (Head of Design)
Tatiana Kulgeiko (Product Designer)

Objective

Create Design System

Time

3 months

We've got more than 3000 orders a day
If we want to have 3 times more we have create easy to use system

Day I started we have two frameworks onboard Material Design and Ant. Both don't meet our needs.
Our material library was deeply customized and all changes in it was to expensive. Also it was really unstable. Ant is hardly customizable by design. And we don't want third party dependencies.

So we decide to create our own design system. ⭐

One of first challenges was choosing the way we want to create and integrate design system.

Thanks God we found keys to developers hearts and we go section by section way. Also we decided to start from new sections, and when we have significant changes in old sections we plan to redesign them from scratch.

First of all we have to understand which components do we need and how to prioritize them.
I have reviewed all interfaces on production and interfaces in design phase to figure out exact components list.
So we have phases Core (start), Navigation (step 2), Auction (step 3), Shipper (step 4) and KYC (step 5)

Atoms

Button
Card
Divider
Icon button
Mobile list
Profile icon
ReadItem
Route line
Tags
Text
Toggle

Molecules

Alert
Anchor menu
Checkbox
Dropdown list
Input
Paging
Search mobile
Suggest
Tabs
Timeline

Organisms

SMS validation
Mobile navigation bar
Modal pop-up
Navigation menu

Steps in creating components

Core

Core components without them we can't do anything. Sso we started with them.

Atoms:
Card – simple white card with rounded corners and shadow.
Button – I'm sure you know what is it. But we know what it can be. Small or big, colored, with or without icon. You decide.
Divider – Simple line. With color and margins. Also can be vertical.

Molecules:
Input – that's tricky one. We have about 11 parameters and 1536 states.
Dropdown – a bit easier than a previous one.

Navigation

All components needed for our navigation menu.

Atoms:
Profile icon – two letters and a round.
Icon button – icon as a button. Pure minimalism.
Tabs – two color schemes, two sizes.

Molecules:
Search mobile – input with special behavior

Organisms:
Navigation menu – whole bunch of molecules, combined create reusable navigation menu for whole platform
Mobile navigation menu – all the same but for mobile.

Auction

Next big section we create was cargo auction. It's place where carriers can book the loads 24 hours a day.

Atoms:
Dot line – special dotted line which we need for our timeline molecule.
Tag – small but attractive text and rectangle behind it
Toggle – left or right. Switch or not.

Molecules:
Paging – 1 2 3 ... 99 something like that
Timeline – we have a lot of points, and data about every point
Modal – remember the card I mentioned above.That's it an blurry background and buttons
Alert – colored and important piece of information
Suggest – or autocomplete. we cannot decide which name is correct
Anchor menu – menu navigates you on one bug page

Shipper

Shippers cabinet allow to manage bookings and truck load online day and night.

Atoms:
Float Button – you saw it in Material Design guidelines
Divider v2 – now with text(if horizontal)

Molecules:
Stepper – we have sequences, so we have to create stepper elemet

KYC

We build our trusted network of carriers, as we say in Russia trust but verify. We create special carrier verification process and in most of cases we can go throw all checks in less than a 3 hours.

Atoms:
Upload – special button allow you to upload something. With drag'n'drop area
Document – special small view of uploaded file
Radio button – it can't help with decision, but eyecathing