Merope

Merope

Merope

Rola w projekcie

UI/UX/Prototyp

O projekcie

Competition Organizers Application

Klient

Merope

Wyzwanie

Wyzwanie

Stworzenie aplikacji webowej dla Jurorów, Organizatorów konkursów

Stworzenie aplikacji webowej dla Jurorów, Organizatorów konkursów

Aplikacja pozwala na dodawanie punktów przez Jurorów i Organizatorów konkursów. Organizator może dodawać rundy, określać oceny dla kandydatów swojego konkursu. Ma dostęp do kalkulacji (statystyk) a finalnie do rezultatów konkursu.

Aplikacja pozwala na dodawanie punktów przez Jurorów i Organizatorów konkursów. Organizator może dodawać rundy, określać oceny dla kandydatów swojego konkursu. Ma dostęp do kalkulacji (statystyk) a finalnie do rezultatów konkursu.

Tutoriale

Tutoriale

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.

1 userflow

1 userflow

Tutoriale, które prowadzą użytkownika przez panel

Za pomocą tutoriali wyjaśniłem w jaki sposób Organizator konkursu ma korzystać z fukcjonalności rund, punktacji jak i rezultatów.

Za pomocą tutoriali wyjaśniłem w jaki sposób Organizator konkursu ma korzystać z fukcjonalności rund, punktacji jak i rezultatów.

Tutorial wyjaśnia jak zakładka "Stages" pojawia się po wejściu w wizytówkę konkursu.

Tutorial wyjaśnia jak zakładka "Stages" pojawia się po wejściu w wizytówkę konkursu.

Z kolei zakładka "Scores, Calculations, Results" pojawiają się po wejściu w Scores i wybraniu rundy.

Z kolei zakładka "Scores, Calculations, Results" pojawiają się po wejściu w Scores i wybraniu 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.

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.

Wyzwanie

Wyzwanie

Wersja mobilna i tabletowa

Wersja mobilna i tabletowa

Aplikacja pozwala na dodawanie punktów przez Jurorów i Organizatorów konkursów. Organizator może dodawać rundy, określać oceny dla kandydatów swojego konkursu. Ma dostęp do kalkulacji (statystyk) a finalnie do rezultatów konkursu.

Aplikacja pozwala na dodawanie punktów przez Jurorów i Organizatorów konkursów. Organizator może dodawać rundy, określać oceny dla kandydatów swojego konkursu. Ma dostęp do kalkulacji (statystyk) a finalnie do rezultatów konkursu.

Design system

Design system

Style Guide

Style Guide

Przygotowałem wykaz typografii, kart, kolorów ikon i wiele więcej na podstawie design systemu MUI

Przygotowałem wykaz typografii, kart, kolorów ikon i wiele więcej na podstawie design systemu MUI

3 etap

3 etap

Light Mode vs Dark Mode

Light Mode vs Dark Mode

Przygotowałem cały userflow łącznie z prototypem, aby klient miał lepszy przegląd tego co zostało zrobione. To co istotne wyróżniłem procent dopasowania telewizora do potrzeb oraz oferty sklepów - linki afiliacyjne.

Przygotowałem cały userflow łącznie z prototypem, aby klient miał lepszy przegląd tego co zostało zrobione. To co istotne wyróżniłem procent dopasowania telewizora do potrzeb oraz oferty sklepów - linki afiliacyjne.

1 etap

1 etap

Panel logowania i rejestracji

Panel logowania i rejestracji

W prosty sposób użytkownik może się zarejestrować a poźniej zalogować.

W prosty sposób użytkownik może się zarejestrować a poźniej zalogować.

2 etap

2 etap

Ekran powitalny i Dashboard dla Organizacji i Kandydata

Ekran powitalny i Dashboard dla Organizacji i Kandydata

Ten widok bo obejmuje również takie sekcje jak: Wpisy, Najnowsze testy telewizorów

Ten widok bo obejmuje również takie sekcje jak: Wpisy, Najnowsze testy telewizorów

