Skills

Trailer

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

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 was the first piece of the game that players would experience when starting 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 within the world, the UI elements would have to pop out against any background and/or 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, panels were made opaque to lessen distractions. 

Store Policies and Upgrades

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

Because players are only able to ‘open’ or ‘close’ their shops through this UI screen, I wanted the UI to visually differentiate between open and closed shops. As such, a bright yellow background denoted an open shop, whereas a dimmer navy blue background denoted a closed shop. Whether the visuals reflected the shop being open or not did not affect the UI functionality of the feature; players could interact with the UI the same way, since the status of being ‘open’ or ‘closed’ only affected the shop in the overworld. 

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 make customers randomly explode. As such, there’s a skill tree of purchasable skills on the left of the screen, a description (with price tag) on the bottom right, and on the upper right is a set of rotating shelves where players can place policies to actually implement them in the overworld.

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 indicate 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 a glowing neon orange frame, and the image container would have a colored moving pattern as its background.

Takeaways

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