Kcalmar: jeden jadłospis, dwie perspektywy

Projektowałem Kcalmar Pro dla dietetyków oraz aplikację mobilną i wersję webową dla pacjentów. Po stronie dietetyka pracowałem nad narzędziami do układania jadłospisów i pracy z potrawami. Po stronie pacjenta projektowałem dostęp do przygotowanego planu i listy zakupów.

Moja rola: Pierwszy UX designer w zespole Kcalmar.pro, od lutego 2021 do marca 2024. Projektowałem UX/UI istniejącej platformy, nowe funkcjonalności, aplikację mobilną i webową dla pacjentów oraz podstawowy Design System. Współpracowałem z PM, dietetyczkami, developerami i testerem.
Rezultat: Projekty modułów platformy, szablony PDF i opublikowana aplikacja pacjenta.

Przegląd Kcalmara: narzędzia dietetyka oraz aplikacja pacjenta na telefonie i w przeglądarce.

Redesign odbywał się razem z rozwojem produktu

Kcalmar miał już działające narzędzie dla dietetyków. Zespół otrzymywał zgłoszenia użytkowników i rozwijał kolejne funkcjonalności. Dołączyłem, żeby uporządkować moduły i sposób korzystania z interfejsu.

Rozmowy z dietetyczkami w zespole pomagały mi poznawać ich pracę. Doprecyzowywaliśmy, jakie informacje powinny znaleźć się na ekranie i jak są wykorzystywane podczas przygotowywania jadłospisu.

Potrawa łączy składniki, ilości i sposób przygotowania

W Kcalmar Pro pracowałem nad narzędziami używanymi podczas przygotowywania jadłospisów. Katalog potraw pozwala przeglądać dostępne pozycje i ich wartości odżywcze. W edycji potrawy składniki, ilości, liczba porcji i sposób przygotowania są zebrane w jednym widoku.

Pracowałem również nad katalogami diet, kopiowaniem jadłospisów, widokiem tygodniowym i szablonami PDF. Czytelne rozróżnienie posiłków, podsumowań oraz notatek było istotną częścią tej pracy.

Edycja potrawy: składniki, ilości i sposób przygotowania w jednym widoku.

Aplikacja pacjenta skupia się na konkretnym dniu

Wcześniejsza aplikacja pacjenta od dawna nie była rozwijana. Pracowaliśmy nad nową wersją, w której można korzystać z jadłospisu przygotowanego przez dietetyka. Projektowałem sposób prezentacji posiłków i dziennych komentarzy oraz ikonografię.

W aplikacji najważniejsze było odczytanie planu na konkretny dzień. W platformie dietetyka te same informacje są częścią pracy nad całym jadłospisem.

Aplikacja pacjenta pokazuje plan i komentarz dla wybranego dnia.

Pacjent może korzystać z jadłospisu także w przeglądarce

Wersję webową dla pacjentów projektowałem z takim samym zakresem funkcjonalności jak aplikację mobilną. Dopasowałem układ do większego ekranu: lista posiłków pozostaje obok szczegółów wybranego dania, składników i sposobu przygotowania.

Lista posiłków obok szczegółów wybranego dania w wersji webowej.

Lista zakupów pomaga przejść od jadłospisu do produktów

Projektowałem także listę zakupów dla pacjenta. W aplikacji mobilnej produkty są ułożone w grupach, a poszczególne pozycje można odhaczać. W wersji webowej lista korzysta z większej przestrzeni i układu w kilku kolumnach.

Lista zakupów w aplikacji mobilnej: grupy produktów i odhaczanie pozycji.

Podstawowy Design System wspierał kolejne funkcje

Zbudowałem bibliotekę komponentów i zasady wizualne, które miały pomagać w utrzymaniu spójności interfejsu. Dopracowywałem również kolorystykę, w tym przyciemniłem turkus używany w produkcie z myślą o kontraście.

Był to podstawowy Design System rozwijany w działającym produkcie. Uczyłem się wtedy, jak przygotowywać komponenty, z których zespół będzie mógł korzystać przy następnych funkcjach.

Handoff obejmował zachowanie interfejsu

Przekazywałem prototypy pokazujące zachowanie elementów i doprecyzowywałem szczegóły podczas pracy zespołu. Tester sprawdzał implementację względem Figmy.

W kolejnych projektach zacząłem dokładniej dokumentować zachowanie interfejsu i sprawdzać implementację z zespołem.