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. In particular, the Character Customization screen is the first piece of the game that players experience when starting a new file. Here, players can change their character’s body type, head, eyes, eyebrows, 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. Because the Character Customization UI could also be overlaid on a still-moving background, UI panels were made opaque to lessen distractions. 

Store Policies and Upgrades

In Saleblazers, players are able to open multiple shops which are upgraded independently from one another. Since shops could only be made ‘open’ or ‘closed’ through a UI screen, I wanted the UI to visually differentiate between the ‘open’ and ‘closed’ states—a bright yellow background denoted an open shop, whereas a dim navy blue background denoted a closed shop. The store status of being ‘open’ or ‘closed’ only affected the shop in the overworld, so the color-differentiated visuals primarily served as polish and did not affect the overall functionality of the feature, as players could still interact with the UI the same way regardless.

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. The left of the UI screen features a skill tree of purchasable skills, the bottom right contains the description of the skill and its price, and the upper right has a set of rotating shelves for players to place policies they would like to implement 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. My work with them inspired a lifelong love for experimenting with texture and motion.