Ava Arnett Design
Ava Arnett Design
Portfolio
Tea Time's Over!
This has been my longest-lasting project, starting from Fall of 2024, lasting all the way until now. I was tasked as the initial primary UI designer, and the team expanded around me with eventual lead roles being filled by other members while I stayed consistent as primary UI designer and secondary for UI implementation.
On outset, I was tasked to handle the standard player HUD and gameplay menus for our ability-based roguelike. The core system required that we have 4 ability slots; a combined Health/Time tracker, where getting hit loses time and time decreases while playing passively; a level up system to track and upgrade/unlock abilities; and a shape language to unify all of these inside the context of our game's narrative theme and the character of our protagonist.
Menu References
With a shape language resolved, time was then taken to find a place to ground our menus. The biggest inspirations on this front were the archetypal MOBAs (League of Legends and DOTA) as well as Path of Exile and Diablo. Partly this came about as an artifact of an older design, where mechanically we started out planning to handle movement with mouse click akin to a MOBA or RTS with an overhead camera. The camera and menu style stuck around, however that movement was quickly tossed aside.
Beyond that though, the setup allowed for an easy way to convey ability cooldowns and character progression in a unified hotbar, and with MOBA shape language what we at the time had as an Ultimate ability was always clear to the players by its special shape and position in the far right of the hotbar.
Progression Design
With Progression systems meanwhile, we took heavy cues from a different Roguelike, that being a strong recommendation of our Design Lead's, Roboquest. With progression we needed menus to convey both getting new abilities to slot into your next available ability slot, as well as a similar menu to give stat modifiers and boons for these various abilities.
Starting out in the obvious place for Alice in Wonderland, that being playing cards, I set our upgrade menu up mirroring the upgrades screen from Roboquest with 3 cards showcasing the effects of an upgrade in a horizontal list. The ability selection menu was set up to mirror this as well, however with time it became clear we wanted narrative distinctions between them as one was a boon from a named character (the upgrades) and the other is a manifestation of our own player character's power (the abilities themselves).
To achieve this, with efforts by our then-newly-established UX Lead, Bren Hermann as well as myself we made a vertical list slot menu for the abilities menu, to best contrast the boons menu for upgrades.
Shape Design
That's a lot of things to do, so the first place I started was shape language. Our game is set in a version of Lewis Carroll's Alice's Adventures in Wonderland, and our protagonist is an older more combative and angry Alice, so to start I came at it with some swoopy rounded curves with sharp points in the shapes of ability icons and boxes. This aiming to capture the whimsy of wonderland and the hard edges of Alice at the same time.
The art team themselves were working on similar problems at the same time, and ideas bounced back and forth for a while as this was being formulated, though that core idea of Alice being personified by sharp curved points and wonderland by large flowing shapes stayed throughout.
HP Timer, What did we do?
Finally, the highlight of the design in a lot of ways. Our whole game rests on a simple pitch of "if you get hit, you lose time", everything in the systems is based around being quick and avoiding hits where you can. Communicating this fact was key, and above all else making it act both as a timer and a health bar was crucial in that.
A lot of attempts were done; starting simple with a pocket watch clock, we tried to make a circular fill masked with clock hands, however the hands alone were a bad tell for portion remaining at a glance. A digital time face was eventually added in, and this alleviated the issues with the timer portion, however issues still remained in conveying the health part of it.
An attempt was done to insert hearts into the rim of the clock, filling and emptying with time left remaining. However, in a game styled so heavily after cards, some cases had it that the hearts weren't read as health, instead simply as middling background detail.
The final design took all of this into account, swapping out most the analog elements except the general shape and making an explicit health bar that fills around the circumference of the clock. At the center of which there is now a digital display clock that jumps visibly whenever a hit is landed to really sell the impact of taking damage on the time left. In a lot of ways, this was the hardest element of the whole game's visual design to get right because of how much in the pitch rested on it feeling right, though in the end I believe we got it right and haven't gotten any complaints from it in a good few months since this final format was finished.