O projekcie
Rebranding i wdrożenie nowego interfejsu platformy HejDoktorze
Zrealizowaliśmy kompleksowe wdrożenie nowej identyfikacji wizualnej platformy medycznej HejDoktorze. Projekt stanowił kolejny etap rozwoju stworzonego wcześniej systemu do obsługi e-konsultacji, e-recept i e-zwolnień online.
Poprzednia wersja platformy wykorzystywała przede wszystkim zielono-żółtą kolorystykę. W ramach rebrandingu została ona zastąpiona nowym kierunkiem wizualnym opartym na odcieniach niebieskiego i fioletu, charakterystycznej typografii oraz ilustracyjnym bohaterze marki.
Koncepcja graficzna i główne założenia identyfikacji zostały przygotowane przez grafika klienta i przekazane nam w formie projektu w Figmie. Naszym zadaniem było przełożenie tego kierunku na kompletny, responsywny i funkcjonalny interfejs działającej platformy.
Wdrożenie nie ograniczało się wyłącznie do zmiany wyglądu strony głównej. Nowy styl został przeniesiony również na proces zamawiania usług medycznych, formularze, ekrany pośrednie, płatności, system logowania, okna modalne oraz panel użytkownika. Dzięki temu wszystkie elementy platformy tworzą obecnie jedno spójne doświadczenie.
Zakres prac
Wdrożenie projektu z Figmy
Odwzorowaliśmy przekazane projekty graficzne w działającej aplikacji webowej, zachowując założenia nowej identyfikacji wizualnej, układ treści, typografię, kolorystykę oraz charakterystyczne elementy ilustracyjne.
Projekt z Figmy stanowił podstawę do przygotowania nowych widoków i komponentów, jednak poszczególne rozwiązania musiały zostać również dostosowane do rzeczywistych procesów oraz funkcji działającego systemu medycznego.
Rebranding strony głównej
Przebudowaliśmy główną stronę platformy, wprowadzając nową sekcję hero, odświeżoną komunikację oraz formularz pozwalający szybko rozpocząć proces zamawiania e-recepty, e-zwolnienia lub e-konsultacji.
Istotnym elementem nowego wizerunku stał się przygotowany przez grafika klienta bohater marki. Ilustracje zostały odpowiednio rozmieszczone i wdrożone w interfejsie tak, aby wspierały komunikację, ułatwiały odbiór strony i wyróżniały markę na tle standardowych platform telemedycznych.
Nowa kolorystyka i typografia
Dotychczasową zielono-żółtą identyfikację zastąpiliśmy spokojniejszą paletą opartą na odcieniach niebieskiego, granatu i fioletu. Nowa kolorystyka została zastosowana w przyciskach, formularzach, kartach, komunikatach, elementach nawigacyjnych oraz stanach aktywnych.
Dostosowaliśmy również hierarchię typograficzną, aby zachować charakter projektu graficznego, a jednocześnie zapewnić odpowiednią czytelność nagłówków, opisów, etykiet i komunikatów systemowych.
Przebudowa procesu wyboru usługi
Dostosowaliśmy formularze umożliwiające wybór e-recepty, e-zwolnienia i e-konsultacji. Użytkownik może rozpocząć proces bezpośrednio ze strony głównej, wyszukać lekarza, wskazać preferowaną formę kontaktu oraz przejść do kolejnych etapów zamówienia.
Poszczególne elementy formularza zostały wizualnie ujednolicone, aby proces był czytelny i nie wymagał od użytkownika domyślania się, jaki krok powinien wykonać w następnej kolejności.
Rozbudowany moduł wyboru objawów
Nowy interfejs objął również mechanizm pozwalający użytkownikowi wskazać dolegliwości przed rozpoczęciem konsultacji. Formularz umożliwia wybór płci, wyszukiwanie objawów oraz określenie obszaru ciała, którego dotyczy problem.
Proces został zaprojektowany w taki sposób, aby nawet bardziej rozbudowany formularz medyczny pozostał przejrzysty, intuicyjny i łatwy w obsłudze.
Dostosowanie wieloetapowych formularzy medycznych
Nowa identyfikacja została przeniesiona na cały proces składania zamówienia. Obejmował on między innymi wybór kategorii problemu, wskazanie objawów, uzupełnienie formularza medycznego oraz podanie danych wymaganych do realizacji konsultacji.
Wprowadziliśmy czytelne oznaczenie kolejnych etapów, aktywnych pól, wybranych odpowiedzi oraz elementów wymagających uzupełnienia. Pozwala to użytkownikowi łatwiej kontrolować postęp i zrozumieć strukturę całego procesu.
Przebudowa logowania i rejestracji
Dostosowaliśmy do nowej identyfikacji wizualnej ekrany logowania, rejestracji oraz odzyskiwania hasła. Formularze zostały ujednolicone z pozostałymi elementami systemu i połączone z charakterystycznymi ilustracjami marki.
W projekcie zachowaliśmy również możliwość logowania za pomocą konta Google, integrując ją z nowym wyglądem ekranu i jego hierarchią wizualną.
Dostosowanie płatności i stron pośrednich
Nowy wygląd został wdrożony również na ekranach związanych z podsumowaniem zamówienia i płatnością za usługę. Dostosowaliśmy formularze, komunikaty, statusy oraz strony pośrednie pojawiające się pomiędzy kolejnymi etapami procesu.
Szczególny nacisk położyliśmy na zachowanie spójności wizualnej także w tych częściach systemu, które często nie są uwzględniane w podstawowych projektach strony głównej, a mają duże znaczenie dla komfortu użytkownika i finalizacji zamówienia.
Przebudowa okien modalnych i komunikatów
Zaktualizowaliśmy wygląd okien modalnych, potwierdzeń, ostrzeżeń i komunikatów systemowych. Wszystkie elementy zostały dostosowane do nowej palety kolorystycznej oraz wspólnych zasad dotyczących typografii, przycisków i odstępów.
Dzięki temu użytkownik otrzymuje spójne wizualnie informacje niezależnie od tego, w którym miejscu platformy się znajduje.
Dostosowanie panelu użytkownika
Rebranding objął również panel pacjenta. Dostosowaliśmy jego widoki, nawigację, formularze i elementy związane z obsługą konta, historią zamówień oraz korzystaniem z usług medycznych.
Pozwoliło to uniknąć sytuacji, w której publiczna część platformy prezentowałaby nowy wizerunek, natomiast po zalogowaniu użytkownik trafiałby do interfejsu opartego na poprzedniej identyfikacji.
Ujednolicenie komponentów interfejsu
Na podstawie projektu graficznego ujednoliciliśmy wygląd najważniejszych elementów aplikacji, takich jak przyciski, pola tekstowe, pola wyboru, karty, zakładki, etykiety, komunikaty i elementy nawigacyjne.
Wspólne zasady zostały zastosowane w całej platformie, co ułatwia jej dalszy rozwój i pozwala zachować spójny wygląd podczas wdrażania kolejnych funkcjonalności.
Dostosowanie do urządzeń mobilnych
Poszczególne ekrany zostały przygotowane z myślą o różnych rozdzielczościach. Dostosowaliśmy układ formularzy, ilustracji, nawigacji i przycisków tak, aby proces zamawiania konsultacji pozostawał wygodny zarówno na komputerach, jak i urządzeniach mobilnych.
Testowanie wdrożenia
Po wdrożeniu nowego interfejsu sprawdziliśmy kluczowe procesy platformy, w tym wybór usługi, logowanie, rejestrację, formularze medyczne, płatności i działanie panelu użytkownika.
Testy obejmowały nie tylko zgodność wizualną z projektem, ale także poprawność działania poszczególnych funkcji po wprowadzeniu zmian w strukturze interfejsu.
Zastosowane technologie
Nowy interfejs został wdrożony w istniejącej aplikacji webowej opartej na technologiach React, Next.js i Node.js.
Projekt graficzny został przekazany w Figmie, która stanowiła podstawę do odwzorowania poszczególnych widoków, komponentów oraz zachowania interfejsu na różnych urządzeniach.
Dzięki wykorzystaniu komponentowej architektury możliwe było konsekwentne zastosowanie nowych zasad wizualnych w wielu częściach rozbudowanej platformy oraz przygotowanie jej na dalszy rozwój.
Cel projektu
Celem projektu było odświeżenie wizerunku HejDoktorze i stworzenie bardziej charakterystycznego, nowoczesnego oraz przyjaznego interfejsu, który lepiej odzwierciedla aktualny kierunek rozwoju marki.
Istotnym założeniem było wdrożenie nowej identyfikacji nie tylko na stronie głównej, ale w całym procesie korzystania z platformy. Użytkownik miał otrzymać spójne doświadczenie od pierwszego kontaktu ze stroną, przez wybór usługi i uzupełnianie formularza, aż po płatność, logowanie i późniejszą obsługę swojego konta.
Naszym zadaniem było jednocześnie zachowanie pełnej funkcjonalności istniejącego systemu i dopasowanie projektu graficznego do rzeczywistych procesów aplikacji medycznej.
Rezultat
Efektem prac jest kompleksowo odświeżona platforma medyczna, w której nowa identyfikacja wizualna została konsekwentnie zastosowana we wszystkich najważniejszych obszarach systemu.
HejDoktorze zyskało bardziej rozpoznawalny charakter, spójną niebiesko-fioletową kolorystykę oraz ilustracyjnego bohatera marki, który wspiera komunikację i nadaje platformie przyjazny wizerunek.
Zmiany objęły stronę główną, formularze medyczne, proces zamawiania usług, płatności, logowanie, ekrany pośrednie, okna modalne i panel użytkownika. Dzięki temu nowy branding funkcjonuje jako integralna część całego produktu, a nie jedynie warstwa wizualna nałożona na jego publiczną stronę.
Projekt pokazuje, jak można przeprowadzić rebranding rozbudowanej aplikacji webowej bez budowania systemu od początku, rozwijając istniejące rozwiązanie, zachowując jego funkcje i jednocześnie nadając mu całkowicie nowy, spójny kierunek wizualny.
