Embedded Files
A Harder Exercise
Duration: June 2022 to October 2022
Exercise Overview
For the second project of the Google UX design course, I chose to redesign the account creation flow of a video game website.
I felt another familiar topic could help me expand on what I have already learned from the first project.
I based this redesign on a popular real video game website.
I found the branding provided by the website helped set the foundation for my later mockups.
The Problem
Many video game websites are too cluttered or complicated, creating an overwhelming experience for Users.
Users with poor internet connection suffer the most from websites that overuse moving graphics.
The Company: K - OAS
K - OAS is an established video game company that maintains several websites for their game services.
One popular game is called Mutant Samurai. It is a game for team players who enjoy fantasy combat.
K - OAS is interested in simplifying the design of their Mutant Samurai website so that it is easier to navigate and be more accessible to some users.
The Goal
Simplify and redesign the current Mutant Samurai website.
Focus on the account creation flow first.
Build a responsive website that stays to brand.
My Role
UX Designer restructuring the Mutant Samurai website for
K - OAS.
My Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
User Research
Interviews
I had a vision but needed to start somewhere.
I wanted to know about the experiences Users have with account creation.
Writing up some related questions, I conducted interviews.
I found my participants preferred account creation to be simple and to the point.
Their preference melded nicely with my design direction for the homepage.
Pain Points
From the interviews, some of the Users pain points appeared rather clear.
Overcomplicating
Users do not like when there are too many steps to the process.
I should keep steps to a minimum.
Unnecessary Information
Users find presenting too much information annoying.
I should keep it to the basics.
Technical Support
Lack of good technical support causes stress to Users throughout their entire experience.
Proper website support needs to be addressed in the design.
Persona: Aasha
Based on the interviews, I created personas and made a user journey map and problem statement for the persona named Aasha.
Problem Statement:
Aasha is a competitive gamer who needs to successfully make a new account for Mutant Samurai because they have to start practicing for a competition as soon as possible.
User Journey Map:
I mapped Aasha's User journey through the entire game setup process.
The account creation is but a small part of the larger flow.
This highlights the User's need for a quick experience on the website.
Lo-Fi Design and Testing
Website Sitemap
I created a sitemap to help me reorganize the website.
I tried to group like items together to reduce clutter.
Paper Wireframes
I found redesigning the homepage challenging at first.
I ended up deciding to have the homepage mimic the game menu and launcher designs.
I found the account creation wireframes much simpler.
Here are the paper wireframes for the homepage.
Paper Wireframe
Responsive Design
Here are the responsive designs for the Mutant Samurai homepage.
Digital Wireframes in Adobe XD
I used Adobe XD to create digital wireframes.
Here is the beginning of the account creation flow.
Enter Email Screen
I did not redesign much for this screen.
I moved and enlarged the create account step tracker to the left.
I made room for an information text box on the right.
I carried over some important tabs from my redesigned homepage at the top.
I, however, kept most of the questions in the middle the same.
The rest of the account creation flow followed a similar design.
Digital Wireframe
Responsive Design
Here are the wireframe responsive designs for the Enter Email screen.
I chose to wrap the important tabs around an image or header text up top.
I also minimized the information text box into a tab on the right.
Low-Fidelity Prototype
The User flow for this prototype focuses on creating a game account.
The flow starts once the User clicks Play Now and ends at the completion screen.
View the Mutant Samurai
Low-Fidelity Usability Study Parameters
I ran a usability study using these parameters.
I also explored whether or not Users could find or guess how to get to certain pages from the home screen.
Type
Unmoderated
Location
United States, Remote
Participants
5 People
Length
15-20 Minutes
Usability Study Findings
I found my design needed some work, especially the homepage.
Finding 1
Most Users did not associate Play Now with account creation.
A major problem when trying to start the account creation flow.
Finding 2
Users could not guess the location of the list of Warriors for the game on the home page.
Finding 3
Users could not guess the location of the patch notes on the homepage.
Hi-Fi Design and Testing
Website Sitemap 2.0
I redesigned the site map after the Usability Study.
Accessibility Considerations
I tried to follow these ideas when designing my mockups.
Use still images instead of video for a better experience with slow internet.
Use bright colors for important action buttons and a duller color for generic information.
Use large buttons and tabs to draw the Users attention to the more important items.
Mockups in Adobe XD
I made several changes to help reduce clutter and focus the Users attention.
Home Page
I moved the Support button to draw attention to it more.
I added a Create Account tab to further simplify the account creation flow.
I put in a Warriors Tab to give Users easy access to that information.
I changed the text by the images to help users find other key features of the website.
Enter Email Screen
I removed most of the tabs.
I left a Play Now tab to offer Users an option to just download the game if they have an account.
I did add a Go Back button under the create account step tracker.
Mockup
Responsive Design
Here are the mockup responsive designs for the home page.
I tried to be innovative and place the buttons in interesting locations.
I can see I need to adjust my font sizes appropriately but for now I think they work.
High-Fidelity Prototype
The high-fidelity prototype followed a similar flow to the low-fidelity prototype.
I added a sign in page and an alternate download page to flesh out the experience more.
View the Mutant Samurai
Website User Flow
Here are the main Screens a User goes through to create an account for Mutant Samurai on the website.
Final Thoughts
Impact of the App
Users found the account creation flow intuitive and completed it almost automatically.
Some Users, however, had trouble finding certain items on the homepage.
User Quote:
"I automatically did what I thought to do on habit."
Next Steps for the Project
I need to test my mockup and to get feedback from my stakeholders.
First, I need to run another usability study and see if my improvements helped.
From there, I can rework the mockup one more time and take that design to my stakeholders.
The stakeholders and I could discuss the future of this project and the changes they want to be made.
I would make any necessary revisions or revert to previous steps of the design process as necessary.
If the stakeholders felt confident in the direction of my design, I would start fleshing out other features on the homepage.
From there, I would go back to testing and more testing.
What I learned
This second project provided a challenging introduction to responsive design.
A nice change of pace in the Google UX Design course.
I felt a bit overwhelmed having to take much more into account when designing a website.
I, however, challenged myself and my skill by focusing more on branding and stakeholders than before.
I learned some of the basics of Adobe XD and expanded my general knowledge of UX Design.
Thank You!
Thank you for taking the time to review my work with the Mutant Samurai Website
Google Sites
Report abuse