Project Overview
The mission of this project was to apply user centered design principles to create a new account registration user flow for a popular video game website. I chose to analyze the experience of WarCraft.com, the website for the popular WarCraft video game by Blizzard Entertainment.
This was my second UX design project within the Google UX Design Professional Certification program. I started working on the project in February 2022 and finished in May 2022. My roles in the project were "User Experience Designer & User Researcher."
In this project, I was responsible for:
User Research
Competitive Analysis
Wireframing
Low-Fidelity & High-Fidelity Mockups
Prototyping
Usability Studies
The Problem
The current WarCraft registration user flow takes users away from the main game page to a separate website. The registration process itself is simple but disjointed for some users due to pagination. The WarCraft page itself also needs an update. It features competing menus and some outdated design choices.
The Goal
Bring the registration process to the WarCraft website, so users feel like they are in the right place. Condense the registration to a single page and update the website design.
User REsearch Summary
Going into this project, my assumptions were that the website needed to be modernized and that the information collected within the user registration would need to be lessened due to user privacy concerns.
My research informed me that there were higher priorities. The transition to the registration page’s separate website was jarring. The lack of consistent branding caused confusion, and the pagination of the registration user flow left users wary about the time and information required for completion.
User Pain Points
Sign Up
The registration on WarCraft.com takes users away from the WarCraft site, making them think an error was made.
branding
WarCraft branding does not follow users to the Battle.Net registration page, adding to confusion about the departure from the WarCraft website.
pagination
Splitting the registration into multiple steps without any indication about the time or information required makes guests feel unmotivated to complete registration.
menus
Two separate top menu bars confuse users when browsing the site. The parent company menu features games and content not related to WarCraft and also has identically labeled menu items.
meet the Personas
Jennifer
"Ugh, they want me to sign up for an account first...never mind then."
Age: 40
Education: Bachelor's
Location: San Diego, CA
Family: Husband & 1 Dog
Occupation: HR
Hobby: Online Gambling
Goals
User her favorite apps
Avoid opening new accounts
Give as little information as possible
Frustrations
Lengthy account registrations
Too much required personal info
Not being able to sign in with other social media or email accounts
Jennifer works in HR for a large company. She uses her phone a lot throughout the day to check various social media accounts and play casual gambling games. She likes finding new services and games to use, but she hates giving out her private information to use them.
steve
"After work, I'm just tired. I want to sit down, fire up a game, and relax."
Age: 32
Education: Associate's
Location: Orlando, FL
Family: Wife
Occupation: Store Associate
Hobby: Video Games
Goals
Play the latest games
Getting started quickly and easily
Avoid wasting time in registration
Frustrations
Lengthy registrations
Too much information required upfront
Steve is a store associate at a local theme park. When he gets off work, he likes to relax at his PC by playing some video games. He wants to play the latest titles without the hassle of constantly signing up for new accounts.
User Journey
What does the process of using our app look like for our intended audience?
It is clear that the focus of our designs for this project needs to be on speed, efficiency, and brand consistency of the registration process. We can tackle these issues by simplifying the registration form, relocating it on the main website for the game, and creating opportunities for multitasking. An example would be allowing users to download the game while they are registering for a new account.
starting the design
Paper Wireframes
Digital Wireframes
Low Fidelity Prototype
Converting the website to a more traditional video game product site helped simplify and streamline the experience. We aimed to increase user confidence in navigation by eliminating the secondary menu bar at the top of the webpage, and we converted the registration form to a single page that is featured on the warcraft website. This will help users naturally understand the information requirements and time constraints, which were barriers to entry for some users.
refining the design
Usability study
Study Type
Moderated Usability Study
System Usability Scale
Location
In Person & Remote
Participants
2 Male & 3 Female
Ages 18-65
Length
10 minutes (avg.)
Findings
Buttons
Users had trouble entering the registration user flow. The button arrangement and sizing led users more frequently to the login page instead. The off-center alignment of some elements also seemed to play a role in the confusion.
Pagination
Users had trouble tracking their registration progress due to the registration fields being split up into several pages even with indicators at the bottom. The split registration page design also had a mixed reception.
Confidence
Users wanted more information about where they were in the process, how long it was going to take, and when the registration was complete.
Results
Final Mockups
High Fidelity Prototype
Accessibility Considerations
ONE
Offering multiple pathways to core app functions as a means of redundancy makes sure this app is accessible for users with varying capabilities, skill sets, and technical experience.
TWO
Section headers were used to facilitate better website navigation with a screen reader
THREE
Higher contrast colors and larger font sizes were used for text and buttons to add clarity and importance to certain elements and improve visual hierarchy, aiding those with color blindness or other visual impairments.
What's Next?
Takeaways
What is the impact...
The biggest impact is that the WarCraft branding will now be present on the registration page, so users will know they are registering for the correct service instead of feeling lost or mistaken. Simplifying the registration user flow also helps users quickly accomplish their main goal - to start gaming!
What did I learn...
I learned how to use Adobe XD and gained more experience conducting research and analysis, prototyping, and building a case study. Additionally, I became more acquainted with the practice of building components and saving assets to make designing more efficient.
Next Steps
I would explore other layouts for the registration form and conduct some A/B tests to determine user preferences.
I would reduce the scale of the website elements, so more content fits on the screen at one time.
If the scope of this project went beyond the new account registration user flow, I would continue working on building out all the pages for the website in all its screen sizes.
Let's connect
Thank you for viewing this case study for the WarCraft Registration User Flow, a project for the Google UX Design Certification program.
Connect with me at linkedin.com/in/srboettcher or
email me at samuelboettcher@hotmail.com