Prototyping
My favorite maxim from Industrial Design is “Fail Faster”. This is not saying that one should aim for failure, but rather its an acknowledgement that failure is an integral step on the path to success, so you should do it quickly, and learn everything you can from it.
This is the heart and soul of prototyping, and is one of the pillars I use to keep the prototypes I make focused and fruitful.
Overthrone was a game that started as an impromptu design session between friends, and ended up becoming a multi-year long full-time development project. Before we took the plunge of working on the game full time, we wanted to prove to ourselves that it was fun, and that there was something there worth exploring. We did this by prototyping the entire initial version of the game in Tabletop Simulator.
We worked part time for months before the team was fully committed to fulltime work, and in that time the prototype was continually refined. You can see one of the earliest versions of the prototype here:
Overthrone
A lot of the work I did on Madden was building features and tools for Rime, the UI tool in their new Frostbite engine. I built linear-srgb color utilities to help maintain our style guide, expanded our component library with things like scrolling lists and modular frames, and made use of cutting edge engine features like render texture based canvas rotation.
New Features, New Tech
I developed infrastructure for new features like the player text messaging feature introduced in Madden 2020, and the numerous on-field meters, bars and graphics that were introduced and renovated every year.
I joined the small team at Oath Games to help renovate Ethyrial: Echoes of Yore after they acquired it from the original dev team. The extant UI was entirely built from asset packs, and was both buggy and non-performant. I built a common component library to maximize asset reuse, refactored the front end architecture to use more efficient patterns, and leveraged my experience working with larger teams to create workflows that enabled the designer and I to rapidly implement assets without sacrificing design fidelity.
Ethyrial: Echoes of Yore
Figma to Implementation Workflow
The size of the team, and the speed at which we were working meant that I had to be far more involved in finding solutions when the original designs failed to meet our standards once they were in game. I collaborated closely with the designer to make sure that the solutions we found maintained his vision for the UI without sacrificing performance or function.
The Player Info Panel is a perfect example of this process. The initial design was both lacking important elements, and was too information dense to be legible. I built it using dynamic layouts and common components, so I was able to adjust the elements in real time as we iterated a solution we were satisfied with.
Iteration and Collaboration
Final Dynamic Visibility
Over the course of a few months, I replaced almost all of the elements of the player HUD, diegetic UI, and many of the game’s menus. The individual elements are too many to list here, but you can see an overview of the work we did in the patch announcement we released to the players.