Hero overlay

This hero is built with a flex layout, aligned and justified so that the content will always be centered horizontally and vertically. To change this section’s background, select the “Hero Overlay” then scroll to the background section of the Style panel and replace the image. You can also adjust the opacity of the overlay’s black background for better contrast.

Button text
Pixel art in videogame project is licensed from shubibubi on itch.io

Simplifying Game Account Creation

UX Research, Conceptualization, and Design
Project Overview
This project seeks to streamline the account creation process for video game websites, as well as provide simple, accessible information for every level of user playing the game.
My Contributions
These designs were created as part of the Google UX Design Certification program. I worked on every part of this project, from conceptualization and user research, wireframes, prototypes, usability studies, and designs.
User Research
To scope out what users needed from gaming account creation, I conducted interviews with 5 participants over a few days. These interviews were done remotely, in an un-moderated setting. The participants were given a list of prompts and follow ups to complete, and their journey through and feedback on the product was recorded.

This initial user research showed that many users who frequently make online game accounts experience significant pain points that fall into one of two categories.
Our users
Data from user research interviews was synthesized into two personas that summarize our two main user groups.

One set of users had encountered a few sites with frustrating verification systems forcing them to re-complete the CAPTCHA multiple times during the account process, and receiving broken links when asked to verify their email, stopping them from completing the user flow as intended.

The second set of users was more focused on the character editor portion of account making. and had issues with different games' character editors that ranged from "too complicated" to "too boring." They felt that character creation shouldn't take more than 5 minutes.
Initial Sketches
low-fidelity designs
organized wireframes
The VideoGame site, created in Adobe XD, started as wireframes and a low-fidelity prototype. This allowed quick and easy testing between different screen sizes, which ensured that all screen sizes will provide a consistent user experience.

Click below to view the VideoGame wireframes:
DesktopTabletMobile
SIMPLE CHARACTER EDITOR
The character editor for VideoGame includes four customizable categories to keep the user flow fun and simple. Users can customize their skin color, hair color, hair style, and class. All other character customizations will be done in-game later on, including collecting clothing and accessories, and upgrading skills.
ACCOUNT CREATION STEP - VERIFICATION CODE
While it's not a new idea, the verification system includes a six-digit code instead of an email link. This way, the user won't have to deal with broken email links. Additionally, the entire account process has steps highlighted at the bottom with lighted dots.
Design Solutions
ACCESSIBLE NAVBAR
When conducting a competitive audit on popular online gaming websites, I noticed that several of them included a persistent language changing option, front and center on the navbar.
EYE-CATCHING NEWS FEATURES
Both new and returning users might be interested in learning the most recent updates and features being added to VideoGame. By adding the news shortcuts to the home page, all users can find it easily.
VISUAL DESIGNS
ORGANIZED PROFILE
The user profile for VideoGame includes a rotating character avatar, ample space for clothing and accessories collected by users, and several important settings in the upper right. Settings include editing account information such as email, changing your gaming region, viewing your friends list, and accessing a shortcut to help and contact.
High Fidelity Prototype
To try out the full desktop
prototype for yourself, click here
To try out the full mobile
prototype for yourself, click here
FULL case study
To view this project in more detail, view the entire case study here: Link to Case Study

Want to work together?

If you like what you see and want to work together, get in touch!

rebecca.cardianle@outlook.com(310) 528-6727View My Resume
Powered by Webflow
FacebookTwitterInstagram