Talent Pun

Craftmagic-8000

¶ UI, UX, Art and Animation
¶ January 2022

Spec Work for Unnamed Studio

This is actually spec work for a position I was applying for. I thought the brief provided by the developer was interesting, so I decided to just have fun with it. It gave me a chance demonstrate my range of skills, as well as my design thinking.

The brief was to create a crafting screen for a mobile MMO, featuring a gear preview showing threes stats, a time cost, and three crafting ingredients. The game would have a contemporary setting, where magical items are crafted with a 3D printer, with a mix of fantastic and technological materials.

Above is the final crafting animation, tying all the elements together. Below is a bit of my design development process. I tried to limit the amount of time in the Discovery and Design process, with the goal of providing a jumping off point for the deliverables.

Often times on people will look at a screen in a portfolio and ask, “What part did you do?” In this case, I did everything except record my own sound effects.

TASTE MAP: TONE VS STYLE

There was no visual references or art provided, so I spent some time building a taste map.

As a product category, ‘realistic’ and ‘serious’ fantasy MMOs and RPGS are a red ocean, requiring high production costs to be competitive to attract a mostly hardcore, male audience. I felt there was more opportunity in the MMO space to look towards animation for inspiration, and attract a wider, more mid-core audience.

VISUAL REFERENCE

I drew most of my inspiration from Steven Universe. I like the playfulness and punchiness of games like Brawlstars and Clash Royale. and wanted to find a reference that could build of its spirit and tone. 

Steven Universe also does a great job blending modern day, everyday settings with sc-fi and fantasy elements.

SKETCHING AND DOODLING

I use thumbnails and sketches to organize my ideas; and visualize the deliverables I wanted to produce.

The biggest challenge was imagining how I would convey the experience of 3D Printing. in a way that true to the concept but technically achievable.

BASIC USER FLOW

Because the work was unpaid, I wanted to limit the scope of work and focuse on a simple flow the demonstrated a player …

• Previewing a craftable item

• Crafting  it

• Accelerating  its completion with a purchase.

The time cost of crafting represents a monetization opportunity.

Obviously, gear and crafting systems can be much more complicated than that. They often overlap with other features such as character customization, inventory management, stat modification … the list goes on.

GRID VERSUS CARD VIEW

One UX feature that is common in mobile apps but seen less is games is the support of different view options.

This click-through demonstrates how a player can toggle between a grid and a card view of the craft recipes.

The grid view allows players to quickly scan through large amounts of recipes that are available to craft; while the card view allows players to quickly compare stats and gear benefits.

On the right, a toggle allows players to switch between stats or gear lore.

DETAILED VECTOR ART

Most of the UI elements are created in Illustrator, but objects like Ingredients and placeholders for the 3D Printer and Gear Item (in this case, the Infernal Dragon Puncher) were brought into Photoshop for a paintover.

3D PRINTER AND GEAR STORYBOARD

I wanted to stay true to the brief, so I drew an imaginary 3D Printer and a piece of gear so I would have something to animate. The premise is that the printer is fed ingredients which are liquified into a resin-like goo, that fills the chamber from the bottom. The item is baked in the chamber and all the excess goop is drained out, leaving the printed object behind.

Mock of the player previewing a recipe that has the required ingredients to craft.

The Card View gives the player more details about each recipe — its name, a snippet of info, and it’s stats — prior to selection.

Examples of various UI elements, such as icon buttons, tab buttons, toggles, timers and badging.

For the Crafting ingredients, I went with a mix of Dragon Horn, a CPU/motherboard, Volcanic Rock, and Anti-Matter.

I picked three general RPG stats — Power, Toughness and Speed. I wanted them to be playful and colorful, but they’re simple enough that they can be refactored as 1-color icons.