StudioKlondike
patreon
[Background Blog] Astatos - Store Design Update
🕑 Added 2024-01-26 15:13:56 +0000 UTCHey Patrons, Compymono here!
This month I've been working on a bunch of stuff, and one of those things is a complete redesign to the store UI in Astatos!
This coming February will mark the addition of the 31st Hero Skin to the game, and things are beginning to stretch the limits of the existing store UI for a few reasons:
- Currently the game has to load the preview images for every Hero Skin after the tab is clicked, which could cause performance issues as more things are added.
- The menu is a horizontal scrolling list that can only display 4 items on screen at once, this works fine for the other categories, but means that you need to scroll the view over 7 times to view all the skins. (There's actually a half-height box variation for the item components on this menu but I didn't like the look of it in the end.)
For those reasons I've wanted to update the UI for a while now, and add a bunch of new quality of life improvements. (Especially since this was one of the earliest menus I designed for the game back in mid-2020)
With the new year's break, I had a little time away from other work at SK, so I mocked up a new design in Illustrator at the end of December.
- The navigation tabs are mored to a scrolling list to the left of the screen, allowing for more categories to be added over time.
- Each item is displayed at a smaller size, increasing the amount of visible items from 4 to 8.
- Categories are now split into pages which can be navigated to quickly and reduces the amount of artwork that has to be loaded at once.
- Screen space has been used more effectively by moving the Monera display to its own UI element, and cleaning up the elements shown on each item card.
- Item descriptions are now shown in a window with better visual hierarchy, a scrolling text box for longer descriptions, and easier to see buttons.
With the UI layout roughed out, I spent the next few days designing and programming the elements in-engine.
Thankfully, all the code that actually handles purchases and item information is seperate from the UI, so I was able to scrap the old menu entirely and just call the existing functions when needed— It's less work, and means less testing needed to be done. (Unrelated, but the scrollbar was very challenging to get working!)
In the process of building the design I polished up some of the layout, especially on the navigation bar, which I moved down to align the category tabs and heading.
Some other features include:
- We can display an item description as its own page to feature a single item at a time. This is pretty useful on some of the categories that only have 2-3 items, and for new stuff that gets added each month.
- There's a new purchase confirmation UI element! It's a huge improvement over the last one in general.
- Clicking on your Monera value brings up a new help UI to show you where to get more. It's a common question for new players, so I wanted to help alleviate that. The options also directly take you to the relevant menu when clicked.
- The store can now jump to a specified category or item! This means that I was able to add a related feature to the Deck menu where clicking on any Hero Skin you don't own brings up the item description in the store without needing to take you out of the Deck menu. (You can even unlock Hero Skins in the deck too!)
- All the text in the store was revised! Hero Skins now have the flavour text from their announcements, and everything was re-worded for clarity in general.
- And lots of super smooth animations that don't show here! It all looks very neat.
And there we have it, a nice new store UI that won't run out of space any time soon! It was a hefty challenge to get all of that done in less than a week, but I'm really happy with how it turned out. It definitely makes me reflect upon how my UX design has evolved over the past few years for the better!
The new store will be coming in the next Astatos patch, and I'm hoping to polish a few little things over time. (i.e. the category graphics need some work still) I hope to share more development work soon!
- Compymono
