US Mobile On-boarding
An on-boarding interaction that guides new users through all the features US Mobile provides.
Role: UX / Interaction
Client: Personal Project
Tools: Sketch App, InVision, Flinto
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.
Finding the problem
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.
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.
A main sequential flow for primary US Mobile objectives.
A branching organic flow for contextual information about US Mobile features.
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.
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.
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.
Build a Plan
I kept the US Mobile colors, typography, and iconography for my design.
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.