top of page
CartoonMe.png
artstation_logo_icon_145479.png
InBug-Black.png

UI / UX Design

Teams Redesign Project

For this project I decided to redesign the Teams interface because I've heard many students complaining about it so I wanted to see how I could redesign it to better fulfill the needs of students.

What I did for this project:

- Performed a heuristic analysis to gain immediate insight into possible areas of improvement

- Performed two user studies including a survey and observational study to understand qualitative and quantitative data from the end user

- Created interactable mockups to demonstrate design vision and suggested solutions to the issues found. I used Figma to create the mockups and I did two variations; one that was closest to teams and one that was more gamified / utilising playful design principles.

UI Iterations.png
Robros Interface Design

I started with a criteria of information that needed to be represented on the HUD. This included health bar's / weapons equipped / weapon overheat bars.

I started off by looking at these very techy looking borders and lines so that players had this sense that they're looking through a robot interface.

Naturally as I would trial different sections in different positions and rotations I would create a new variation.

I then made a totally different variation to try out a different idea.

I brought the variations to the team to get feedback and get fresh eyes on the layouts. There was mixed opinions with some people liking the big blocky health bar since it stood out and some people liked the circular gun displays. 

I then did a new variation to combine them. As I was going along I also identified some more information that needed to be displayed such as an object inspection panel. I trialled this in a couple different formats before landing on the design displayed to the right.

I then spent time implimenting the UI assets into the game as well as trialling different post-process effects. With the post-process effects I really wanted the user to feel like they were looking through the robots eyes so I added lens distortion as well as chromatic abberation. The colour adustments were also really important to balance the visual priority of different assets i.e. HUD / players / enemies / environment

What I would improve:

- The HUD is very big and takes up a lot of screen space so I'd make it smaller. This is especially important since the game was split screen so the screen was halved anyway.

- I also feel like it would've made more sense if the lens distortion was convex instead of concave

UIFinalLayouts.png
FullIncubatorInterface.png
Find out more about this interface here:
3 (1).png
bottom of page