Hero image for Saleblazers

Saleblazers

separator bar

Timeline

November 2021 - January 2022

Tools

Figma, Procreate, Discord

Role

UI/UX Designer, Game Producer

About

Saleblazers is an upcoming open-world shopkeeping game, where players can work together to fight bad guys, collect their valuables, and sell those goods for all their worth in a fully customizable shop.

separator bar

Skills

Cross-Functional Collaboration, Game Design, High-Fidelity Prototyping

separator bar

Process

1. Receive UI assignment.
2. Create moodboard of analogous UI designs.
3. Present first pass to the Art Director.
4. Iterate based off the Art Director's feedback.
5. Present final pass to the Game Director.
6. Work with a game engineer to discover and solve potential UX pain points.
separator bar

Character Customization

Whether it’s buildings or characters, customization is a core feature of Saleblazers. I was tasked with creating our Character Customization screen, which would be the first piece of the game players would experience as soon as they started a new file.

In this screen, players can change their character’s body type, head shape, eye shape, eyebrow shape, hairstyle, facial hair, facial accessories, and voice. Since the Character Customization overlay could appear at any Barber Shop hub in the world, the UI elements would have to pop out against any background and any environmental lighting. Blacks and whites were reserved solely for UI, so I relied primarily on those colors to design our panels. Also, because the background could continue moving while the Character Customization UI was overlaid on top of it, panels were made opaque to reduce possible distractions.

Character Select screen that occurs before Character Customization screen
Upon opening the game, players must select their save file in this Character Select screen.
Character Customization screen that occurs as soon as players enter a new game
Players have the option to customize their character using a Character Customization UI overlay if they create a new save file.
separator bar

Store Policies and Upgrades

Players are able to own multiple shops, but each shop is upgraded independently from one another.

Because players were only able to ‘open’ or ‘close’ their shops from within this UI screen, I wanted the UI to visually differentiate between open and closed shops. As such, a yellow background denoted an open shop, and a navy blue background denoted a closed shop.

In the Store Policies section, players are able to purchase and equip different store policies, which affect gameplay within the store. For example, some policies make the player move faster within the store, and other policies may make customers randomly explode. As such, there’s a skill tree of purchaseable skills on the left of the screen, a description (with price tag) on the bottom right, and a set of rotating shelves where players can place policies in order to actually implement them on the upper right. 

Store Policies UI screen when the shop is open.
Store Policies UI screen when the shop is closed.
separator bar

Global Skill Tree

Up to 8 players are able to simultaneously play together in a Saleblazers server. In the Global Skill Tree screen, all players can contribute to purchasing unlocks for useful items, character types, and shop types.

For this screen, I used different image-container shapes to denote what type of feature players were unlocking. Useful items were squares, character types were rectangles, and shop types were rhombuses.

Inspired by the way Nintendo games approached UI polish, I also created 16 unique patterns to show how much the purchase meter was being filled up. When a feature was fully purchased (by either 1 or multiple players), the panel would adopt an orange frame, and the image container would be colored with a moving pattern.

Global Skill Tree screen to purchase unlockable features
Global Skill Tree mockup with default, hover, pressed, and purchased states.
Unique textures for the purchase meter within the Global Skill Tree
Unique UI textures I created to fill in the purchase meters.
separator bar

Takeaways

Through my time working on Saleblazers, I learned how to create a degree of UI polish by incorporating textures and subtly moving elements. In the future, I’d like to experiment even more with texture and movement.