Brief: "Hey, Chris, the new game mode is gonna have a bracket system, but not a regular bracket - it's a Swiss bracket. No idea how to make that work, can you figure it out?"
Role: As senior UX designer, I defined the problem space, analyzed comps, created player flows, ideated and iterated till the cows came home, set an artistic vision, and guided the dev team through development.
Impact: Delivered a new game mode to our live title, increasing engagement for top end, elder players. Enabled a revenue lane for new characters. Raised the visual quality bar. Established UX practices within a new team.
WWE: Champions
WWE: Champions is a top rated, top grossing free to play mobile game developed by Kung Fu Factory in partnership with Scopely. This title was expected by the publisher to be a top quality, high performing product from the start, and represented an exciting challenge for us to meet the expected quality and performance level. I worked mainly as a UI implementor, with a hand in asset creation, UX and UI design.
A Top End Visual Experience
The expectation for this game was that it would have top tier visuals, as well as exciting and smooth interactions and feedback. As primarily a UI implementor, one of my main directives was to make sure the implementation met the quality standards that had been set by the art team. This required pushing the existing mobile technology to its limit, and developing many creative technical solutions to allow us to hit our target. This was achieved by diligent attention in a number of areas:
Faithful Reproduction of Mockups - While this sounds obvious, it is not a given that technical implementors can accurately reproduce in game content that matches the art team's vision and output. I leaned heavily on my background as an artist to make sure the final result not only matched the art team's mockups 1 to 1, but also to make sure that subtle elements in the designs worked together to maintain the high quality bar. Also, frequently the implementation process uncovers things the art team did not anticipate, and I would have to make sure any additional elements or modifications met the same standard.
Transitions and Feedback - The art team's deliverables were almost always static layouts. Animations and transitions in the UI were not considered, so I had to develop these myself. For many cases I developed a visual language which I followed when implementing any layout For example every screen enter transition lasted a defined duration and consisted of the same animations on the same base elements, while any unique elements would then be animated separately in a way that fit the scheme. I also had to make sure that all interactions gave proper feedback that both communicated properly and fit the visual quality of the game. This included button presses, game state changes, reward collection, and more.
Additional Flair - The creative leads expected a level of flair and polish that required work beyond simply carrying out the art team's vision. It fell to me to create vfx in the UI, ambient animation, and other elements to drive the high end experience we desired. All this had to be added to the project while still fitting within technical limitations.
Optimization - Pushing the visual quality ends up necessarily pushing the technical limits of the target devices as well. This was a constant challenge requiring frequent optimizations, refactoring, new tech solutions, and other problem solving. Some of the considerations and strategies I employed are as follows:
- Careful planning of layouts - Carefully planning the actual implementation was absolutely critical. Sprites needed to be sliced as tightly as possible. UI elements had to be created using as few sprites and components as possible. Overlapping elements had to be minimized, and many more such considerations had to be constantly balanced.
- Deep knowledge of the engine - I had to learn the nitty gritty ins and outs of the Unity 3d engine in order to apply the most optimal solution for delivering each design. This included consdirations such as using the best approach to create shadows or outlines on text, how to properly mask out scrolling windows, and how to use Unity's base UI structure to the greatest effect.
- Technical benchmarking - I had to constantly watch the technical benchmarks such as draw calls, amount of overdraw, and fill rate to make sure layouts were performing nominally. The engineering team also ran benchmark diagnostics on many target devices which I would use to re-optimize layouts.
- Targeted solutions - In order to target a wide range of devices, we had to automatically apply different solutions to different tiers of devices. Working with the engineering team, I used a system that targeted lower tier devices with lower resolution sprites, so that we wouldn't have to compromize the quality on top tier devices. I also was able to target individual layout elements to not be displayed on devices that couldn't handle them.
Feature Highlight - Consumable Use
The consumables system was a feature added after the main game loop had been completed for a while. This addition allowed players to enter the core game with single use items which they could deploy strategically to improve their chances of winning. This system was expected to be a driver of monetization, and so had to be engaging for the users, as well as being seen as useful.
The Problem - The design and art teams specced and mocked the consumables system for implementation. However, this system was very dynamic and had to interact with the main gampeplay in a very active and exciting way. Animations and interactions had not been designed, and it was up to me to deliver these core elements of the experience during implementation.
The Solution - As was part of the expectations for my role, I developed a visual identity for the use of consumables, including visual fidelity and flair, animations, and visual feedback. Some considerations of this process included:
- Wireframing - I wireframed the layouts and expected interactions during the planning and design phase.
- Visual Language - The consumables each had a specific effect on some other element of the UI. I had to design the feedback for each different element/effect to make sure it communicated to the user what had actually happened to their game state.
- Visual Excitement - This feature had to really pop. I designed ambient animated elements to the feature that both added excitement and defined game states for elements (enabled, activated, success, etc). I also implemented complex animations and vfx that interacted with the main game systems.
- Optimization - As always, the visual fidelity of this system pushed the limits of what the technology could handle. I had to use light weight customized solutions to produce vfx and animations that were as exciting as possible without affecting the game's performance on device.
Conclusions
This game was a great success. It had significant periods as the number 1 app in the app store, as well as top 10 grossing. It was also well reviewed and enjoyed significant attention from Youtube and social media personalities. It continues to perform well over 7 years after its release. The product's success and high visual quality gave our studio a reputation that afforded us the opportunity to work on many more higher end titles. For me personally, it gave me the experience and tools to transition my career into a full time dedicated UX designer.
