Case study · Dimark · Design system
Jeden system projektowania dla rodziny aplikacji przemysłowych
Aplikacje firmy Dimark do obsługi lotniskowych systemów bagażowych powstawały stopniowo i każda z nich wyglądała inaczej. Stworzyłem dla nich od podstaw spójny design system: kolory, typografię, rozmiary, komponenty i ich stany, udokumentowane w Figmie, dzięki czemu programiści mogli budować nowe ekrany z gotowych elementów.
DiMS i BRS – dwie aplikacje z rodziny Dimark oparte na tym samym systemie
Firma
Dimark
Czas trwania
maj 2022 – sty 2024
Moja rola
UI/UX designer, jedyna projektantka w zespole
Zespół
Team leader, developerzy front-end i back-end, tester
Zakres
DiMS oraz inne aplikacje z rodziny produktów Dimark
Metoda
Atomic design, stworzony i udokumentowany w Figmie
01 · Problem
Każda aplikacja wyglądała inaczej
Przed wdrożeniem design systemu każda aplikacja z rodziny Dimark wyglądała inaczej, a nowe ekrany projektowano za każdym razem od zera. Bezpośrednio przy linii produkcyjnej inżynierowie serwisu zmagali się ze zbyt małymi przyciskami i niskim kontrastem na tabletach.
Dla biznesu
Jedna spójna rodzina produktów, szybsze wdrażanie nowych funkcji i fundament przygotowany na wymogi dostępności.
Dla inżynierów serwisu
Większe elementy dotykowe ułatwiające pracę w rękawicach oraz czytelny kontrast na tablecie.
02 · Fundamenty
Kolor, rodzaj i rozmiar, wybierane raz
Zacząłem od fundamentów i przygotowałem je jako współdzielone style w Figmie: pomarańczową paletę dla marki i kluczowych akcji, skalę szarości dla tekstu i powierzchni, jeden krój pisma oraz trzy rozmiary komponentów. Ta sama wartość oznaczała to samo w każdej aplikacji.
Główny · Pomarańczowy
700
500
400
300
200
Neutralny · Szary
700
500
400
300
150
100
Krój · Montserrat
Etykieta
SemiBold 16 / 24
Zadanie zaplanowane
Tekst
Medium 16 / 24
Wymiana części eksploatacyjnych
Tabela
Medium 14 / 20
18-05-2023 17:14 · 2:30 h
Przycisk
SemiBold 12, tracking 2
FILTRUJ
Rozmiary · 32 / 42 / 48 px
32 px
Mały
42 px
Średni
48 px
Duży · dotyk na tablecie
03 · Komponenty
Od atomów do stron
Stworzyłem tę bibliotekę w oparciu o metodologię atomic design, zgodnie z pięcioma poziomami Brada Frosta: atomami, cząsteczkami, organizmami, szablonami i stronami. Zacząłem od najmniejszych elementów, a następnie łączyłem je w większe całości. Zmiana wprowadzona w przycisku czy statusie automatycznie aktualizowała każdy ekran, który go używał – w każdej aplikacji.
Atomy · Przyciski
Filtr
Domyślny
Filtr
Hover
Filtr
Wciśnięty
Najmniejsze elementy: przyciski, pola wyboru, ikony i flagi priorytetów – każdy w stanie domyślnym, po najechaniu kursorem i wciśnięciu.
Molekuły · Filtr statusów
Zaplanowane
W toku
Zrobione
Nieudane
Wygasłe
Wstrzymane
Atomy połączone w działające elementy: filtry statusu, wyszukiwanie, sortowanie i przełącznik tygodni w planerze.
Organizmy · Wiersze zadań w planerze
Kliknij zdjęcie, aby je powiększyć.
Szablony · Siatka plannera
Układ bez rzeczywistych danych: dni, godziny i tory zespołów, gotowy do wypełnienia zadaniami.
Strony · Planer w użyciu
Ten sam szablon z rzeczywistymi zadaniami, statusami oraz listą zadań zespołu. To ekran, z którego inżynierowie serwisu korzystają każdego dnia. Nazwiska zostały zamazane.
04 · Stany i kolor
Sześć statusów, każdy z kolorem i nazwą
Zadanie w planerze przechodzi przez sześć statusów. Każdy z nich ma przypisany własny kolor, który nigdy nie występuje sam – obok zawsze wyświetla się nazwa statusu. Komponenty są również dostępne w różnych wariantach, takich jak Domyślny, Lista i Wciśnięty, a niektóre, na przykład przyciski dni w planerze, w wersji jasnej i ciemnej.
Zaplanowane
W toku
Zrobione
Nieudane
Wygasłe
Wstrzymane
Karty zadań · każdy status, Domyślny i Wciśnięty
05 · Dostępność
Zaprojektowany do pracy na linii
Dostępność była częścią systemu od samego początku, a nie tylko formalnością na koniec. Wyjaśniłem też te zasady zespołowi, dzięki czemu były one zachowane również podczas tworzenia nowych ekranów.
Praca w rękawicach
→ Pola dotyku min. 48 px, główne akcje na dole ekranu
Niski kontrast na tablecie
→ Paleta sprawdzona pod WCAG AA
Statusy rozróżniane kolorem
→ Kolor plus nazwa statusu, nigdy sam kolor
06 · Handoff
Nowe ekrany z udokumentowanych elementów
Każdy komponent został udokumentowany w Figmie wraz z jego rozmiarami, wariantami i stanami. Programiści tworzyli nowe ekrany z tych elementów, zamiast czekać na zaprojektowanie każdego widoku od zera.
07 · Rezultat
Co zmienił system
Jedna rodzina produktów
→ DiMS i inne aplikacje firmy Dimark współdzielą jeden zestaw komponentów
Nowe ekrany
→ Zbudowane z udokumentowanych komponentów, a nie od zera
Dostępność
→ Baza gotowa na wymagania WCAG