linkedin icon

Cybersnake X

Check it out here:

PROTOTYPE

Type:

Individual Project

Role:

Wireframing, Ideation, Prototyping

Tools:

Adobe Photoshop, Figma

Duration:

1 Week

Cybersnake X is a videogame start up currently developing a virtual reality hack and slash shooter under the alias 'Tech Warrior'. This is an indie project with passionate people on the helm with a strong but limited skill set.

I joined the team to help design their UI elements and flesh out the user experience strategy for their gameplay.

Upgrade Screen

Ideation

My first objective was to create a set of icons for the game's multivarious upgrades. My client asked me to take reference from the video game Doom: Eternal. Aside from that I was given plenty of creative freedom.

The ideation phase of design tends to be my favorite personally. Designs for a missile launcher came naturally, but power-ups like battle assistance took some more time to figure out. Eventually I had a set of sketches for 20 power-ups.

High-Fidelity

Designing icons is always a fun exercise in graphic design. You have to be able to recognize each design from afar immediately for the design to be effective. This principal holds true even more for high stress gaming situations.

My client really liked what I had accomplished and wanted me to design the UI of the power-up terminal. I was excited to do more work for this game.

Power-up Terminal

The developers wanted a novel way to interface with the game's menus. I learned quickly that virtual reality does not afford non-diagentic (existing for the player but not in the game world) interfaces. A floating rectangle with interactable options had to have a story reason for exisiting.

The developer's delighted in my solution: having droids project the menu in the form of a hologram. The idea was so good they decided to implement it further into the game's narrative and asked me to join the development as a game writer.

I agreed to hop on board enthusiastically and fleshed out the game's story with the developer.

Player Status UX

All Gas, No Breaks!

Tech Warrior features fast paced combat. The player has limited time resource to check their own condition. The developers needed a fast and easy way to feed the player information about themselves. In specific they needed to display the current power up, health, and energy to the player.

Solution

The developer and I had to put our noggins together for this one. It took a small mountain of crumpled up paper balls to reach our final design solution.

First, place the health and energy bar on the player wrist. This would give players access to vital information in a way that was easy to access without impeding on the rythm of the hacking and slashing. All they needed to do was turn the wrist.

I placed the power ups on the inside of the guns. The player could see their weapons while enganging in combat, reducing the need for tedium in the middle of laying waste to hell.

Reflection

I love working on indie games with passionate people. They ooze authenticity, their energy is infectious, and they radiate a sense of optimism. The developer has more UX work for me later in the pipeline. I look forward on contributing to Tech Warriors in the future. There hasn't been a single dull moment on this project. If I wasn't being paid to do this work, I'd pay to do it!

Projects

AMVETS

Designed the checkout for a veteran charity's donation page

Ridge Meadow
Chamber of Commerce

Redesigned the chamber website and prototyped the map feature

Tavern Buddies

Directed the creation of a mobile app that connected Dungeons & Dragon players

Gotchi

A speculative UX project with the purpose of helping users manage electronic waste via a cute accessory

Vancouver Tool Library

Redesigning website and improving self-checkout to reduce work load on staff

Fallen London

Social media integration for the roleplaying game Fallen London

Tough Titties

An award-winning redesign for a breast cancer awareness brand