Max Quest

Website design restyling - 2024, UK

The main purpose of this project was to refresh and modernize the look of MaxQuest.com, creating a dedicated landing page and implementing its internal pages.
As UI designer, in collaboration with my team, my job was to analize first analyze all the previous pages involved into this project and alongside the new approved design system, customise each of them, modernize the wireframe from UX prospective as well.

MQ Design system / colour

MQ Design system / typography

MQ Design system / icon set

MaxQuest Splash Page, restyling steps, desktop and mobile

The new user will land on this new splash page, populated by cross-themed banners where he's invited multiple times to create a new account, get access to the lobby and play
the wireframe was significantly revised, enhancing the content section with promo banners and game information.

Old Splash page wireframe New Splash Page

Once logged, the user can now get access to the Lobby Page.

the new Lobby is now fully populated with game preview cards allowing the user to choose their preferred game.
The structure was very responsive and based on the user's screen size: the number of game cards per row adjusts 2, 3 or 4.

Old Lobby page wireframe New Lobby Page

New Vault Popup – Updated Design, Based on the Old System

In this case, developers required to maintain the same UX structure while gently refreshing the layout.
Several graphic elements, such as the coin pack card aesthetics and coin set, needed to be reviewed.

Vault page design process

Old Vault page wireframe New vault Page

Coin set restyling

The old coin set was pretty dark, obsolete and need to be refreshed.

Firefly workflow

In order to quickly propose several different options, first of all I recreated 4 different vector format coin packs in Adobe Illustrator. The model needed to be further customized with proper color palette, light and shadow effects. After the new coin pack set creation, I jumped on Adobe Firefly where thanks to its AI, it was easy to apply a lot of different graphic effects in a very short time.
Once the output of one specific setting was approved, I just saved and reused the same setting alongside each different "coin pack model" used as reference.
When the new coin pack set was ready, I replaced the old set in the Figma design system library, updating all the related layouts, Vault page included.

Final look-up on devices