When developing my companion app, I benefitted and worked with the wireframes previously made, turning those graphs into a high-fidelity prototype using Figma. With the aim being, to include everything discussed within the questionnaire previously created. These included, user profiling, trading systems, cosmetics shop, competitive leader boards alongside more valuable features.
Figmas features were optimised to get the best out of the companion app, creating this app using figma allowed for a whole new range of interactivity, something which had not been implemented into the low and mid fidelity projects.
All key areas had the same amount of time allocated, however I made sure to focus and spend more time on the settings tab found within the home screen. Implementing a well planned settings menu is key as this provides the user with some important accessibility features, helping towards making the app more personalised for each player.
Other design aspects which feature heavily within the app is the display of output for the user, its important for the user in that they know what area of the app they are hovering over or clicking. To share an output and reduce the lack of confusion, my design features include a darker coloured button once hovering or selecting, this can be found on every button.
Figma was used throughout the design process to make sure both efficiency and functionality feature heavily within my app. I used a range of designing components to keep everything available consistent and used auto Layouts to keep a simple yet visually pleasing design and layout. Figma’s prototyping tools were helpful in the design process as, I was able to preview the app on mobile devices, to gain an understanding on how it would appear on a user’s phone. Below is a youtube video where my final design can be seen.
References
Icons used throughout, Found at Download 1,421,300 free icons (SVG, PNG)
Image used for the map. birds eye view of a map of the world – Search Images. Found at City town district street intersection Royalty Free Vector.
