User Flow and U.I Wireframing

For a visual display on how the companion app will be used, I created a system map, this system map shows how users move through the design in an efficient form, with the starting point being the log in page, a page which provides a range of different options. After logging in or signing up, users can navigate throughout the apps landing page, which also provides accessibility using the settings, carefully placed just in the top corner of this home page, from now on the users have free roam and can visit all the different areas of the map which intrigued them. Pages include past games, daily cosmetics shop, preferences, missions and updates and frequent news.

My design choices were based on I believe the target audience expect with a companion an, and that’s quick access to information, clean navigation, and helpful tools for improving gameplay. I kept the UI minimal and tactical, using a mid ranged green theme and clear icons to match the style of popular shooter games. Both the system map and wireframes were developed through the use of sketches and digitally, I also took screenshots during the design process to show how my ideas developed over time.

Wireframe design for potential layouts that may be used for my final design.

My wire frame design was used as a brain storming session, this is where I mapped out some of the potential layouts that I could use when moving onto the high fidelity plan for the companion app. All follow a similar layout style each with a colour scheme ranging from the darker shades of green, up to the lighter and quieter styles. This helped with planning before I began development.

For users who prioritise UX, within the settings a large display or customisation options are available, which benefits users, helping to make their experience feel more personalised. In the settings accessibility features are in place, such as a different colour scheme/pattern, a list of different languages. and options regarding sound effects within the app. Allowing users to have the best experience when browsing the app.