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 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