Skills

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

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 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.

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. 

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.

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.