Pre-Production Phase
This portfolio showcases the finalised wireframes I developed for my User Interface assignment at Ulster University. Below is a collection of both the Low-Fidelity and High Fidelity Wireframes:
Low Fidelity Wireframes
High Fidelity Wireframes
Menu Animation
Below shows a GIF of the animation that will play when the mouse is hovered over the buttons. I had to use a GIF to show this as the way I achieved this was through a plugin called Anima which uses it's own preview method so the animations won't work with the default one in Adobe XD.
User Personas
When designing something for an existing product it is important to understand the audience your designing for and their different playing habbits in order to better prepare the designs for these habbits. Things such as how to lay out information or where to put more focus on things like usability etc.
Below is a collection of three different user persona I gathered to take into account when I was designing my UI changes:
-Amy-
-
Streams Valorant multiple times a week;
-
Takes Valorant Really seriously;
-
Occasionally competes in the Esports scene;
-
Extremely well versed in the games mechanics
-Ethan-
-
Is well versed in pc gaming;
-
Plays Valorant mostly for content and skins;
-
Is fairly confident at playing Valorant;
-
Is a completionist and wants to unlock everything;
-Jordan-
-
No Experience in pc gaming;
-
Takes Gaming Casually;
-
Unfamiliar with common UI themes and layouts;
-
No prior experience with FPS games;
Scamp Collection
Before making anything in adobe XD i first put together a few scamps to brainstorm the different ideas for how I could approach fixing the issues I found in Valorant's UI. I went with a simplistic style to better illustrate positioning and scale rather than focusing on the design of the actual elements themselves.
Below is a gallery of all my scamps gathered together:
Flowchart
While I was designing the scamps for the UI, I also looked into the flow of the Valorant menus and how they all connected to each other to get a better idea on how to link the menu's together without affecting the already existing flow of the UI too heavily as it is already established with existing players meaning it would through a wrench in the workd for them if that flow was to suddenly change.
