Merope
Merope
Merope
Role in the project
UI/UX/Prototype/Video
About the project
Application for Contest Organizers
Client
Merope
Challenge
Challenge
Challenge
Challenge
One of the services of the Merope application is the ability to add competitions and enter scores into the system. Previously, adding scores was done manually, which led to unfair practices. The solution is Merope.
Merope offers the opportunity for everyone to participate in the competition and win monetary prizes.
One of the services of the Merope application is the ability to add competitions and enter scores into the system. Previously, adding scores was done manually, which led to unfair practices. The solution is Merope.
Merope offers the opportunity for everyone to participate in the competition and win monetary prizes.
stage 1
stage 1
The prototype of the Competition Organization path
The prototype of the Competition Organization path
Below is a video showing how to navigate the page after the Contest Organiser logs into the panel.
Below is a video showing how to navigate the application after the contest organizer logs into the panel.
Below is a video showing how to navigate the page after the Contest Organiser logs into the panel.
How does it work
How does it work
The organizer has the ability to customize their profile as well as the competition's business cards (e.g., defines the prizes). They divide their competitions based on a category tree (e.g., classical music). For each competition, they assign specific rounds in the "Stages" tab, which are visible only after entering the selected competition. Then, from the "Stages" tab, they can access the "Scores" functionality where they can update ratings for the candidates, which are assigned by the jurors (the juror inputs them themselves from the panel). Finally, they can see the remaining features such as calculations and results (a list of candidates who advanced to the next round of the competition).
The organizer has the ability to customize their profile as well as the competition's business cards (e.g., defines the prizes). They divide their competitions based on a category tree (e.g., classical music). For each competition, they assign specific rounds in the "Stages" tab, which are visible only after entering the selected competition. Then, from the "Stages" tab, they can access the "Scores" functionality where they can update ratings for the candidates, which are assigned by the jurors (the juror inputs them themselves from the panel). Finally, they can see the remaining features such as calculations and results (a list of candidates who advanced to the next round of the competition).
Intuitive tutorial
Intuitive tutorial
Tutorials that guide the user through the panel
Tutorials that guide the user through the panel
With the tutorials, I explained how the Contest Organizer should use the function of dividing the contest into rounds, as well as filling in the scores and results.
With the tutorials, I explained how the Contest Organizer should use the function of dividing the contest into rounds, as well as filling in the scores and results.
The tutorial explains the function of assigning rounds to a contest, so that the user is aware that this functionality appears only after entering the contest profile, as the division into rounds is strictly related to the specific contest. Thanks to the fact that the selection of rounds is visible on the left side, the user navigates intuitively through the platform and has the option to change the round at any moment.
The tutorial explains the function of assigning rounds to a contest, so that the user is aware that this functionality appears only after entering the contest profile, as the division into rounds is strictly related to the specific contest. Thanks to the fact that the selection of rounds is visible on the left side, the user navigates intuitively through the platform and has the option to change the round at any moment.
When the Organizer adds and later selects a given round, another view appears that informs the user about new functionalities, namely the ability to navigate to the other tabs.
When the Organizer adds and later selects a given round, another view appears that informs the user about new functionalities, namely the ability to navigate to the other tabs.
Now the contest organizer and jurors can assign points to individual candidates, check calculations, and finally see which candidate has advanced to the next round. This gives us a solid, simple, and intuitive process from point A to Z despite the complex and unusual functionality. I concluded that the widget for switching rounds in the contest must be highlighted and always visible on the left side (when entering the contest profile) to facilitate navigation in the application.
Now the contest organizer and jurors can assign points to individual candidates, check calculations, and finally see which candidate has advanced to the next round. This gives us a solid, simple, and intuitive process from point A to Z despite the complex and unusual functionality. I concluded that the widget for switching rounds in the contest must be highlighted and always visible on the left side (when entering the contest profile) to facilitate navigation in the application.
Stage 2
Stage 2
Candidate Userflow
Candidate Userflow
The candidate's path below
The candidate's path below
Full responsiveness
Full responsiveness
Mobile and tablet version
Mobile and tablet version
As part of the task, I designed the mobile and tablet versions.
As part of the task, I designed the mobile and tablet versions.
Design system
Design system
Style Guide that facilitates and accelerates work for developers
Style Guide that facilitates and accelerates work for developers
I created a list of elements based on the MUI Design System
I created a list of elements based on the MUI Design System
Color versions
Color versions
Light Mode vs Dark Mode
Light Mode vs Dark Mode
It could not do without the popular dark mode.
It could not do without the popular dark mode.
Promotional film
Promotional film
Promotional film
Promotional film
Aimed at competition candidates
Aimed at competition candidates