Design and Research
I wanted the colour scheme for the companion app to be a contrast of a high florescent colour with a dark background. This is because the contrast between the colours is useful when trying to attract the user to essential elements. The florescent green I chose was inspired by the Hulu colours as its vibrant, eye catching and creates a sense of energy and excitement, keeping the user engaged. I also took inspiration from Hulu’s content borders using rounded corners and the florescent green for the stroke accents. I chose a darker grey over black as the contrasting colour for my elements as the colour helped always keep the white text readable against the dynamic background. My Personas are very generic because my target audience are gamers who play shooter games. Gamers can be of any age, have any occupation and could all have a separate reason they enjoy gaming. For example, someone could enjoy gaming because they are a software engineer, so they appreciate seeing their job skills implemented into a video game. I researched a few competitor apps and then analysed them to see their strengths and weaknesses. The general outcome was most of the apps did not have a news or a community page that the user could look at. Some apps also had shops, but I wanted my app to be focused on statistics and the community, so I thought not to add that.
User Flow and Wireframe
Wireframe-https://www.figma.com/design/k42B58u2LtCJV0jl57ts2K/Untitled?node-id=84%3A402&t=qQ8i4RN46i3tWbA4-1
When it came to wireframing the app I tried to make it as simplistic as possible, so it becomes accessible and easy to work for any type of user. This is why I created 5 big elements on the home screen that the user can click on with ease to get them where they want to be as soon as possible. Alot of the content takes up the screen on pages like the community page. This is due to the fact I had the idea of making the content scroll up and down the page, so I did not have to sacrifice the size of the content. This makes pages like this more accessible for the older users. I added placeholders for where I would like to put my images across the app. All the images I will use are from the copyright free services ‘Unsplash’ and ‘Freepik’. My user flow map shows the essential user flow of the companion app and the options the user may be faced with throughout their time navigating the app. I developed the user flow map from the very start when the user clicks onto the app. The user either logs in or registers and only when that is completed will the user be greeted with the homepage of the app. The key action on the user flow map is when the user chooses between viewing the News, Progress, Stats, Friends, or community page. This is because every action after that will eventually loop back to that page.
UI Prototyping
https://www.figma.com/design/k42B58u2LtCJV0jl57ts2K/Untitled?node-id=0%3A1&t=qQ8i4RN46i3tWbA4-1
When creating my high-fidelity version of my companion app I wanted to have a lot of UI elements in my design, but I did not want so many that it would start to distract the user. I First started by creating a dynamic background that compiled of a bright and dark green gradient that would flow around the screen depending on how long the user took on the page. As I want my app to be accessible, I made sure that all the call-to-action buttons had some type of feedback when hovered over. Users will also get feedback from the taskbar when they press one of the buttons, to confirm they have done so. The news banner at the top of the homepage is on an infinite loop of scrolling through the different headlines. This gives the user a higher chance of clicking on a headline they are interested in whilst they are on the homepage. When the user clicks on one of the headlines on the news page itself, it has been prototyped to give a smooth animation of the image being stretched out and the text appears below. On the Progress page I made the top element able to switch between different achievements when it is dragged across. I did this because it does not sacrifice extra space on the page, and it also gives the user extra information without having to scroll through the content just to find the information. The community page has a vertical scroll for its content on both pages which was achieved by using auto layout and setting the scroll to vertical. The subheading for ‘Featured’ and ‘Following’ has a responsive green line so the user receives feedback when they press on one of the subheadings. The community page also has a working interactive like button that was created from scratch in Figma. The friends page is similar to the community page as it also involves scrolling, but this time horizontal and vertical. Only a few profile pictures have a green stroke around them, and this is because it represents that person being online so the user can know instantly who is ready to play. The stats page is the page with the least amount of UI elements on it. This is because people that want to view their statistics might be in the middle of a game or in between games, so adding lots of UI elements to the page will slow the process down of them trying to see their records. At the very start when the user opens the app, I created an infinite spinning loading wheel in Figma to give time for the rest of the app to load depending on the user’s internet speed and connection. I used this wheel elsewhere in the app to represent delay and loading times on important and bigger pages.
Adaptation
The adaptation from the phone app to the tablet was a subtle change as its very much the same version but adapted to a larger screen. It was a long but straightforward process of making sure all the elements had the right constraints. For example, everything that is in the centre of the page had the constraints ‘centre’ and ‘top’ this ensured that when the frame stretched everything was kept centre. The toughest thing to get to adapt was the taskbar because I needed to keep the icons centre and the same size, but I needed the taskbar rectangle to be able to stretch when its resized. I found this difficult at first as the taskbar was one whole component. But adding a separate auto layout to the icons and the rectangle meant that I could give the elements different constraints, and this solved the problem. On the community page I gave the subheading ‘scale’ constraints which meant that when the page changed size the text and the bar line underneath increased in size and stretched also. Adapting from the tablet to website was a little bit more difficult as some elements had to be increased in size for example the News banner on the homepage. But because I had already set the constraints it made the transition from tablet to website much easier.