My first UI Art test

(Posted on Apr 29th 2023)

I want to share my experience completing a quick art test I was given while interviewing for a UI Designer role at Amazon Games for their live service game “New World”. This test was not covered under any form of NDA, so today I’m going to explain the prompt that was given to me, detail my entire thought process from start to finish, and share my results with you all!

First of all, for me to begin I need to understand the deliverables. The assignment asked me to do the following:

Create at least one screen mock of HUD element for ‘Achievement unlocked’ celebration
Design an achievement icon and UI elements (use given icon & create new)
Create animated Figma preview
“1920x1080, 72ppi PNG or JPG” (not a task but a guideline to abide by)

Now, understanding that I am being asked to complete 3 individual tasks I begin by first getting a solid understanding of the game’s existing UI and UX design. How do I do that? Well simple, through playing the game yourself and/or reviewing gameplay screenshots and videos!

Understanding the product

Some design situations require us designers to build something from the ground up or completely reinvision an existing product, however in this case I am being asked to build upon an existing, already established design framework. I’m being asked to create a new icon from scratch but that’s one simple asset and won’t take long at all. I’m also supposed to create an “Achievement unlocked” HUD popup too however, so I take plenty of time to take in the game’s pre-existing design direction in order to maintain visual consistency throughout the rest of the game’s UI when designing a new element.

I did this by skimming through a 7 hour long gameplay clip which conveniently showcased lots of various UI’s and HUD’s the player could encounter while playing. I screenshotted each new/unique UI menu I came across until I essentually ended up with one big collage full of various unique UI elements, specifically screenshotting various HUD popups since that’ll be one of the things I’m designing for this test.

Creating the icon

Now that I’ve gained a solid understanding of the game’s design direction and core visual philosophies, I start by designing a new achievement icon in Adobe Illustrator.

There’s not much to say about it since I’m following pretty straight forward guidelines in regards to this new icon’s design, so here’s the final result:

Creating the HUD pop-up

Now that I have a new icon that matches the style of every other icon in the game, I continue to my next step which is to create the HUD pop-up (also known as a “toast” notification). For this step I was already given a wireframe example with guidelines placed in the exact boundaries for this pop-up on the screen, so I use that as my starting point, and from there I simply start to recreate the pre-existing HUD design for achievement pop-ups (since they already existed in the game).

I did notice that there was an achievement pop-up already in the game while doing my visual design research, however that pre-existing pop-up for achievements specifically appears in the top right corner of the screen and the wireframe guideline they provided has it positioned in the center horizontally instead. For my first design iteration I simply recreated the design for the existing achievement pop-up that users are used to already, but centering it to fit the wireframe.

Here are my final results:

Since it did say “create at least one”, I’ve created another revision, and this time I tried to take a newer approach by emulating the visual style of other HUD pop-ups. For this revision I took inspiration from the “territorial triumph” pop-up specifically since it looked more visually striking to me:

And finally for good measure, I created a 3rd revision and did my best to combine the first revision with the layout of the “territory claimed” pop-up since they’re both comprised of similar visual elements, and doing so gave me this final result:

Final touches & thoughts

Lastly, the prompt asked me to “create an animated Figma preview” of my design(s), so I did exactly that! I added some very simple animations and a couple buttons on the screen to cycle through each design I created. There’s not a very simple way for me to show you how that turned out through images since it’s literally the same images as above, but with sliding and fade-in-out effects added.

That’s honestly about it! I didn’t do anything insane with the Figma demo since it doesn’t need to do anything other than give you a better idea of what it would look and feel like ingame, so rather than including pictures of the final demo, why not just share the link?

Here’s a link to the interactive demo so you can try it out for yourself! Once I completed this final step and finished writing down all of my notes for my “Design Process.docx” file, I zipped everything up and sent it off! I had a lot of fun working on this, and I’ve even completed another separate art test for Bungie! That art test however, was under an NDA so unfortunately I can’t really share anything meaningful about that experience with all of you...

Thank you for reading, and I hope this gives you a clearer understanding of my approach to a design challenge! I’m eager to go out of my way and overachieve when it comes to proving my capabilities as a designer. Art tests are one of my favorite things to work on since they’re essentially created to give us designers a chance to stand out from the rest and show people what we’re truly capable of!