UI Prototyping for Mobile Application

This post will be exploring the user interface of the newly constructed mobile companion application for Destiny 2 using Figma.

The Mobile Companion App can be viewed here –> (App).

My design process within the prototype was to simple duplicate the wireframe that was created in post 2 and heavily modify it to a suitable standard.

The first main aspect that changed was the guidelines. These have been incorporated within the design phase as it gave the application a clean frame, every picture and text could be slotted in to look professional ultimately improving the user experience. The colour pallet (which has been discussed in previous posts) has been selected to be a dark and ominous tone as the game is widely set in outer space with planetary exploration. The next main aspect was the typeface, the typeface used is called “Lalezar”, this has been done as Destiny 2 is known for having a bold typeface without any curves and fun touches to demonstrate the seriousness of the game.

On the other hand, interactive elements have also been implemented within the companion application with every button working precisely. Within the buttons, an animation has been inserted where parts of the page twist and turn to morph into the next page. This addition has been made because of the newly added DLC “The Final Shape” as the main villain cuts and morphs anything to anything at will. In addition a small insertion has been made to where the hot bar at the bottom will not move as the page is being directed downwards.

Finally the first page consisted of multiple DLC’s the user can select and read about in the following page to give the user a clear direction to where their hard earned currency is spent on.