Mate and Mate

Soft Telematika — Multi-Product Design System

Overview

About

Soft Telematika makes software for many industries, and over the years its products were built by different teams at different times. Each one looked and worked a little differently, and the company had no shared design language.

Brief

Audit the existing products, find where they disagree with each other and build one design system for all of them: colours, type, grids, components, charts and documentation that any team can pick up. The Oboz logistics platform shows the system at work.

Client

Soft Telematika

What we did

  • UX/UI design
  • User research
  • Design system
  • Multi-product architecture
  • Design tokens
  • Documentation and guidelines
Cover of the Soft Telematika UI components guide
Contents page of the design system guide
Colours section opener
Primary colour palette: dark, blue and grey swatches
Secondary palette with purple, green, red, orange and yellow
Typography section: fonts for desktop and mobile
Halvar Breitschrift Bold heading styles, H1 to H4
Heading link styles in Halvar Breitschrift Bold
Body text styles in Halvar Mittelschrift Regular
Inline text link states
Link styles for files and documents
Navigation text style in Halvar Breitschrift Regular
Mobile heading styles in Halvar Breitschrift Bold
Layouts and grids section opener
Padding and margin spec for a desktop module
Module spacing rules with padding markers
Four-column module layout with spacing guides
12-column desktop grid with gutters and margins
12-column grid for a narrower desktop screen
Wide desktop grid with column and gutter sizes
Four-column mobile grid
Text modules section opener
Text module with headings and paragraphs on the grid
Heading alignment options in text modules
Headings and subheadings with spacing markers
Text blocks with captions and highlighted notes
Mobile version of a text module
Heading alignment on mobile
Mobile headings and subheadings with spacing
Mobile text blocks with a highlighted note
UI elements and components section opener
Icon set drawn on a pixel grid
Text fields in default, focus, error and success states
Multi-line text areas
Number and range inputs with a dropdown
Dropdown selects with search and option list
Date and date range pickers
Checkboxes, radio buttons and button states
Notifications and tooltips
Table cell components and states
Data table with filters and row actions
Table header and highlighted row styles
Mobile tabs, slider and toggle switches
Mobile table with an item details view
Widgets section opener
Circular progress charts
Donut chart widgets with legends
Gauge and radial chart variations
Bar chart widgets with totals
Scatter plot widgets
Area and line chart widgets
Forms section opener
Registration form steps
Create event form variants
File upload form, empty and success states
Property cards section opener
Property card for a high-rise building with efficiency charts
Property card with interior photos and an efficiency gauge
Property card with key metrics and a donut chart
Dark theme property card with metrics and a building photo
Dashboards section opener
Oboz logistics dashboard with tiles for tenders, auctions and shipments
Oboz tenders panel with cost estimate and map
Oboz auction screen with a shipping container photo
Oboz dashboard on a laptop
Oboz client and carrier screens in dark and light themes
Oboz client and carrier selection screens
Laptop showing the Oboz client and carrier screens
Oboz mobile dashboard screens
Oboz mobile auction screens
Oboz mobile app on a phone
Oboz mobile screens for clients and carriers
Oboz mobile role selection screens
Oboz mobile profile on a phone
Fleet efficiency dashboard with donut, radar and line charts
Analytics dashboard with scatter plot, efficiency stats and calendar
Analytics dashboard with the navigation menu open
Oboz traffic analytics dashboard with a Sankey diagram
Slide about access to source files

Have a clear brief
or just an early idea?

Get in touch either way. We’ll help you shape the brief, define the scope and turn it into something real.