Przejdź do treści

Miropoix - landing page aplikacji SaaS

  • UI Design
  • Development
  • Web
  • Motion Design
Podgląd projektu Miropoix - landing page aplikacji SaaS

Podsumowanie projektu

Wstęp

Miropoix pomaga zespołom kuchennym zebrać codzienne potrzeby zakupowe w jednej liście, podzielonej według dostawców. Moim zadaniem było nadać działającemu produktowi wyraźniejszy charakter: odświeżyć UI, przygotować animacje i zaprojektować landing page.

Najważniejsze

Projekt w skrócie

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.

Design

Proces

Redesign aplikacji

Punktem wyjścia była aplikacja, która działała poprawnie, ale wizualnie nie budowała skojarzeń z gastronomią. Redesign miał nadać produktowi charakter bez utraty czytelności potrzebnej w pracy kuchni.

Kluczowe decyzje dotyczyły koloru, większych przycisków i animacji. Większe akcje miały praktyczny powód: kucharze często pracują szybko i nie zawsze w idealnych warunkach, więc interfejs musi być łatwy do trafienia.

Zaprojektowałam kluczowe widoki: dodawanie produktów, segregację zamówień według dostawców i akceptację próśb. Animacje wykorzystałam na landing page'u, żeby szybciej pokazać mechanikę aplikacji.

Strona internetowa

Równolegle przygotowałam landing page na bazie dostarczonego wireframe'u i tekstów. Moja odpowiedzialność obejmowała design, animacje i wdrożenie w stacku Vite, React i Tailwind CSS.

Live: https://miropoix.com/en/

Widok strony internetowej Miropoix

Wnioski

Czego się nauczyłam?

Ten projekt pokazał mi, że redesign nie zawsze oznacza dodawanie funkcji. Tutaj największą wartością było nadanie działającemu produktowi osobowości i czytelnego związku z branżą.

Jasny podział odpowiedzialności przy landing page'u przyspieszył pracę: wireframe i teksty dały bazę komunikacyjną, a ja mogłam skupić się na warstwie wizualnej, ruchu i wdrożeniu.

Praca z AI pomogła mi szybciej przejść od projektu do działającej strony, bez oddawania kontroli nad detalami wizualnymi.