Product Design + User Experience
usmobile.png

US Mobile

UX / Interaction

 
 
 

US Mobile On-boarding

An on-boarding interaction that guides new users through all the features US Mobile provides.

Role: UX / Interaction

Team: Solo

Client: Personal Project

Tools: Sketch App, InVision, Flinto

usmobile.png
 
 

Project Overview

US mobile is a prepaid wireless carrier I’ve been using for a long time. It has a unique set of services and features that have recently become more unique and complex. US mobile provides different services and plans for two completely separate networks. As a new user, this can easily become confusing. In this project, I designed an on-boarding interaction that guides new users through the US Mobile service.

 
US MOBILE ASSETS**

US MOBILE ASSETS**

 
 

 
 

Finding the problem

Brand Audit

I compiled a list of all the features offered on the US Mobile site into a brand audit to understand what content was most important. The harder content was pushed by US Mobile the more weight I put on it in the design.

 
 
 
 

Task Analysis

I had participants run through the mobile version of the site. I wanted to observe how they navigated the US mobile system, where that navigation was the weakest, and what they understood of the core US mobile objectives above.

  • Participants repeatedly tabbed through the same pages of the site to look for the information they wanted.

  • Participants were unsure about the differences between the two networks US Mobile provided.

  • When building a plan, the interface was hidden offscreen causing frustration.

 
 

 
 

Core Experiences

  1. A main sequential flow for primary US Mobile objectives.

  2. A branching organic flow for contextual information about US Mobile features.

  3. A build a plan interaction.

 
 

 
 

Designing the solution

Flow / Organic Structure

I chose four primary steps derived from the primary site objectives. These primary steps would form a flow structure that would lead the user consecutively through the design. Secondary site objectives are inserted between primary steps to show small windows of all the features US mobile offers.

When the user wants more context from each primary step, the design breaks outward organically, before looping back into the main flow. This way, I could keep the simple four step flow and still provide more content and context around each step.

 
usmobile structure.png
 
 
 

Motion Design

I wanted the information space to match the brand identity of US Mobile. That meant I needed to create a mobile experience that was clean, but fun. Simple, but extremely customizable. I used motion to reduce a lot of the clutter in the wireframes and take advantage of mobile affordances.

 
Artboard.png
Screen%252BShot%252B2018-05-28%252Bat%252B4.48.45%252BPM.jpg
Screen%2BShot%2B2018-05-28%2Bat%2B4.48.55%2BPM.jpg
 
 
 
 

Main Sequential Flow

These are some of the initial wireframes. I used them primarily to see if the flow and structure I was building held any weight.

 
30.png
customer.png
mainflowfull.gif
student.png
reviewss.png
 
 
 

Branching Flow

 
gsm.png
Untitled-6.gif
include.png
 
 
 
 
 

Build a Plan

 
talk.png
build-a-plan.gif
luda.png
 
 
 

Style Guide

I kept the US Mobile colors, typography, and iconography for my design.

 
 

US Mobile assets*

 
 
 

 
 

Reflection

This personal project was geared around user flow and the customer journey. I was pretty happy with how I was able to successfully merge two information structures into one flow. It provides a good balance of exploration and continuity for the user to engage in. If I were to continue working on the is project, I would further expand the design outward from this base.