aplikacja webowa | aplikacja mobilna | branding

Aplikacja do efektywnego zarządzania drukarkami

Princity

opowieść

Princity to aplikacja, która wykrywa drukarki w sieci lub przez USB, sczytuje z nich wszystkie dane i dzięki monitorowaniu pozwala oszczędzać na kosztach druku i eksploatacji urządzeń. To rozwiązanie, które wykorzystują firmy wynajmujące drukarki, aby kompleksowo zarządzać całą flotą swoich urządzeń.


Princity
to polski startup o międzynarodowym zasięgu, dla którego zaprojektowaliśmy cały design system i zaimplementowaliśmy go w aplikacji webowej, aplikacji mobilnej oraz w materiałach promocyjnych. Zaprojektowaliśmy logo oraz cały klucz wizualny marki.

Poznaj najbardziej zaawansowane narzędzie do efektywnego zarządzania drukarkami.

Princity jest używane głównie przez firmy oferujące tzw kontrakty MPS (Managed Print Services), czyli zajmujące się dzierżawą drukarek oraz dbaniem o ich eksploatację (naprawy, wymiana tuszu, statystyki wykorzystania, etc). Taka firma musi mieć możliwość zarządzania flotą ogromnej liczby drukarek z rozbudowanym systemem raportowym oraz łatwością szybkiej analizy sytuacji w dowolnej firmie w konkretnej drukarce.

Projektowanie aplikacji Princity to przede wszystkim ułatwienie korzystania z ogromnej liczby danych i możliwość szybkiej reakcji na pojawiające się zgłoszenia błędów i awarii. Aplikacja webowa to główne narzędzie do zarządzania dla firmy MPS. Aplikacja mobilna natomiast ułatwia podłączanie klientowi drukarki do sieci.

UI KIT, Mockup i Warsztaty

Zrozumienie aplikacji i rozrysowanie wszystkich jej aspektów było możliwie dzięki przeprowadzeniu serii warsztatów i narysowaniu wszystkich ścieżek użytkowników - do tego użyliśmy programu Whimsical. Na bazie tego powstał tzw. wireframe (szkic aplikacji) a po serii testów powstały pierwsze mockupy.
Mieliśmy do dyspozycji już istniejącą wersję aplikacji, a naszym zadaniem było ją przeprojektować z uwzględnieniem wszystkich uwag obecnych klientów oraz zespołu tworzącego produkt.
Równolegle do powstawania makiety powstawał UI KIT, czyli zestaw elementów używanych w aplikacji webowej oraz później mobilnej. Stanowiło to uzupełnienie zaprojektowanego przez nas brandingu, które razem tworzą Design System produktu Princity.

UI KIT to nie tylko sposób na uporządkowanie i trzymanie wizualnych zasad w aplikacji, ale również ogromna oszczędność czasu przy wdrażaniu kolejnych modułów i modyfikacji.

Dashboard. Sprawdzaj statystyki firm.

Pulpit (Dashboard) to pierwszy ekran, który użytkownik widzi w aplikacji webowej. Dla osoby zarządzającej flotą drukarek to miejsce, w którym może przeanalizować kondycję wszystkich urządzeń w dowolnej firmie, którą obsługuje.

Zaprojektowaliśmy dwie wersje pulpitu - ciemną i jasną, które można wymiennie używać. Przygotowaliśmy szereg autorskich ilustracji i wykresów, które miały lepiej zwizualizować dane i możliwie szybko zwrócić uwagę na pojawiające się problemy.

Struktura, tabele i projektowa konsekwencja

Princity zostało podzielone na obszary przedstawiające najważniejsze funkcjonalności projektu: zarządzanie firmami (klientami), drukarki, materiały eksploatacyjne, serwis i raporty. Stosowana przez nas konsekwencja w budowaniu widoków powoduje, że użytkownik szuka rozwiązań zawsze w tych samych miejscach - nazwa podstrony, szukajka, przyciski interakcji zawsze znajdują się w tych samych miejscach niezależnie od zakładki.

Tabele to najczęściej występujący element w projekcie. Dobór typografii, kolory czy interlinii ma maksymalnie zwiększyć czytelność dużej liczby danych, często pokazywanych w kilku linijkach. Kolor zielony typografii zawsze oznacza, że coś jest klikalne.

