Overview:
343 is the home of Halo, and Halo Wars. A powerhouse subsidiary of Microsoft, 343 is a household name for gamers the world over for one of the hottest intellectual properties on earth in a multi-billion dollar industry of AAA games.
My role:
UX Designer, UI Design Leader. Led several small teams in UI/visual design efforts. Performed user research, and rapid prototyping.
The problem:
Many development tools are spread out and lack cohesive design. This results in frustrated users who bypass official tools altogether in favor of inefficient, hacky solutions.
The plan:
Unite and consolidate the disparate tools and implement a refined look and feel that is uniform across all applications, reducing friction and context switching for the user to enable an easier and more fluid workflow.
Research:
Userbase was capped at around 15-30 users total given that this was an internally facing collection of tools for the client’s development team. This made user research much more meaningful as users were able to be observed individually using the tools to generate much more precise user experience reports.
Tools: Pen & paper, Sketch, Invision, Adobe Photoshop, Adobe Illustrator, Principle, Visual Studio Code, whiteboard.
Tasks: User research, User Testing, Information Architecture, Task Flows, User Personas, Wireframes, Prototyping, Branding/Identity, Iconography, Storyboarding.
Discovery #
My first challenge was to understand and diagram all existing flows to get an idea of product requirements by learning what everything does and why.
Challenges #
You could say I had something of an embarassment of riches on this assignment because I really couldn’t have asked for a better time to enter the project, or have better data and metrics to draw from.
UI/UX: The old sites had lots of fragmented information that wasn’t presented in a very intuitive way. Responsiveness was nonexistent, sites were not easily used on mobile platforms. Tools were sometimes confusing to use.
Users: The userbase for these products is very broad. There are many people who use them for different reasons and each story will have to be listened to and considered.
Metrics: Good UX leverages good metrics; of which Microsoft collects plenty of for their developers. My task would also be to narrow in on and refine what user preferences were, and how they reacted to the existing paradigm.
The relationship between products could sometimes be complex. Being mindful of this would be critical for designing a product that feels fluid and comprehensive.
343 wanted to know if I could help them design and develop a platform that would be the single product experience for their existing and newly developed assets. There was a fair bit that needed to be untangled as many of these products spanned multiple software interfaces and technologies. These individual applications would need to be unified into one package.
Luckily, this project was a revamping of an existing product, meaning that the Client already had a working product and established connections with their userbase.
Initial work #
There were many things that needed to be tackled initially.
343’s style is inspired by a simple but striking high contrast scheme that marries a bold design with clean aesthetics. Iconography and typography are gritty and fearless, utilizing macro photography that showcases simple textures or game art rendered in the SlipSpace engine.
Branding #
STYLISH. BOLD. EDGY. #
To meet 343’s timeline, I would begin a rigorous process of:
- Assessing data goals and requirements.
- Identifying primary users and their jobs to be done (JTBD).
- Defining user-journey maps.
- Determining highest value priorities.
- Gathering and implementing stakeholder feedback with each iteration.
I began by diving into our historical data, surfacing user pain points and barriers to conversion. Users commonly went directly to the tool they wanted via a bookmark, defeating the purpose all together of having a category page where all tools were documented. Most tools were sparse on information themselves, and onboarding for these tools was non-existent.
Feeling sufficiently comfortable using the products themselves and that I finally understood what they do, I set out to compile what I could for bare user metrics (which browsers were most used, bounce rate for every page, heat maps, anything that might be pertinent to how users were interacting with the product currently) I moved on to interviewing users and developing a sense for what they wanted to individually see improved. This was also very helpful in developing user personas to better refine the idea of who we were designing for overall. People were utilizing these tools differently at times to do their daily tasks, and I needed to find where the overlap was and was not.
After the interviews came the task of extracting actionable insight from them. I like to divide the transcript into individual comments and summarise them (hopefully without changing the meaning), and then group them into three distinct categories:
- Pains
- Gains
- General notes
The Pains include possible apprehensions, current dissatisfactions and tensions, while Gains are composed of desires, requirements and expectations the user might have towards this product. General notes were considered to be more neutral and could inform blindspots or other unknowns that would need to be considered further.
The branding needed to be totally overhauled.
Thematics: One of 343’s major pillars for Halo: Infinite is a stronger focus on the concept of what a militarized space might be like in humanity’s fight for survival, 343 wanted something that complimented the look and feel of other assets that were being developed with this in mind.
No preexisting assets: Crude, or nonexistant assets meant that these materials would have to be created. Overall the framework for the application felt like it was there, at least functionally speaking. Visually, it was a very different story as the tools were sparsely designed.
During the concepting and design process I set to themeing a new look and feel that took on the same aesthetics they have routinely drawn upon from their talented pool of artists. I began giving the tools a unique and pertinent feel that would not only have a very flat and clean aesthetic that matched up with branding and design goals, but be designed to be easily reusable assets as new tools were introduced.
Design needed to display consistently across browsers and devices. Using browser spoofing we emulated the sites on real devices to test internally. Knowing that our users were:
- 64% in Chrome
- 23% in Safari
- 9% in Firefox
- 3% in IE
- 1% in Edge
We prioritised fixes according to audience size and criticality.
I was tasked with theming the sites I worked with in addition to redesigning and developing the information architecture & flows.
Many huge visual updates were sorely needed with some tools (pictured below) using placeholder stock photography or tables for alignment, which can be very problematic if your goal is to have a responsive experience. All elements were designed with the collected user data, 343i/Microsoft Intellectual property, and thematic requirements in mind. These assets were designed to be modular so that they could be easily recycled as new tools were integrated in the future. A new grid system that allowed data to be viewed cross-device was then introduced to give a seamless cross-browser experience.
Before and after for the GameCMS system.
Prototyping #
Early hifi sketches for interaction design & flows.
Prototyping had to be approached a bit differently from how it normally would. We were developing a style guide and frameworking use cases for a product that technically already existed, and was in use.
Variable users: Prototyping would need to be rigorously assessed by multiple teams who fill different roles. It was crucial to make sure that the data we collected from each use case could be used to develop a product that made sense for users. The old sites were not responsive, so the new one had to be mobile-friendly out of the gate.
Once we had the bulk of our data accounted for and digesting, I created a basic site map of what we had to visually represent, and two task flows:
- one was based on the current way things are done to better visualize what we were doing.
- and another that began to refine the process in a storyboard format that would illustrate improvements over the old paradigm of doing things.
I wound up presenting both to my team as well as stakeholders and developers to see what people thought and generate some feedback.
Responsive Design: We refined what we had over the course of a week in meetings using whiteboarding, and then began sketching low fidelity wireframes that would better reflect what we had created so far conceptually. I sought help from our talented art department for what we could insofar as branding and theming with existing Slipspace branding and marketing assets for the new game engine being developed, and our sketches began to take on a clean minimalist aesthetic that could be replicated across multiple sites and therefore retain a theme. This enabled us to build confidence within the team as we all felt that a unified theme was a good way to continue.
A final high fidelity sketch was created with screens illustrating visual and typographic design details, as well as how it could be responsively built to work well on mobile devices, which was listed as a ’nice-to-have’ by the studio, but in practice always comes first for me as a user-centric designer because generally speaking I want every product that I create to work well across any device or browser.
Some variations of prototype sketches for an onboarding page purpose-built to help educate new users.
User Testing #
Armed with knowledge and a user-centric product for testing, it’s time to start getting it in front of people and see what they think.
Grouping user feedback into three distinct categories: Pains, Gains and General notes.
before and after for the Thunderhead Self-Service application.
We produced the prototype, and set it up in a way that ensured it could be hosted separately as an independent service and poll existing backend data. This allowed us to begin testing with users while not causing any abrupt show stoppers for them if anything happened to break as they began migrating over and trying it for the first time. The fact that we could now switch over to tweaking and testing in an environment where users could see and interact with it live for the first time was a great moment in the product lifecycle.
User testing was an essential part of the process and needed to be included throughout the design and development work. We learned from users that the product had to handle transferring JSON data as a standalone tool at times. Some users were sensitive about connecting their JSON to certain accounts, while others saw how this data could provide the otherwise inaccessible ability to push updates on the fly. As a standalone product, we made sure users could tailor the application with ease. They could add, manage, and schedule their updates to be pushed to Xbox Live, and personalize as needed for various touch points and preferences.
Throughout user testing and research, we also learned that not all users felt they needed advanced tools to manage their tasks. In a few edge cases, users overseeing a very small number of tasks knew every aspect of their relationship with the product intimately. For them, console commands were faster and worked about as well. This discovery helped us further refine the ideal user base and focus on their unique needs, and how we might make it a more enticing opportunity for them.
As feedback began to trickle in slowly, we started generating a usability report for the product. Overall after around four weeks of getting users to try some of the new designs we distilled the data we had collected (again, through surveying users, doing talkabouts, and looking at raw data on Azure). We found that 60% of users that had indicated pain points had dropped to a mere 10% who reported small critiques, and saw the new UI as a huge improvement over the old one and that it had taken the lion’s share of apprehension or frustration out of their tasks, especially for new users.
Conclusion #
Overall, my work at 343 was a success. Not just from a product design standpoint, but also a personal professional achievement. There were a lot of really solid takeaways myself and my team learned from this experience. The most important one for me would be the role of utilizing solid research, and the world of difference that it can make in the scope of a project when it is applied in a way that takes all users into consideration.
A UX case study is an account of the events that led you to the discovery of some new knowledge, the answer to a UX design problem. I firmly believe that the success we experienced came mostly from taking a user-centric approach and empathizing with how the users were interacting with the product. The end result was a product that took 32 weeks to complete, but resulted in a solution that put the user’s experience front and center at every turn and not only made their lives easier, but became a modular product with design and coding elements that could be reused as future tools were developed, streamlining the overall UI and UX usability into a cohesive product that can be rapidly prototyped and deployed in the future.
Looking forward, I hope that 343i continues to take a user-centric path in their designs, and continue building onto the project. There are many things I would have loved to explore, like researching ways to get our statistically outlying console command users to come over to the online tools, or exploring how other statistically small but relevant groups could be advocated for. These are certain to prove to be interesting and fulfilling challenges if they decide to continue working towards inclusion of users like this, and ensuring their needs can be met.
