Miropoix

redesign landing page aplikacji SaaS

Rola: UX/UI designer / Design Engineer
Typ: Projekt komercyjny
Narzędzia

Miropoix to aplikacja dla gastronomii, która pomaga zespołom kuchennym zbierać zapotrzebowanie na produkty i porządkować je według dostawców. Zaprojektowałam nową stronę produktu, odświeżyłam wybrane ekrany aplikacji do materiałów prezentacyjnych i wdrożyłam stronę przy wsparciu narzędzi AI.

Problem: Aplikacja rozwiązywała realny problem zamówień w kuchni, ale wizualnie była generyczna i nie budowała rozpoznawalnego charakteru marki.
Cel: Odświeżyć UI, zaprojektować landing page i nadać produktowi wyrazisty kierunek wizualny związany z branżą gastronomiczną.
Efekt: Powstały nowe widoki aplikacji, animacje, landing page i wdrożona strona internetowa dla Miropoix.

Punkt wyjścia

Projekt opierał się na istniejącym produkcie oraz dostarczonym wireframie i tekstach strony. Moim zadaniem było nadanie im wizualnej formy, przygotowanie materiałów prezentujących aplikację i przełożenie projektu na działającą stronę.

Dodatkowo odświeżyłam wybrane ekrany aplikacji potrzebne do pokazania produktu na stronie. Zakres tych zmian dotyczył materiałów prezentacyjnych, a nie przebudowy całej aplikacji.

Miropoix - porównanie aplikacji przed i po zmianach

Proces

Pracę rozpoczęłam od zapoznania się z działaniem produktu i uporządkowania jego prezentacji na podstawie otrzymanych materiałów. Następnie opracowałam kierunek wizualny strony oraz ekrany aplikacji ilustrujące najważniejsze działania.

Na tej podstawie przygotowałam animacje produktowe i przeszłam do wdrożenia strony. Połączenie projektowania z implementacją pozwoliło mi dopracowywać również zachowanie elementów i sposób prezentowania treści w przeglądarce.

Design i decyzje projektowe

Wyrazista, wąska typografia nagłówków nadaje Miropoix charakter i odróżnia markę od generycznych narzędzi SaaS. Zestawiłam ją z Interem w tekstach i elementach interfejsu, aby zachować czytelność informacji. Paletę oparłam na złamanej bieli i czerni, a pomarańczowy akcent wykorzystałam do wyróżnienia głównych działań.

Odświeżając wybrane ekrany, uwzględniłam warunki pracy kucharzy. Większe przyciski i obszary klikalne miały ułatwiać szybką obsługę, również przy zabrudzonych dłoniach. Hierarchia informacji eksponuje zamówienia, dostawców i działania wymagające reakcji. Przygotowane na potrzeby strony widoki pokazują różne stany aplikacji: pustą listę, zgłoszenia oczekujące na akceptację i zamówienia pogrupowane według dostawców.

Wdrożenie

Stronę wdrożyłam przy wsparciu narzędzi AI, wykorzystując React, Vite i Tailwind CSS. Narzędzia pomagały mi w przekładaniu projektu na kod, a po mojej stronie pozostawały decyzje wizualne, weryfikacja efektu i dopracowanie implementacji.

Rezultat i wnioski

Powstała działająca strona, która łączy nową warstwę wizualną z prezentacją interfejsu i animacjami produktowymi. Mój zakres objął cały etap od projektu wizualnego po wdrożenie strony.

Projekt był okazją do połączenia UI, motion i pracy z kodem wspieranej przez AI. Ważnym doświadczeniem było dopracowywanie projektu bezpośrednio w przeglądarce, gdzie mogłam ocenić nie tylko statyczny układ, ale też responsywność i zachowanie animacji.