Dostęp do istotnych informacji w aplikacji wymaga szybkiego poruszania się pomiędzy zakładkami w obrębie danej podstrony jak i pomiędzy perspektywą konkretnej firmy lub drukarki. W związku z tym zdecydowaliśmy się wdrożyć dwa równoległe menu po lewej i po prawej stronie. Użytkownik może szybko wyszukać elementy zarówno globalnie (menu po prawej stronie) i szczegółowo (menu po lewej stronie)

Konfiguracja

Zarządzanie rozliczeniami to poza zarządzaniem sprawnością drukarek druga najważniejsza funkcjonalność Princity. Mnogość opcji została przez nas przedstawiona za pomocą bloków z ilustracją - aplikacja jest dużo czytelniejsza i przyjemniejsza do konfigurowania.

Agent - dodatkowa aplikacja

Agent to dodatkowa aplikacja, która po zainstalowaniu na środowisku klienta sczytuje dane z drukarek według ustalonego harmonogramu. Zwizualizowaliśmy agenta za pomocą robota, który w zależności od swojego statusu zmienia swój wygląd i kolor.

Drukarki - drugi dashboard

Sercem projektu są oczywiście drukarki, które podłączone do aplikacji Princity informują użytkownika o ich stanie eksploatacji. Najważniejszy jest poziom zużycia poszczególnych materiałów - drukarka wbrew pozorom posiada nie tylko tonery. Aplikacja pozwala śledzić i porównywać wszystkie urządzenia globalnie lub przeglądać szczegóły każdej z osobna.

W aplikacji posiadamy dwa dashboardy - jeden dla całej aplikacji, gdzie widzimy status działań we wszystkich obsługujących firmach. Drugi jest na podstronie z wybraną drukarką. Dzięki lewej i prawej nawigacji użytkownik może szybko przełączać się pomiędzy drukarkami oraz pomiędzy interesującą nas zakładką. Przełączając się pomiędzy zakładkami widzimy po lewej stronie dedykowany opis i ilustrację, która podpowiada użytkownikowi czemu dana podstrona jest poświęcona.

Zbliżająca się potrzeba wymiany materiału w drukarce powoduje, że pojawia się on w zakładce “zamówienia”. Użytkownik aplikacji wie, które zasoby drukarki wymagają wymiany i może w aplikacji przeprowadzić cały proces wysyłki nowego materiału do swojego klienta - wybrać kuriera, wydrukować kartę wysyłki, oznaczyć jako wysłane. Projektując dbaliśmy o to, aby proces maksymalnie uprościć dlatego zamówienia można wykonywać pojedynczo jak i zbiorczo.

Zilustrowane komunikaty

Komunikaty w aplikacjach pojawiają się zawsze. Kiedy mamy pusty wynik wyszukiwania, filtracji, nieuzupełnioną podstronę i w wielu innych typowych dla aplikacji scenariuszach użytkowych. Zadbaliśmy o to, aby każdy komunikat w aplikacji Princity był maksymalnie zrozumiały dla użytkownika - przygotowaliśmy dedykowane ilustracje i zadbaliśmy aby każdy opis był zrozumiały.

Materiały i zamówienia

Zaprojektowana przez nas wersja aplikacji to kolejna odsłona interfejsu Princity. Dzięki zebranym uwagom od użytkowników mogliśmy podejść do każdego widoku od nowa - projektując pod określone potrzeby i rozwiązując występujące realne problemy z poprzedniej wersji aplikacji.

Jedną z trudniejszych zakładek do zaprojektowania były materiały, które odzwierciedlają status materiałów w drukarkach, wskazują etap składania zamówienia oraz zarządzają przestrzenią magazynową.

Uprościliśmy w procesie projektowym podział na zakładki i wyróżniliśmy te, które wymagają uwagi użytkownika zawsze po wejściu do aplikacji - są one dodatkowo oznaczone kolorem i ikoną w menu po lewej stronie.

Większość danych w aplikacji pojawia się w formie tabeli, które użytkownik powinien maksymalnie szybko i łatwo odczytać, aby wiedzieć jak powinien zareagować w związku z danym alertem. Poszczególne statusy materiałów i zamówień posiadają dodatkowy piktogram, który pojawia się w wierszach tabeli jako pomoc do szybszego rozpoznania czego dotyczy problem.

