16-bit Taylor

Minecraft.net Account Services

Project

Web & Mobile · UI/UX · Wireframing

Mobile version

Overview

Minecraft.net lets players log into their accounts to update their in-game character skin and subscribe to the Minecraft Realms service. The old version of account services was only tied to Minecraft: Java Edition, however, and the studio is not only creating more Minecraft titles within the franchise, but has two versions of its flagship title. The goal of the new account services section of the website was to, one, bring it up to the latest branding standards set by the team in Sweden, and two, allow players to manage all of their games...not just Java edition.

Scope

This was a huge, multi-phase project that spanned the length of my year-long contract. The first phase launched in 2022 and is available to everyone with an account right now. I worked with the Web Director, Marketing Leads, In-Game UX Designers, Accenture Development Partners, and our team's Producers to bring this to life.

Screenshot of home page Screenshot of realm purchase page

Outcome

The new account section is the first web update that utilizes the new brand guidelines. I worked closely with my team lead to ensure we adapted the (mostly) print samples into web-friendly templates.

This portal now shows players all of the games they own and suggests new games or games they don't own. Players can manage their subscriptions and in-game skins from this new portal. These features are cleanly nested within each game to prevent confusion since the past experience only showed the Java edition. At the same time as this portal was being developed, the Mojang team was working on migrating Java accounts to Microsoft accounts. I worked with them to combine overlapping pieces, like the login and success pages, too.

Credits

  • Web Director – Saher H.
  • Design Manager – Christine G.
  • Web Designer – Paul M. (Minecraft.net website header, nav, and footer)
  • Web Producers – Justine L., Tia D., Hillary C.
  • Web Developers – Accenture (Microsoft Partners)

Design Process

Defining the architecture via a sitemap and wireframes was the first step.

I made wireframes to drop in content regions and help define a direction to move forward in. Here are a few different options I worked through.

Exploring website navigation. Separating by platform was eventually removed due to technical constraints.

Here are various concepts that ended up on the cutting room floor for one reason or another as features and web architecture were added and removed.

Interested in hearing more? Let's connect.