4 etap

4 etap

Listing konkursów

Zakładka Competitions przedstawia zgrupowane kursy na podstawie kategorii. Za pomocą filtrów wyszukiwania Organizator jak i Kandydat mogą ustawić konkursy wg kategorii tematycznej, daty i zakresu nagrody pieniężnej. Możemy ustawić nie tylko opcję listy, ale też kafelkową.

5 etap

5 etap

Wizytówka konkursu

Przygotowałem cały userflow łącznie z prototypem, aby klient miał lepszy przegląd tego co zostało zrobione. To co istotne wyróżniłem procent dopasowania telewizora do potrzeb oraz oferty sklepów - linki afiliacyjne.

Przygotowałem cały userflow łącznie z prototypem, aby klient miał lepszy przegląd tego co zostało zrobione. To co istotne wyróżniłem procent dopasowania telewizora do potrzeb oraz oferty sklepów - linki afiliacyjne.

6 etap

Rundy konkursu

Rundy konkursu

Finalnie mamy bardzo obszerny widok z rozwinietą punktacją telewizora i ostatecznym werdyktem. Strona jest bardzo obszerna - pokazuje dokładne szczegółowe informacje z czego wynika punktacja - zawiera mnóstwo tabel, statystyk, analiz i wiele więcej.

Finalnie mamy bardzo obszerny widok z rozwinietą punktacją telewizora i ostatecznym werdyktem. Strona jest bardzo obszerna - pokazuje dokładne szczegółowe informacje z czego wynika punktacja - zawiera mnóstwo tabel, statystyk, analiz i wiele więcej.

7 etap

7 etap

Przyznawanie punktów

Przyznawanie punktów

Przygotowałem cały userflow łącznie z prototypem, aby klient miał lepszy przegląd tego co zostało zrobione. To co istotne wyróżniłem procent dopasowania telewizora do potrzeb oraz oferty sklepów - linki afiliacyjne.

Przygotowałem cały userflow łącznie z prototypem, aby klient miał lepszy przegląd tego co zostało zrobione. To co istotne wyróżniłem procent dopasowania telewizora do potrzeb oraz oferty sklepów - linki afiliacyjne.

8 etap

Kalkulacje

Kalkulacje

Przygotowałem cały userflow łącznie z prototypem, aby klient miał lepszy przegląd tego co zostało zrobione. To co istotne wyróżniłem procent dopasowania telewizora do potrzeb oraz oferty sklepów - linki afiliacyjne.

Przygotowałem cały userflow łącznie z prototypem, aby klient miał lepszy przegląd tego co zostało zrobione. To co istotne wyróżniłem procent dopasowania telewizora do potrzeb oraz oferty sklepów - linki afiliacyjne.

8 etap

Rezultaty

Rezultaty

Przygotowałem cały userflow łącznie z prototypem, aby klient miał lepszy przegląd tego co zostało zrobione. To co istotne wyróżniłem procent dopasowania telewizora do potrzeb oraz oferty sklepów - linki afiliacyjne.

Przygotowałem cały userflow łącznie z prototypem, aby klient miał lepszy przegląd tego co zostało zrobione. To co istotne wyróżniłem procent dopasowania telewizora do potrzeb oraz oferty sklepów - linki afiliacyjne.

8 etap

Landing page z filmem promo skierowanym dla Kandydatów konkursów

Landing page z filmem promo skierowanym dla Kandydatów konkursów

Przygotowałem cały userflow łącznie z prototypem, aby klient miał lepszy przegląd tego co zostało zrobione. To co istotne wyróżniłem procent dopasowania telewizora do potrzeb oraz oferty sklepów - linki afiliacyjne.

Przygotowałem cały userflow łącznie z prototypem, aby klient miał lepszy przegląd tego co zostało zrobione. To co istotne wyróżniłem procent dopasowania telewizora do potrzeb oraz oferty sklepów - linki afiliacyjne.