Materiały i zamówienia to dwa obszary, które są ze sobą powiązane. Każdy zasób w drukarce ma jakiś status zamówienia, a szybkie odczytanie tego etapu jest dla użytkownika kluczowe. Zaprojektowaliśmy więc tabelę, w której materiały są wylistowane w kolejnych wierszach, a na jej dole pojawiają się kolejne kroki zamówienia. Dzięki użyciu kolorów wyróżniających każdy status zamówienia mogliśmy zamalować wiersz daną barwą - takie rozwiązanie usprawnia przeglądanie zasobów w kontekście etapu na jakim znajduje się dane zamówienie.

Autorski system raportów

Generowanie raportów to podstawowa funkcjonalność aplikacji, która wymagała od nas zaprojektowania autorskiego systemu tworzenia w zasadzie dowolnego raportu. Wraz ze zespołem wdrożeniowym po stronie projekty Princity udało nam się stworzyć założenia i ustalić jakie mamy możliwości.

Zaprojektowany przez nas system raportowy pozwala użytkownikowi dowolnie tworzyć raporty wybierając zakres, widoczne kolumny i wiersze. Poza konfiguratorem istnieje możliwość skorzystania z opracowanych wcześniej raportów w formie szablonów. Dodatkowo każdy raport można zapisać i ustawić jego automatyczną wysyłkę.

Aplikacja mobilna

Aplikacja mobilna to produkt systemu Princity, który jest przeznaczony dla firm, które same chcą zarządzać swoją flotą drukarek - bez pośrednika w postaci firmy MPS.

Pierwszym krokiem po zalogowaniu się do aplikacji jest podłączenie drukarek wykorzystując sieć wifi. Zaprojektowaliśmy ilustracje, które krok po kroku pomagają zrozumieć użytkownikowi w jakim momencie konfiguracji się znajduje

Status i szczegóły drukarek

Użytkownik aplikacji mobilnej zazwyczaj podłącza od kilku do kilkunastu drukarek. W porównaniu z aplikacją webową jest to liczba, która pozwoliło nam inaczej podejść do prezentacji drukarek, ich statusów oraz zużycia materiałów.

Proces zakupowy

Zaprojektowaliśmy również proces zamawiania nowych materiałów wraz z koszykiem i wyborem płatności. Do dyspozycji są wszystkie typowe dla aplikacji sklepowej opcje zakupowe.

Alerty

Użytkownik może śledzić stan swojej floty drukarek za pomocą pojawiających się alertów. Rozróżniliśmy kolorystycznie powiadomienia ze względu na ich stopień ważności oraz zaprojektowaliśmy sposób kontaktu z supportem.

Branding

Projekt Princity to nie tylko interfejs aplikacji, ale również logo i klucz wizualny, które także mieliśmy przyjemność zaprojektować. Braliśmy też udział w procesie powstawania nazwy.

Aplikacja Princity zarządza ogromną liczbą danych prezentowanych za pomocą tabel i wykresów. Od początku zależało nam żeby logo i klucz wizualny “zmiękczały” bardzo poważny tematycznie charakter projektu. Już sama nazwa i typografia w logo wskazuje, że marka jest zdecydowanie przyjazna i nie chce odstraszać użytkownika. W rozwiązaniach graficznych przeważają miękkie kształty i zaokrąglenia, a całość jest przepełniona ilustracjami i piktogramami.

Branding oraz UI kit tworzą rozbudowany Design System, który wyznacza cały sposóļ komunikacji Princity.

Przyjazne ilustracje

Dla każdej zakładki w aplikacji powstała osobna ilustracja. Część z nich jest animowana po to aby jeszcze lepiej opowiedzieć użytkownikowi czym dana część aplikacji się zajmuje. Bardzo nam zależało aby ilustracje nie były zbyt lekkie, ale na tyle przyjazne żeby pasowały do głównego klimatu marki. Wykorzystaliśmy główne kolory brandu - zielony i pomarańczowy, a w tle dodaliśmy background w postaci miękkich kształtów pojawiających się również w głównym menu.