Redesigning a multilingual gaming news site for Microsoft Xbox

Xbox Wire is the official news and information portal for Microsoft’s Xbox gaming brand, and the Major Nelson blog is a source of Xbox news and information from Xbox Live’s director of programming, Larry Hryb. In 2019, the Xbox team at Microsoft approached Reaktiv about a redesign of the Xbox Wire English, German, Spanish/Latin American, and French websites along with the Major Nelson blog.

The Problem

The Xbox team wanted to bring together the Xbox Wire and Major Nelson sites into a more cohesive, consistent design while maintaining the separate brand identities of each platform. They also needed a solution to simplify the creation of new content and syndication and sharing of content between sites. The new design also needed to provide the flexibility to spin up new language versions of the site for different markets around the world.

Xbox Wire ca. 2017
Xbox Wire ca. 2017
Major Nelson ca. 2017
Major Nelson ca. 2017

The Design

Xbox Wire - New Design
Xbox Wire – New Design
Major Nelson - New Design
Major Nelson – New Design

While updating the design elements, we were able to incorporate the following objectives:

Cohesive, consistent design across all sites

While the Xbox Wire sites and the Major Nelson blog are different properties, they needed to look like they belonged under the same brand umbrella. The updated design provided a brand bar to tie the sites together along with consistent design elements to provide a consistent user experience across all sites.

Unique brand identity for each site

The Xbox Wire sites all have the same brand colors and very similar logos, but the Major Nelson blog required a different color scheme to help it stand out as a unique site among the Xbox blog sites. The new design made it possible for the Major Nelson site to have its own identity while maintaining visual cohesiveness with the Xbox Wire sites.

Featured social media feeds

The Xbox team is very active on social media. The updated design provided a featured Twitter feed at the top of the page to help drive and reinforce engagement with the Xbox social channels.

Featured posts

The new design direction offered a way to present featured posts to bring more attention to important content.

“Speedbump” sections for highlighting content

Speedbumps in the updated design are interruptions in the standard home page post feed that enable editors to highlight content or include syndicated content from other Xbox sites.

Post archives

The previous design of the Xbox Wire home page included a date archive at the bottom for displaying archived content. The new design streamlined the presentation of the post archives at the bottom of the home page, and made that design element available to the Major Nelson home page.

5 Sites, 3 Themes

In order to handle the specific needs associated with 5 different sites, we created 3 custom themes: a parent theme and 2 child themes. The parent theme provides all of the common layouts, design elements, and functionality used by each site, while one child theme was built for the 4 Xbox Wire sites and the other child theme was built for the Major Nelson blog.

The goals of the parent/child theme structure were to ensure consistency across all sites, provide the greatest flexibility for customization of specific sites, and create an extendable foundation for efficiently creating additional sites in the future. This strategy proved effective in not only enabling a cohesive look and feel, but also facilitating the quick development of 2 more language versions of the Xbox Wire: Xbox Wire em Português and Xbox Wire на русском.

Content Innovations

At Reaktiv, we decided to embrace the new WordPress block editor early because we recognized its power to enhance the content publishing experience for active creators. The Xbox team also recognized this power and were excited for the opportunity to use Gutenberg to create richer content for their audience.

Out of the box, Gutenberg provides a robust set of tools to empower content creation along with the extensibility of WordPress for creating custom publishing features. The Reaktiv team went to work developing bespoke blocks and features for extending core blocks to help tailor the system to meet the Xbox team’s specific needs.

Data Tables

Major Nelson frequently needs to present data about upcoming deals and promotions. The process of adding these tables to blog posts was tedious and cumbersome. To make this more efficient, we extended the core table block to make it possible to import the contents of an Excel file directly into the table. This reduced the time it took to prepare these data tables from hours to minutes.

Product Block

The Xbox team also needed a way to easily display details about specific products within their posts. To facilitate this feature, we developed a custom block to automatically pull product details from a product API. This provided a pre-formatted layout with all of the elements needed to present the product details by simply selecting the product to display.

Partners

The Xbox team is a world class group of content creators and communicators whose job is to effectively deliver timely, rich content to millions of Xbox players around the world. By partnering with WordPress VIP and Reaktiv, this team is now able to focus on their mission while VIP provides reliable and powerful WordPress hosting and our team provides cutting edge publishing tools.

Get started today on partnering with Reaktiv for your next big redesign.

Bring your biggest ideas to light

Our brilliant team creates inspiring and authentic digital solutions for some of the most beloved brands in the world.