View Task #2


For this task, I specifically redesigned the plan builder within "", which focuses more on when a user already holds at least one line account and needs to edit their autopay plan.

Task #3



User Testing

I conducted a user testing session with 2 users. The goal of the tests is to better understand the potential UX issues that a user might encounter while using the current plan builder interface.

(Due to the time constraints, I didn't have enough time to look for a US Mobile user, so the user I looked for were one young generation and one parent member who aligned to the potential target users of US mobile )


In the user testing, I set users with the task by acknowledging them with the user scenario and asking them to walk me through changing their current line plan to the specific unlimited & custom plans I required. After the tasks, I also ask them to explore the plan builder to see if there were anything they overlooked from the task.


User Insights



The Problem

From the user testing, the main problem I discovered was the card interaction. Users reported that the card interaction was innovative but came up with confusion and distraction for completing the task. Changing the autopay plan is an important user behavior related to the US mobile product, the feedback I gathered from the user research let me question if the card was the best way of design for the plan builder.

Also, the "saving plan" flow was not user-friendly.  Users reported the change of a purchasing behavior without confirmation could add insecurity to them. 


Redesign Objectives

1. Redesign the plan builder UI & UX with a more consistent structure and a focus state on each task object.

2. A confirmation UI for users double confirm and compare the current & new plan in order to prevent user errors. 

3. Minor UI improvements for the price session like the visibility of the clickable buttons & prioritization of the button based on the current UI. 



Unlimited Plan Builder (1/3)

1. Redesign Plan Table: 

The redesign selector provides users with a better indicator in terms of the name of the selector and the right arrow icon

2. Taxes & Fee Button:

Highlight the info button to promote the button clickability

3. Continue Button (old save this plan button):

Move the button out from the Payment Method container as a primary action button of the page.

1. Modal Popup

Redesign the "Data Plan" selector using a popout window. A popup helps grab users' attention and allows users to focus on the current task.

Popups also provide better visibility in terms of helping users know what their current option is (compared to the current version)

Unlimited 1.png

Redesigned Unlimited Plan Builder

Unlimited 2.png

Redesigned Unlimited Plan Selector

Unlimited All.png

Unlimited Plan Builder Screens


Custom Plan Builder (2/3)

1. Custom Plan Builder

In the custom Plan builder, I inherited the same UI layout in order to keep the consistency. Due to a large number of options, I adopt a drop-down design and blur out other page contents to help users focus on the current task.

Custom 1.png
Custom Flow.png

Customized Plan Builder Screens


Change Comfirmation (3/3)

1. Double Confirmation Window

After users select the new autopay plan, a double confirmation window helps prevent user errors as well as compare two plans for users intuitively. From my user research, users think this is important information to display.

double comfirmation.png

Double Confirmation



Give It A Try!



Not everything went planned

1. Design constraints

This redesigning solution leans heavily from a user perspective. Though through the design process, I took consideration such as maintaining the same Popups design components and follow the branding of US mobile as much as I can. Design should also take perspectives from other shareholders like programmers and the product team. Therefore, I understand some assumptions that I made may not be reasonable since it was hard for me to set such constraints without other teams playing. (For instance, a double confirmation design may not be beneficial from a business perspective since it might give users time for second thoughts in the case of upgrading their plans)

2. Left less time for testing

Due to time constraints, I didn't have much time to test my design solutions with a real US mobile user. Therefore, I went the design critique of this task from myself to iterate solution. If the time allows, I will take feedback from other designers or users, because they always inspire me with things I overlook.

View Task #2