Merope
Merope
Merope
Rola w projekcie
UI/UX/Prototyp/Video
O projekcie
Aplikacja dla Organizatorów Konkursów
Klient
Merope
Wyzwanie
Wyzwanie
Wyzwanie
Wyzwanie
Jedną z usług aplikacji Merope jest możliwość dodawania konkursów i wprowadzania ocen do systemu. Wcześniej dodawanie punktacji odbywało się ręcznie przez co dochodziło do nieuczciwych zagrywek. Rozwiązaniem jest Merope.
Merope oferuje możliwość każdemu, by wziąć udział w konkursie i wygrać nagrody pieniężne.
Jedną z usług aplikacji Merope jest możliwość dodawania konkursów i wprowadzania ocen do systemu. Wcześniej dodawanie punktacji odbywało się ręcznie przez co dochodziło do nieuczciwych zagrywek. Rozwiązaniem jest Merope.
Merope oferuje możliwość każdemu, by wziąć udział w konkursie i wygrać nagrody pieniężne.
1 etap
1 etap
Prototyp ścieżki Organizacji Konkursu
Prototyp ścieżki Organizacji Konkursu
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
2 etap
Userflow Kandydata
Userflow 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