Slime Alchemist

File Icon/overviews/slime-alchemist
A mock up from Slime Alchemist showing the crafting screen. On the left and bottom side is a list of items, in the center is the main crafting section, and the right side is an expanded information section giving details of one of the cards. The mock up is depicting a 'Paladin card' being prepared to craft by sacrificing one other essence in the center crafting section. Currently a Berserker essence is highlighted showing a card pool of Leap Slap, Furious Rush, And Empowering Strike.
Info
Role
  • UI / UX Designer
Tools
  • Figma
  • Affinity Designer
  • Photoshop

Slime Alchemist is a roguelike deckbuilder with turn-based tatical combat that's currently in early access on steam! I had a lot of fun working with a more playful style than my usual work and I'd love to get another chance to work with the developer.

I was brought on to this project to suggest some of the more impactful UX improvements that the developer could make, as well as create a some assets that fit with the existing style of the project. Here's some of the work that I contributed to the project:

A series 6 different variations of the HUD, each representing different states in gameplay. The first 4 variations show how the 2 extra status bars (that are attached on the side of the main health bar shaped like a slime) toggle between filled and empty states. The 5th variation shows what one of the extra status bars look like when damage has been taken. The 6th variation shows the two locations inventory and buffs would appear separate from each other; inventory attached to the top of the slime, and buffs right under the health number in the middle of the main health bar.
HUD examples
This image shows 5 frames of the main crafting menu to display how the highlighted essence section functions. There's 3 frams in a row above the last 2 in a row below. The first frame shows an empty highlighted essence section and the player clicking on an icon in the inventory. The second frame shows the clicked icon's additional details in the highlighted essence section, as the player clicks on the second icon in the inventory. The 3rd frame looks similar to the second, but with the details of the second icon now in the highlighted essence section. The 4th frame branches off from the 2nd frame and instead shows the player hovering one of the cards in the card pool, titled with the filler text 'lorem', of the highlighted 'Beserker' essence. The 5th frame shows the card lorem's art and details appearing below the card pool.
Essence highlighting workflow
A simple image showing the Slime Alchemist logo in the top left corner, and buttons in ordered list below it as placeholder menu items. The rest of the screen is blank, but would display a gameplay loop in the game itself.
Main menu mockup

© 2024 violet.eris.b.