Merope
Projekt UX/UI aplikacji SaaS konkursowej
Rola w projekcie
UI/UX/Prototyp/Video
O projekcie
Aplikacja dla Organizatorów Konkursów
Klient
Merope
O projekcie
O projekcie
Merope jest skierowana dla organizacji konkursów muzyki klasycznej. Pozwala dodawać konkursy i wprowadzać oceny do systemu. Wcześniej dodawanie wyników odbywało się ręcznie, co prowadziło do nieuczciwych zagrań. Rozwiązaniem jest Merope.
Merope jest skierowana dla organizacji konkursów muzyki klasycznej. Pozwala dodawać konkursy i wprowadzać oceny do systemu. Wcześniej dodawanie wyników odbywało się ręcznie, co prowadziło do nieuczciwych zagrań. Rozwiązaniem jest Merope.
Aplikacja pozwoli dodać profile konkursów i kandydatów
Jurorzy mogą przypisywać punkty kandydatom w konkursach
Konkursy są podzielone na rundy
Kandydaci mogą dołączyć do konkursów i wygrywać nagrody pieniężne
1 etap obejmował
1 etap obejmował
Ponad 50 makiet hi-fi oraz prototyp ścieżki organizacji
Ponad 50 makiet hi-fi oraz prototyp ścieżki organizacji
Poniżej film przedstawiający sposób poruszania się po stronie po zalogowaniu Organizatora konkursu do panelu.
Poniżej film przedstawiający sposób poruszania się po aplikacji po zalogowaniu organizatora konkursu do panelu.
Poniżej film przedstawiający sposób poruszania się po stronie po zalogowaniu Organizatora konkursu do panelu.
Jak to działa
Jak to działa
Organizator ma możliwość personalizowania swojego profilu jak i wizytówek konkursów (np. określa nagrody). Dzieli on swoje konkursy na podstawie drzewa kategorii (np. muzyka klasyczna). Dla każdego konkursu przypisuje on określone rundy w zakładce "Stages", które są widoczne dopiero po wejściu w dany konkurs. Następnie z poziomu zakładki "Stages" może przejść do funkcjonalności "Scores" gdzie może aktualizować oceny dla kandydatów, które są przypisywane przez jurorów (juror wpisuje je sam z poziomu panelu). Finalnie może zobaczyć pozostałe funkcje takie jak kalkulacje i rezultaty (lista kandydatów, którzy awansowali do kolejnej rundy konkursu)
Organizator ma możliwość personalizowania swojego profilu jak i wizytówek konkursów (np. określa nagrody). Dzieli on swoje konkursy na podstawie drzewa kategorii (np. muzyka klasyczna). Dla każdego konkursu przypisuje on określone rundy w zakładce "Stages", które są widoczne dopiero po wejściu w dany konkurs. Następnie z poziomu zakładki "Stages" może przejść do funkcjonalności "Scores" gdzie może aktualizować oceny dla kandydatów, które są przypisywane przez jurorów (juror wpisuje je sam z poziomu panelu). Finalnie może zobaczyć pozostałe funkcje takie jak kalkulacje i rezultaty (lista kandydatów, którzy awansowali do kolejnej rundy konkursu)
Intuicyjny samouczek
Intuicyjny samouczek
Tutoriale, które prowadzą użytkownika przez panel
Tutoriale, które prowadzą użytkownika przez panel
Za pomocą tutoriali wyjaśniłem w jaki sposób Organizator konkursu ma korzystać z funkcji podziału konkursu na rundy, uzupełniania punktacji jak i rezultatów.
Za pomocą tutoriali wyjaśniłem w jaki sposób Organizator konkursu ma korzystać z funkcji podziału konkursu na rundy, uzupełniania punktacji jak i rezultatów.
Tutorial wyjaśnia funkcję przydzielania rund do konkursu, po to aby użytkownik miał swiadomość, że ta funkcjonalność pojawia się dopiero po wejściu profil konkursu, ponieważ podział na rundy jest ściśle związany z danym konkursem. Dzięki temu, że wybór rund jest widoczny po lewej stronie Użytkownik porusza sie intuicyjnie po platformie i ma możliwość zmiany rundy w każdym momencie.
Tutorial wyjaśnia funkcję przydzielania rund do konkursu, po to aby użytkownik miał swiadomość, że ta funkcjonalność pojawia się dopiero po wejściu profil konkursu, ponieważ podział na rundy jest ściśle związany z danym konkursem. Dzięki temu, że wybór rund jest widoczny po lewej stronie Użytkownik porusza sie intuicyjnie po platformie i ma możliwość zmiany rundy w każdym momencie.
Jak już Organizator doda a poźniej wybierze daną rundę , to pojawia się kolejny widok, który informuje użytkownika o nowych funkcjonalnościach, czyli o możliwości przejścia do pozostałych zakładek.
Jak już Organizator doda a poźniej wybierze daną rundę , to pojawia się kolejny widok, który informuje użytkownika o nowych funkcjonalnościach, czyli o możliwości przejścia do pozostałych zakładek.
Teraz organizator konkursu i jurorzy mogą przypisywać punkty poszczególnym kandytatom, sprawdzać kalkulacje a finalnie podejrzeć który kandydat awansował do kolejnej rundy. Dzięki temu mamy zbudowany solidny, prosty i intuicyjny proces dojścia od punktu A do Z pomimo złożonej i nietypowej funkcjonalności. Doszedłem do wniosku, że widget z przełączaniem rund do konkursu musi być wyróżniony i zawsze widoczny z lewej strony (po wejściu w profil konkursu) aby ułatwić poruszanie się po aplikacji.
Teraz organizator konkursu i jurorzy mogą przypisywać punkty poszczególnym kandytatom, sprawdzać kalkulacje a finalnie podejrzeć który kandydat awansował do kolejnej rundy. Dzięki temu mamy zbudowany solidny, prosty i intuicyjny proces dojścia od punktu A do Z pomimo złożonej i nietypowej funkcjonalności. Doszedłem do wniosku, że widget z przełączaniem rund do konkursu musi być wyróżniony i zawsze widoczny z lewej strony (po wejściu w profil konkursu) aby ułatwić poruszanie się po aplikacji.
2 etap obejmował
2 etap obejmował
Ponad 30 makiet hi-fi oraz prototyp ścieżki kandydata
Ponad 30 makiet hi-fi oraz prototyp ścieżki kandydata
Ścieżka kandydata poniżej
Ścieżka kandydata poniżej
Pełna responsywność
Pełna responsywność
Wersja mobilna i tabletowa
Wersja mobilna i tabletowa
W ramach zlecenia doprojektowałem wersje mobilne i tabletowe.
W ramach zlecenia doprojektowałem wersje mobilne i tabletowe.
Design system
Design system
Style Guide ułatwiający i przyśpieszający pracę developerom
Style Guide ułatwiający i przyśpieszający pracę developerom
Stworzyłem wykaz elementów na podstawie MUI Design System
Stworzyłem wykaz elementów na podstawie MUI Design System
Wersje kolorystyczne
Wersje kolorystyczne
Light Mode vs Dark Mode
Light Mode vs Dark Mode
Nie mogło się obejść bez popularnego trybu ciemnego.
Nie mogło się obejść bez popularnego trybu ciemnego.
Film promocyjny
Film promocyjny
Film promocyjny
Film promocyjny
Skierowany dla Kandydatów konkursów
Skierowany dla Kandydatów konkursów
Rekomendacja
Rekomendacja
Rekomendacja klienta
Rekomendacja klienta
Następny projekt
Następny projekt