Rally to the Waypoint
Halo Waypoint has served as a community hub and an extension of Halo game experiences dating back to 2009. As the team works to build the next iteration, what are your high-level goals/pillars for the site?
Tiana Los: Halo Waypoint is part of my Halo story. I was a completionist when I started hardcore gaming Halo in 2009. Waypoint introduced me to more Halo games like Halo Wars, and the Waypoint Career Milestones motivated me to earn every Xbox 360 Halo achievement by 2011. I used Bungie.net and Halo Waypoint to track and help me improve my Halo performance. When I first joined 343 back in 2011, I joined the Halo Waypoint Team and have been fortunate to be part of every new Waypoint version for the last 10 years!
For Halo Waypoint vNext, our User Experience (UX) goals had a common theme: how do we craft an experience that veterans of Halo will find value in while welcoming newcomers to the franchise? Whether you are experiencing moments that reflect your activity and accomplishments within our games, diving into our news content, or tracking upcoming events that may be of interest, we wanted to ensure these experiences were always engaging and accessible. We also considered the different ways that you can interact with Waypoint – whether you are browsing the website on a PC or using the companion app on your phone. For example, the website navigation has more space compared to the narrower app navigation, which is easy for your thumbs to reach. We also iterated on the number of navigation items and how to make that more user-friendly based on recognition over recall.
Our Visual Design goals were about designing the “right” experience for each platform. The app intentionally serves a slightly different function than the website, and it was a fine balance to maintain a consistent interaction language that was native to each platform. We also wanted our product areas to inherit as much of the established game language as we could, so elements like buttons, colors, and textures would shift and adjust to give you a more immersive, branded experience. For example, we designed subtle visual differences between Halo Infinite and MCC. When we go live see if you can spot them!
Halo Waypoint includes the mobile App (left) and the website for your computer (center, right) or mobile web browser. [Click here to download the full-size image.]
Eric Dies: For our companion app, we focused on surfacing the features that are nearest to gameplay. As an overall philosophy, we really want the application to cater to all users, but we especially considered those who like to stay connected & engaged both during and after they play. Accessing your Spartan customizations, progression, and gameplay stats are near and dear to all of us as gamers, so allowing these to be accessible within a few taps of a finger should hopefully be pretty fun as we launch Waypoint and Halo Infinite.
Customization on App (Left) and Progression on App (Right). [Click here to download the full-size image.]
As another goal—and really this is the case for the entire ecosystem—we want to reduce overall friction and give everyone as much flexibility as possible to get to the content and features they enjoy the most. One of the ways we are doing this is by elevating the app into a platform of sorts. Within the companion we plan to support not only Halo Infinite, but Halo 5 and all the latest additions to the Master Chief Collection. We will also be providing access to all the latest news and have plans to experiment with some social features further down the road, so there’s still plenty cooking even after launch. It’s really a companion app of companion apps that we hope will be your connection to the Halo ecosystem on mobile.
Game Management showing Halo Infinite (Left) and Halo 5 (Right). [Click here to download the full-size image.]
Speaking of the ecosystem, we also needed a beautiful brand mark for the next evolution of Waypoint, but before we get too far into those details, I’ll pass the baton over to CJ Ramos who worked with me as the designer who created those elegant pixels.
CJ Ramos: Along with a refreshed website and app, we thought this was a great opportunity to revisit the Waypoint logo. For a while, our website didn’t have a Waypoint logo but with the inclusion of a new companion app we needed new branding that would appear in app stores, on device home, and menu screens. The solution we landed on takes design cues from past logos but with an updated modern typeface and a strong graphic symbol that can be used independently like in a favicon or app icon setting.
Halo Waypoint Brand Mark (Left), App Icon (Top Right), and Favicon (Bottom Right). [Click here to download the full-size image.]
One of our top visual goals, for the website, was to align with Infinite’s design direction but also have our own unique style. We wanted to incorporate larger images since ultrawide and 4K monitors are becoming the norm. This allows us to showcase the Halo universe in more detail. We wanted to incorporate strong cinematic type with contrasting thick and thin weights to create structure and order. We also wanted to minimize supplementary graphic design like we did in the past. Things like thin segmented lines and subtle transparent shapes help frame the content without distracting.
Beyond a fresh coat of paint, why did the team embark on this journey to re-design and rebuild Halo Waypoint?
David Ruttka: Sometimes it can be a tough call whether to update a legacy system or rebuild on a new tech stack. I was exploring other areas of Microsoft when this decision was made for Waypoint, but I deeply believe it was the right decision. I'm delighted and honored to be a part of this journey.
The Waypoint Development Team now speaks a common language across web, app, and our services; this reduces some of the cognitive friction that comes with an inevitable context switch. We've also fully embraced TypeScript, and despite some initial learning curves, it has brought a massive productivity boost in the long run. Types can never be substituted for tests, but I'm continually surprised at how much TypeScript does for us! We also have access to more modern tooling and a more active developer community.
But enough about the technical stuff. We also got a chance to refresh the way that the Development Team interacts with the Design Team, and if you ask me, the collaboration has never been better. With that I'll turn it over to Tiana.
Tiana Los: Empowering “design thinking” was at the forefront of the Waypoint vNext journey – crafting experiences that we could empathize with, define, ideate, prototype, and test. We leveraged the collaborative design software, Figma, that that enabled our process and the creation of design systems (aka “design library”) for both website and app platforms. Compared to the 2014 launch of Halo Waypoint, the use of design systems was a technical leap for the Halo Waypoint design process. Design systems allow designers to create single elements like a button – or a grouping of elements – that we can reuse in all our design files. If we change that button style in the design system, that change propagates to all the design files. Design systems save time and help us keep things like the navigation updates consistent throughout all the designs. It’s also a great tool that the Development Team can reference. All that said, the process and tool improvements will help Halo Waypoint to support Halo for years to come.
At the beginning of the design process, we kept things like Accessibility top of mind. 60% of disabilities are invisible – so it’s a constant learning process. To me Accessibility isn’t just a requirement, it’s part of the everyday experience. One of my grandfathers used a wheelchair in his later years, and my other grandfather was blind for all the years that I knew him. Other immediate family members have color vision deficiency (aka color blindness), which makes for very interesting color considerations when designing complex visuals. For example, CJ leveraged different line weights and patterning so that folks with color vision deficiency can also read the data.
Legibility also goes beyond Accessibility. For example, we considered the pixel width of the content in a news article. It's easier for our eyes to read from one line to the next when the width of the text is roughly 50-75 characters which translates to 550-600 pixels for us. Learning how our brains process information is an aspect of User Experience and coming up with creative solutions is part of the fun!
News article on Halo Waypoint vNext. [Click here to download the full-size image.]
CJ Ramos: In this redesign, we wanted to increase functionality and Accessibility. We paid close attention to colors, color contrast, textures, font sizes, and font weights. Throughout our site we are constantly checking the contrast ratio to make sure all the text is readable against all background scenarios. We also designed our charts and graphs to be less dependent on color. We started out with no colors at all and played around with line weight and texture.
Example graph with Accessibility in mind. [Click here to download the full-size image.]
Going back to the earliest days of Halo 2, Halo games have always had additional out-of-game experiences brought to life on the web. How will Halo Waypoint help to extend Halo Infinite beyond the game itself?
Eric Dies: Well, let me start by saying I have played Halo since the very beginning, and I’ve definitely played my fair share of Halo 2. In fact, it’s the only game launch where I stayed up late to get in line for its midnight release. I remember waiting up with my college friends, laughing at our past multiplayer shenanigans, and not feeling compelled to stare at my phone while doing so! Back then we weren’t quite so connected though—I think I had a flip phone and a Palm Pilot that only worked on Wi-Fi, but when we weren’t otherwise in classes or playing Halo in our dorm rooms, our multiplayer & campaign stats were super important to us. That’s definitely still the case today, and for all those who are hopping back into MCC for the new seasonal content and to re-live their early Halo 2 glory days, we’ll be capturing that as well. Players should find we’ll be keeping up with a great deal of their performance, but we’re also delving into surfacing gameplay features to both our Web & App platforms.
Master Chief Collection stats shown on Web (Left) and App (Right). [Click here to download the full-size image.]
Speaking of gameplay features, I’ve had the recent opportunity of contributing design leadership not only to our companion app but also to the presentation and realization of Halo Infinite’s upcoming customization experience, so that feature is very near and dear to me. We’ve been hard at work building cross-team partnerships to bring as much as we can from gameplay features like Customization & Progression into both our website refresh and companion app experience. Giving players the ability to manage the look and feel of their Spartans and equipment, manage their Battle Pass progress, and launch consumable items on the fly are just a few ways we are extending gameplay. For the features we integrate, we want to pursue design parity as much as possible. Giving fans the unrestricted ability to choose, discover, and explore the abundance of options available to them across all progression and customization categories will provide fans with more opportunities to find the “what” and the “how” they would like to pursue regardless of the device in which they engage.
Halo Infinite Customization shown on App (Left), Game (Center), and Web (Right). [Click here to download the full-size image.]
Setting design parity as a goal for the app & web provided some tricky challenges regarding the UX and Visual Design. Thankfully, we managed to tackle most of those, but even as it pertains to Customization & Progression, we always strive to preserve familiarity, bring the lore forward, and keep things visually consistent. Eddie Arriesgado, who worked as our key visual designer on the project, will speak to some of that.
Eddie Arriesgado: I’ve also played Halo from pretty much the beginning, and the franchise has always had a distinct look and feel. This, however, has evolved over the years so when designing the overall visuals for the app one of the challenges was how to have an agnostic design philosophy while paying homage to the various games of the past. The way we set about doing this was by having an overarching aesthetic for web and app that mirrors Halo Infinite’s UI particularly in terms of type and general layout but with iconography and color differing for each of the games featured within the app.
In terms of Halo Infinite’s customization, one of my hobbies is collecting art books and video game merchandise. I’m constantly scouring the internet for information and the latest news about the various franchises/artists that I’m a fan of. Coming from that mentality, one of the main things I focused on when working on its UI was to create a view for our users to be able to quickly parse what items they have vs items that they have yet to acquire. Also, with that in mind providing them a quick way to access information on how to acquire these items.
Also like many people, as much as we would like to play non-stop, we have other obligations in our daily lives so when I’m unable to game I sometimes like to plan and optimize my next session. Item inspect, which is interconnected across multiple features of the app such as progression, customization, and store is one of the ways I can do so. From this screen I can favorite an item and learn how to acquire it, and then when I’m able log in some game time I have a plan to reach certain collectible goals.
David Ruttka: I'll admit that I was a latecomer to Halo. When I joined 343 in 2014, I was asked about my favorite mode, and my answer was something along the lines of, "I guess we're about to find out." It didn't take long for me to get deeply engaged, and for the past several years, I've found myself playing more Halo than anything else.
I wanted to jump in here and say that from that perspective of a regular player, I love what the Design Team has done in crafting the new Waypoint experience. Of course, I've kept a dev build of the app handy for testing, but now I find myself launching it anytime I jump into the game. From tracking my best times and scores while replaying MCC campaigns to interacting with progression and customization features during Infinite playtests, it really does feel like "a companion app of companion apps."
(By the way, I can now say without hesitation that my favorite mode is anything with flags or bombs, but especially Husky Raid for social play).
Many readers may not realize how integrated and intertwined development is between Halo Waypoint and the game itself. Can you speak a bit to how these two areas overlap and the processes by which these specs are created and then ultimately made real?
Chad Mirshak: I've been fortunate enough to work on both! I was there to do the initial kick-off, high-level experience design and visual direction of Waypoint vNext, and then transitioned over to help drive visual direction on the Halo Infinite UI Team. The integrated, collaborative process we were able to develop and maintain between these two groups is something I am quite proud of.
From the very beginning of vNext, one of our design goals was to deepen the immersion and connection between Waypoint and each of our product ecosystems. Simply put, if your first point of entry to the Halo Infinite brand was Waypoint you would already be familiar with much of the game's experience design, and vice versa. This not only extended to our visual and interaction language, but also in the realization of some of our more ambitious 3D presentation moments.
The Transmedia Design group really worked as an extension of our Infinite UI Team to adapt the presentation being crafted in-game for a web and mobile audience. This included having regular check-ins with both the UX/UI Team and our feature partners, complete access to all our documentation and visual assets as they were being developed, and (in more than a few cases) Transmedia even lent us their expertise to help develop content for the game - you'll see their contributions throughout our front-end experience when Halo Infinite releases later this year.
Eric Dies: For both Infinite & Waypoint, we typically start by identifying, at least on a high level, what are the base design concepts as a foundation for our specs then continue to iterate upon it. There’s usually a blue sky phase around this time where we dream up the various ideas for the experience(s) and set a vision for the future, but as we get into the actual experience design, we will often expand upon or come up with entirely new ideas that we’ll retroactively document in our specs. Ultimately, we’re looking to surface the best ideas that bring the most value to the player experience while working within the constraints of our tools and tech, but at times, the value of some ideas justifies innovating within our tech pipelines as well. It’s an interesting back and forth to discover the limits of our existing APIs and where innovation can justify pursuing advancements in this arena.
This whole latter part of the process is wildly collaborative and requires a great deal of coordination with other teams for ideas to see the light of day. Without our partners, none of this would be possible. There’s also a great bit of nuance to convey in giving our more grounded realization moments the magic needed to capture the imaginations of our fans. All in all, there’s a great deal of ambiguity as we concept, but as we begin to put pen to paper (or in this case—RGB Values to Pixels) what does and doesn’t work starts to become abundantly clear and the needs of the experience start to “request” that our designs develop in a certain manner to feel appropriate.
Tiana Los: Overall, this has been a collaborative process with teams across the studio. We sync with each game team for MCC and Halo Infinite. We also collaborate closely with the Content Team and by extension the Esports Team, Halo Support, and more. Also, it’s important that we work with the Community Team and understand how they support readers like you ;) here in the Halo Waypoint blogs and the Forums. Your gaming community can make many online experiences memorable and unique. Ultimately, working with our partner teams helps us understand what experience we’re trying to create and then we go about solving that experience with design thinking.
KP: From my point of view integrating with the game teams within the studio we keep as many of our processes, tools, and pipelines as similar as possible. We share a similar team structure despite being drastically smaller, so that enables us to share much the same language and workflow as the Game Team. This allows everyone to be able to cross disciplines and contribute to our work without the hit of a context-switch.
The two major areas where our challenges are quite different are in purview and platforms. We serve the studio as a whole, which means we need to cast a wider net in planning and communications. Web and app platforms come with their own sets of requirements and tools, particularly mobile which is fragmented as we develop for both Android and iOS.
David Ruttka: I can't thank the Game Team enough, particularly regarding our integration with Infinite features. From the Development Team's perspective, we could not bring the Design Team's vision to life without their support. Whether it's their impressive suite of documentation, making time to talk through questions even in the busiest of times, or giving us a heads up when they spot a bug, I put a tremendous value on their collaborative mindset.
From your perspectives, what are some of the similarities and differences when it comes to developing and launching a website vs. a game?
Tiana Los: Whether you’re designing for a game, app, website, or software, the UX design principles and processes are universal. When designing new experiences in Halo Waypoint, we don’t just work on an isolated screen. Instead, we consider the entry point to that experience – so that we have a better understanding of the “end-to-end" user journey. Compared to a storybook, it’s like opening the book and considering the “once upon a time” all the way to "the end.” It’s surprising the gaps you can find when working through an entire user journey. Designing end-to-end is just one aspect of the process. It’s also crucial that we validate the experience through user testing and subsequently iterate based on the feedback. This is made possible through User Research (UR) and Jason has driven many of these opportunities.
Jason Unck: There are a lot of similarities in UX research when it comes to developing and launching a website & app vs. a game. Here at 343, we are spoiled to have access to the same UX Research Team that the Game Team uses. The process is very similar. We start with the features we want to support from the game and then we design. Once the team is happy with those designs, we move onto the prototyping stage. Once the prototypes are polished both web and app, we will draft a series of user scenarios and questions to test. We then reach out to the UX Team to strategize the proper testing methods.
The two main methods we use are usability testing and something we call “Expert Reviews.” Usability testing is where individuals with different experience levels with Halo are interviewed as they test our prototypes. During these interviews, they provide feedback on what they like, dislike, and any problems or confusion they encounter. Expert reviews are when the UX Research Team tests our prototypes themselves and puts together a report following a methodology called Tenets and Traps. Tenets and Traps is a UI evaluation tool that helps to identify common UI problems that are often seen across many types of user interfaces.
After feedback is collected on the prototypes, we receive a report from the Research Team that describes their findings in great detail. We then use those findings to help make informed design changes. We continue to make design changes, update the prototypes, test internally and the process loops until we have the most polished informed designs possible.
Xbox Research building and test lab. [Click here to download the full-size image.]
With Halo Infinite shifting to a live service and launch being “just the beginning”, how does this impact planning and development for Halo Waypoint?
KP: Waypoint had an extremely active role in Halo 5’s content updates and similarly supported Halo Wars 2 through its multiple seasons and additional leaders. Not only did we support additional content, we rolled out entirely new features inspired by updates to the games and fan feedback.
With the move to Waypoint vNext we plan to continue this level of support not only for Halo Infinite, but we will also be extending season support Halo: The Master Chief Collection, enabling you to view your seasonal progress and rewards.
Tiana Los: We designed Halo Waypoint to be an extension of the game. While there are Waypoint-specific features that we will continue to develop, our goal is to remain in parity with Halo Infinite as it continues to evolve post-launch. Our approach, like many other experiences, will be to constantly iterate and refine, take user feedback, and develop content that will honor the game and the brand, while providing distinct, compelling moments for our community. Each of us has our own “Halo story” and this is just the beginning of our collective journey with this next chapter of Halo. We’re just as excited about the future and the infinite possibilities.
Jason Unck: I remember the first time I played Halo: Combat Evolved back in November 2001. It was the reason I bought the first Xbox. I would stay up until 2:00 AM on work nights practicing to be the best out of my coworkers and friends. If this companion app existed then, I would have probably lost my job as it would have been another tool to obsess over to become the best. One of my favorite features of this app is progression. Picture playing and progressing until 2:00 AM on a school or work night, being so tired that you didn’t have time to check your progression. You get to work the next day and you get to check your progress from your pocket!
Our goal from the very beginning has been to have this app feel like the game, to truly be a companion app - progression is a fitting example. There are so many cool things about having access to progression when you’re not at home plugged into your console or PC. Anything you can manage and view in the game, you can do in the app. There are several key features in progression including the Summary, Battle Pass, and Event sections. From the summary page users can view their daily and weekly challenges, see their next items to unlock in Battle Pass and the next rewards from the current Event. There is a dedicated Battle Pass section that allows the user to explore their current and past Battle Passes. They will also have the opportunity to buy Battle Passes right from the app.
As the game evolves and changes over time so will Waypoint. This app will be Infinite’s buddy for years to come. So yes, this is just the beginning.
Halo Infinite Progression shown on Game (left) and App (right). [Click here to download the full-size image.]
All of the new game-specific features are super exciting but Halo Waypoint will also continue to operate as a community hub for the franchise. What types of changes / updates will we see in this regard?
KP: Now might be a good time to announce that we will move to Discourse as our forum platform. This is a huge benefit for players who now get to use one of the most popular forum solutions in the world, and also for us who no longer need to build and maintain our own forum as we did for the current site.
CJ Ramos: One of the things I was honored in creating were the new service awards. I wanted to make medallions that looked very premium, prestigious, and also very unique to Waypoint. I took design cues from past commendations, medals, and achievements and combined that with my work on the Halo: Outpost Discovery medallions. I hope our users love them and have fun collecting them.
Examples of our new Service Awards featuring different tiers and categories. [Click here to download the full-size image.]
What are you personally most excited about with the next version of Halo Waypoint?
KP: At the end of each momentous shipping day, I hop in the car, roll down the windows and take a long ride while listening to, “Juicy” by The Notorious BIG on repeat. So, that.
Tiana Los: Stats!
CJ Ramos: I’m excited about us showing [REDACTED] and [REDACTED]!
Brandon Blanchard: As a stats junky, I can’t wait to spend time optimizing my performance and stressing over that 0.1 KDA that my buddy had over me in the last match.
David Ruttka: I second everything mentioned above (although as a long-time git user my personal celebration song has been Push It), but I'm most excited about sharing it all with my kids. Comparing our stats, customization, and progression has been a blast for us, and I feel like the next version of Waypoint is going to make all of that even better.
I'm especially looking forward to the look on their faces when I tell them they can have Infinite screen time, and then the following look on their faces when they recognize that this was just a terrible dad joke.
What’s the Waypoint team focused on in the remaining time leading up to launch?
Eric Dies: "The only good bug, is a dead bug.”
Tiana Los: Polish, polish, polish! Ship years are one of my favorite things about the gaming industry – it's exciting and energetic. We're receiving feedback from flights – thank you, everyone, who takes the time to fill out surveys – your feedback is invaluable as we continue to polish and iterate! The Design team collaborates with the Halo Waypoint Development team throughout the development process, but as we get closer to launch communication increases and we’re all pushing to execute. I enjoy sharing tall ship memes throughout ship cycles – welcome aboard!
Brandon Blanchard: When you get close to release the scope of your releasable features becomes clearer and focus tends to move towards making the features that are in scope as good as they can possibly be. Bugs have to be fixed and performance must be tuned for the wide range of devices that our content will be served on. So things are very focused on how we can deliver the highest quality experience to you in the time that remains.
David Ruttka: To the points above, the Development Team is turning our efforts toward quality. KP and I have also been working on how to improve and extend our Waypoint flights. As Tiana noted, feedback from such flights is paramount, especially considering mobile device fragmentation and accessibility, where I personally have a lot to learn. I read every word of feedback that gets to me via post-flight reports and sincerely appreciate hearing how we can improve the experience for our fans.
Thank you for talking with us about Halo Waypoint today! Any final parting words you’d like to share with our community?
Jason Unck: I can’t wait to go pick my daughter up from school and while I am waiting for her to get out of class, I’ll be customizing my Spartan armor from my phone. Then I’ll drive home, finish the workday and boot up Halo on my Xbox and be greeted with my freshly updated Spartan. Being able to interact with my character on the go will be a convenient incentive to perhaps actually get good at Halo, both casually and competitively. I hope you feel the same.
Tiana Los: Looking forward to seeing you on the battlefield, Spartans!
CJ Ramos: Thank you to our loyal and really skilled fans out there that make it so hard to play a fun, casual, and stress-free game on MCC! I hope you enjoy all the functional and visual updates to Halo Waypoint.
Eddie Arriesgado: Stoked to see what awesome customized Spartans you guys make and hopefully I won't be admiring you guys too much in multiplayer that I forget to shoot.
Brandon Blanchard: Halo has been a huge influence on my life and I can’t wait for this new generation of Spartans to get behind the wheel of a Warthog and spawn camp me.
David Ruttka: While I was late to the game, Halo has become a huge part of my life as well. I hope you all enjoy what we're building, and I look forward to seeing where we'll go next.