Battle.Net: Account Creation Redesign
5.2023-6.2023
Context: Coursera Course
My role: UX Designer
Battle.Net is Blizzard Entertainment’s main product landing site as well as the name of their launcher. This is a redesign of the account creation flow for new users. I am interested in creating an equitable and accessible experience in gaming and other platforms that utilize beautiful visuals, so tackling this project was particularly important to me.
The Problem
The design is out of date and the user journey contains unnecessary pain points
The Solution
Reduce the number of pages and create additional checks for people to make sure they are putting in the information that they want.
The Goal
Provide an enjoyable user experience
Clarify the purpose of the battle.net landing page
Drive onboarding and create a user-centric approach
I compared the current login process with the design used by other companies and NN/G’s recommendations for customer onboarding.
The Nielson Norman Group recommends the following for customer onboarding:
Reduce down to a single page
Remove as much unneeded information as possible
Give feedback
Reduce frustration
Hint text should remain outside of the textbox
Remove the need to remember information
Arenanet uses a single page to onboard new customers, removes excess textboxes, and uses background images and a video to remind users why they are going through this process.
Battle.Net uses an 8 page process with a dark palette background and requires the user to remember information across multiple pages.
Personas helped me to keep in mind unique difficulties individual users might possess and barriers to entry they might experience.
Michael Weston is a busy dad who needs an easy login experience because he has many options for games he can buy to play with friends but not a lot of energy to make decisions.
“Why can’t I just tab through to put in answers? This is really annoying.”
Pain Points
The account signup process is a poor experience by it’s very nature
Current account creation process is visually uninteresting and feels out of date.
Current process requires remembering information from one screen to the next
Current process can stall without giving the user feedback
reduce frustration
hint text disappears
Early designs clarified the purpose of the site.
Battle.net is a digital storefront, but it also contains information on new products and updates. While the website is the first place new users might meet “battle.net” most recurring users will interact with blizzard through the downloadable app. Therefore it is necessary that the website be enticing to new users and showcase what they have to look forward to if they become returning customers.
I sketched out a quick site map to be sure I wasn’t forgetting anything important.
I wanted the landing page to be exciting and show that the company was still alive and providing updates for its IP.
It’s important for users to be able to check their work and visually this is easier if you change the format of the content just enough to force the brain to reread what it wrote. I wanted a popup to appear after the initial information was filled out to serve this purpose.
A user flow helped me remove as many pages as possible from the process.
I created designs for multiple screen sizes to clearly lay out the user experience for each one.
A usability study showed that my prototype was intuitive but needed some tweaking.
Parameters
Unmoderated Study
6 Participants
Remote
5-10 minutes
Findings
Animated backgrounds are distracting
Avoid overly animated text
Make sure buttons are clear
Make sure text field names are clear
Make sure a “get me help” button is available if the “finding humanity” function fails
My final designs are a labor of love for all the different people who enjoy visual storytelling media and wanting them to have the best experience possible.
The homepage uses a background image from Blizzard’s media assets to create a more vibrant and textured look inline with their ingame menus and UI design for recent releases.
It’s important to give the user a chance to check for mistakes and reframing the content is one way to do this. Visual artists use this same tactic to check their composition.
Comments on Reddit and the Blizzard forums showed users getting stuck at this step and needing to begin the entire process over. I provide a way for users to reach support directly without needing to resubmit all of their work or go looking for help.
Try out the prototype!
Having trouble with the embed?
If I were to continue working on this project, I would…
Add a password strength meter.
Do more user testing with people unfamiliar with Blizzard products or Battle.Net.
Continue researching accessibility and looking for ideas that provide the greatest impact.
I re-learned how important this topic is to me.
The prompt for this project inspired my ongoing case study showing accessibility in character creation for creating a more equitable experience amongst diverse users. You can read more about that here.
Users who aren’t gamers may become gamers. I’ve met people across all ages and life stages looking for ways to spend time with friends and connect with others. The pandemic forced them to use the internet in ways they never had before, and for some that meant trying out videogames for the first time. You never know who is going to pick up a controller and try your game - and you don’t want to lose a customer or fan because they find your process daunting or frustrating.
This project was part of a Google/Coursera course to learn how to use Adobe XD. I started this project with no knowledge on the program and ended with the final prototype for Battle.Net.
Sources
Budiu, R. (2017, June 4). A Checklist for Registration and Login Forms on Mobile. Retrieved June 5, 2023, from https://www.nngroup.com/articles/checklist-registration-login/
Gosine, A. (n.d.). What we've learned about designing for accessibility from our users. Slack Design. Retrieved June 22, 2023, from https://slack.design/articles/what-weve-learned-about-designing-for-accessibility-from-our-users/
[NNgroup]. (2021, July 30). 3 Ways to Onboard New Users [Video]. YouTube. https://www.youtube.com/watch?v=GGRF-B6DgeI&ab_channel=NNgroup
Schade, A. (2015, June 5). Don't Force Users to Register Before They Can Buy. Retrieved June 5, 2023, from https://www.nngroup.com/articles/optional-registration/
Sherwin, K. (2015, April 26). Password Creation: 3 Ways To Make It Easier. Retrieved June 5, 2023, from https://www.nngroup.com/articles/password-creation/
Sikkema, K. (2023). Father holding his baby son on his shoulders [Photograph]. Unsplash. https://unsplash.com/photos/hS_eGxLjozs
Tognazzini, B. (2009, December 1). How to Achieve Painless Registration. Retrieved June 22, 2023, from https://www.nngroup.com/articles/how-achieve-painless-registration/
Villamil, A. (2023, May 22). Performing Goodness: The rise of ‘ethical theater’ in UX. Fast Company. Retrieved June 22, 2023, from https://www.fastcompany.com/90897746/ethical-theater-in-ux