Merope

Merope

Merope

Role in the project

UI/UX/Prototype/Video

About the project

Competition Organizers Application

Client

Merope

Challenge

Challenge

Challenge

Challenge

One of the services of the Merope application is the ability to add contests and enter scores into the system. Previously, scoring was done manually, leading to unfair play. The solution is Merope.
Merope offers everyone the opportunity to participate in the contest and win cash prizes.

One of the services of the Merope application is the ability to add contests and enter scores into the system. Previously, scoring was done manually, leading to unfair play. The solution is Merope.
Merope offers everyone the opportunity to participate in the contest and win cash prizes.

1 stage

1 stage

Creating "Userflow" Organization

Creating "Userflow" Organization

Below I present how the Organizer reaches their competition profile, then its rounds, entering points for each candidate and finally calculating and competition results.

Below I present how the Organizer reaches their competition profile, then its rounds, entering points for each candidate and finally calculating and competition results.

1 stage

1 stage

Below I present how the Organizer reaches their competition profile, then its rounds, entering points for each candidate and finally calculating and competition results.

Below I present how the Organizer reaches their competition profile, then its rounds, entering points for each candidate and finally calculating and competition results.

How does it work

How does it work

Intuitive tutorials

Intuitive tutorials

Using the tutorials, I explained how the contest organizer should use the functionality of rounds, scoring, and results.

Using the tutorials, I explained how the contest organizer should use the functionality of rounds, scoring, and results.

The tutorial explains the function of assigning rounds to a competition, so that the user is aware that this functionality only appears after entering the competition profile, because the division into rounds is closely related to the given competition. Thanks to the fact that the choice of rounds is visible on the left side, the user navigates intuitively through the platform and has the possibility of changing the round at any time.

The tutorial explains the function of assigning rounds to a competition, so that the user is aware that this functionality only appears after entering the competition profile, because the division into rounds is closely related to the given competition. Thanks to the fact that the choice of rounds is visible on the left side, the user navigates intuitively through the platform and has the possibility of changing the round at any time.

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.

2nd stage

2nd stage

Userflow Data

Userflow Data

Candidate's path below

Candidate's path below

Full responsiveness

Full responsiveness

Mobile and tablet version

Mobile and tablet version

As part of the assignment, I designed mobile and tablet versions.

As part of the assignment, I designed mobile and tablet versions.

Design System

Design System

Style Guide that makes it easier and faster for developers to work

Style Guide that makes it easier and faster for developers to work

I created a list of items based on the MUI Design System

I created a list of items based on the MUI Design System

Color versions

Color versions

Tryb jasny kontra tryb ciemny

Tryb jasny kontra tryb ciemny

It couldn't do without the popular dark mode.

It couldn't do without the popular dark mode.

Color versions

Color versions

Promotional film

Promotional film

Targeted to candidates for competitions

Targeted to candidates for competitions