top of page

Designing Log In Screens

Mojang Studios is a AAA video game developer known for developing the sandbox and survival game Minecraft, the best-selling video game of all time.

Role

UI Designer

Tools

Figma

Team

UI Designer

Illustrator

Copywriter

Duration

12 weeks

How Do You Make A Log In Prompt that Entices Players to...log in?

As a larger push from Xbox, Mojang Studios was migrating it’s Mojang Accounts to Microsoft Accounts (MSA).

Challenges:

  • Low Migration Rate

  • Lack of recognition from players that Minecraft was associated with Microsoft

  • Outdated Log In Pages

Solution

Starting with sketches, we redesigned all log-in screens by including:

  1. Fun animations

  2. Explanation of benefits of logging in

  3. Update UI that included elements of MSA log-in to connect brands

Video Game Screenshot

Design Process

Mojang had started migrating users from Mojang Accounts to Microsoft Accounts, as part of a push under Xbox to unify the studios. With this, I was tasked with redesigning the look and feel.

We started focus on Minecraft Bedrock edition, instead of Java, and then focused on Minecraft Dungeons. From there, we went through to identify all the potential points of entry that would be necessary. This came to be about 12 pages. 

As Minecraft is primarily played on mobile devices, we focused on a mobile-first design. 

We knew we wanted to introduce the updated UI, colorful images and animation that best represented the brand, and copy that exemplified the Minecraft jargon. 

Simply put, here's what we needed to do:

Angry_Wolf_JE2_BE2_edited.png

We needed the style to match the updated Ore stylings that Mojang adopted

Axolotl.webp

We wanted the feel to have that classic Minecraft charm, so I designed a series of animations for each section.

Spider_JE4_BE3.webp

The Copy was very intentional, as we wanted relay the benefits of logging into a Microsoft Account. 

What were the current screens like?

Login screens in the game were original to the earliest releases and hadn't been updated since. The UI was outdated and the copy didn't reflect the tone that is so definitely Minecraft. 

World Of Minecraft
Minecraft Church

What did we want the sign in to look like?

Each Section had their own purpose, so each experience from was tailored to the potential intent behind logging in. That meant custom animations and custom copy. 

Sign In Process

nS1.gif

We have the screens, what next? 

With the UI Settled, our team partnered with an internal Microsoft team to design a function sign in process.

But why? Well, the low migration rate was a two fold operation.

- Part 1 was convincing people as to why to log in.

- Part 2 was about ensuring that users knew where they were logging into 

We met to discuss ways to better represent to the user that their MSA login was still a part of their game. Setting this process was vital so other studios could follow these plans as Xbox rolled out wider sign-in migration plans as they unified under Game Pass. 

We focused on introducing elements of the game's feel into the sign in screen, ensuring to include mods for interactivity and the day/night cycle for progression cues. Designs are not included due to NDA's

Outcomes

This was for sure the funnest project I've had the honor to work on, resulting in screens that were truly fun and engaging, if only rarely seen. The nature of log-in screens is that once you're logged in - you're done. A major goal was to reach the oldest players who have had Mojang Accounts since (at the earliest) 2011, before the migration deadline. 

Regardless, the sign-in modules got a much-needed makeover that's worthy of the title.

image.png
Frame 34.png
tumblr_mjgxab5jo51rq1xcqo1_500.gif
bottom of page