Marmalade application exercise

UX UI Designer Application challenge



" Imagine that you’re part of our UI team and the Game Designer comes to you with a request to add a customization option for the characters. To do this, we need to add a new screen to allow the player to do so. He tells you that the player needs to be able to: customize hats, change hairstyle, eye colour, add facial hair, glasses, and jewelry. You can choose any of the characters to use as an example."



Wireframes and Accessibility Suggestion

Accessibility solution I suggested at this application’s challenge : give the option to the user to define GUI position, depending if he/she is right or left-handed.

Software : Figma

















GUI - UI Elements

Software : Figma

• iconography
• typography
• buttons
• menus







Hi-fi Prototype v1 + v2

Software : Figma



Flow 1

user opens the game XYZ, he/she sees the splashscreen of the game, clicks on Start button, goes to XYZ main screen where he/she chooses the theme of the game and then selects "Single Player Game". Before start playing, the user selects his/her favorite character and secondary characters (single player version).





Flow 2

user can customize his/her chosen character, selecting categories (hats, hair, eyes, facial hair, glasses, jewelry) on the bottom carroussel and adding assets to the character on the vertical list on the right/left. The user can click on "reset" button to return to the default state of the character or, after making all changes, click on "done" button to start playing.