Project Summary

Context

The goal of this project was to develop a responsive website for desktop and mobile platforms based on a prompt challenge. Specifically, create a sign up flow for a video game.

Problem

Account creation sign-up flows vary greatly. Gamers have dozens of accounts and having to sign up for a new one every time they want to play an online game can be frustrating if the sign-up process is too long or complicated. High friction at this step of the conversion process can lead to a bad experience or user drop-off.

Solution

Create an easy to browse landing page and optimized sign up flow with only the most necessary information required on display when signing up but still provide other additional options post sign-up.

User Personas

Name

Goal Statement

Pain Point

Name

John, 24

Software Developer

Goal Statement

Find new online game to play without having to jump through pages of text to learn about what the game is about.

Pain Point

Site that have information fragmented throughout multiple pages when I only need a summary.

Name

JoAnn, 25

Art Director

Goal Statement

To be able to try out games with her husband with few barriers between learning about it and playing.

Pain Point

Sign-up pages can be lengthy and time consuming.

Name

Jacob, 21

Student

Goal Statement

Pain Point

Images by pikisuperstar at freepik.com

Ideation

Initial Concepts

Many concepts were created to come up with the best layout for achieving the core goals of 'ease of sign-up' and 'quickly conveying game information'.

In the end the chosen design was to have a large banner image as the most prominent feature to tell a story (a picture is worth a thousand words) with sign-up UI on top. This would take up roughly 60% of the browser window with the lower section being 'peeking' into frame which would lead the user to a series of brief informational cards about the games features, finally ending in a smaller sign-up button at the bottom.

Desktop

Mobile

User Testing Results

Usability Studies

Multiple rounds of unmoderated, task driven usability studies were conducted. Participants were given a number of tasks to complete within a core user flow, once completed were asked a number or questions ranging from their experience with the user interface, points of frustration and if there are features that they think are important that are missing in the design.

Usability Problem

User drop off occurred due to the home page being too information dense.

-

Information was reduced and more short blurbs were used.

Usability Problem

It was not apparent to some users how to exit the signup flow once they entered it.

-

The game logo was made interactive to link back to the home page.

Feature Request

Users requested the ability to go back and edit previously entered information.

-

The progress tracker was made interactable to allow users to go back and forward within the sign-up flow.

Key Performance Indicators

In addition to task completion and open-ended questionnaires, user success was measured using KPI's and data collected through Maze's prototype testing platform.

Time on Task

User Error Rates

Drop-off Rates

System Usability Scale

Conclusions

Through user testing I was able to gain valuable insight into users needs and make improvements to designs that would not have been visible otherwise.

Many of the initial hypothesis' were proven correct but user testing has proven to be invaluable in uncovering issues that would not otherwise be visible. Specifically in this case the ability to go back and forward in the sign up process.

Final Design

Mobile App Mockup

The user interface went through a series of small changes and a few major ones, specifically in regards to the visual design. I typically enjoy clean lines and soft shapes so it was fun experimenting with designing something more angular and gritty.

The main interactive color for main function buttons is yellow which stands out against the dark color palette of the rest of the design. Content is organized in sections and content elements are in the form of clickable tiles generally with imagery attached.