Redesigning myAT&T: Start to Finish

In AC4D’s Rapid Ideation & Creative Problem Solving class, we redesigned aspects of myAT&T — AT&T’s mobile app that allows customers to manage their account.

Why this is important
The cell phone has played an increasingly important role in our physical, mental, and emotional lives. However, while phones have become “smarter,” the account management experience has remained frustratingly confusing.

The process
Below I detail our process for redesigning the app. It included 1) finding existing pain-points within the current app, 2) creating a concept map to communicate the key functions of the app, 3) divergent thinking to break free of the existing design, 4) storyboarding to quickly ideate, 5) wireframe sketches, 6) user testing to test our wireframes, and 7) digital wireframes.

FINDING EXISTING PAIN-POINTS
Before redesigning the app, we worked to understand its primary use case and “pain-points,” or customer frustrations. To do so, we surveyed ~20 individuals, asking them to identify pain-points by rating account management activities by difficulty. Based off of the survey results, we focused on the following functions:

  1. The ability to make a payment
  2. The ability to set up autopay
  3. The ability to review and set account security
  4. The ability to suspend a device
  5. The ability to upgrade a device
  6. The ability to change a plan

To understand the customer experience with each of these activities, we studied all relevant screens, some examples below:

attpainpoints

General pain-points included:

  1. Little visual hierarchy made it difficult to understand importance of each feature
  2. There was overwhelming amounts of text where images could suffice
  3. Generally confusing navigation made it difficult for the user to know where she was at any given point

CONCEPT MAPPING
We created concept maps to understand how these screens connect in a more abstract sense. Concept maps show the connection between different ideas, and are used to understand or explain various aspects of an app or website. This kind of understanding allowed us to design around the functionality and purpose of the app, rather than its current flow.

To take our minds out of the app’s structure, and focus on its purpose, I created a matrix of nouns, detailing the app’s functions.

conceptmatrix

Blue indicates connection points between functions. The total number of connection points indicate the importance of each function. Based on the above, the five primary functions of the app are: 1) Plan, 2) Payment, 3) Devices, 4) Usage, and 5) Data.

Even after this exercise, however, I still created a site map, detailing the flow of the app, as opposed to a concept map, communicating the intent of the app.

firstconceptmap

After many more iterations, I was finally able to focus more on the objective of the app rather than structure, leading me to create my final concept map for myAT&T:
finalconceptmap

DIVERGENT THINKING
Before we started sketching new flows, we practiced “divergent thinking” to get our minds in a creative space. Divergent thinking is a thought process or method used to generate creative ideas by exploring many possible solutions. Below I present a few of my ideas.

Need to suspend your phone? Throw it in the trash. I proposed that when a user wants to suspend their service, they can just throw their phone in the trash, myAT&T will detect it’s in a receptacle, and it will shut off your data. It fit well with our culture of planned obsolescence.

throwaway

The Hurt Phone. In another sketch, I proposed that myAT&T have the capacity to feel when the phone has been damaged. For example, if the user cracks her screen, an alert pops up, asking if the phone needs to be replaced. myAT&T then leads the user through the process of replacing the phone.

hurtphone

myAT&T understands your troubles. For another concept, myAT&T could anticipate your needs. In the sketch below, the user is upset that her friends are making fun of her, and, by its amazing powers of deduction, it correctly guesses that it’s because she has an old phone. myAT&T then helps the user upgrade her phone, and ultimately suggests that she upgrade friends as well.

troubles

STORYBOARDING WITH STICKIES
After the divergent thinking exercise, we prototyped the six flows on sticky notes. Confined to a sticky note and sharpie, we needed to include only the most pertinent information. Also, the low-fidelity nature of this exercise made it so we couldn’t get too attached to any one idea or waste time on aesthetics, facilitating multiple iterations.

stickystory1

WIREFRAME SKETCHES
We took the sticky flows and made wireframes.

wireframesketch2

wireframesketch1

USER TESTING
After sketching out wireframes, we recruited participants to test our ideas. During user testing, we asked participants to “think aloud,” or verbalize their thoughts while moving through each screen. Doing so allowed us to understand when and why a user may experience frustration, confusion, or surprise with the design.

usertestingsam

We then incorporated feedback into a new iteration of frames. For example, when Samantha tried to find Autopay, she said, “I wouldn’t have thought that Autopay would be in ‘Payment Methods.’ It shouldn’t be hidden like that.”  

Therefore, my screens went from this:

usertesting1

To this:

usertesting2

DIGITAL WIREFRAMES
After user testing, we presented our final wireframes, linked here.

REFLECTION
Concept Map
Concept mapping was essential to getting my head out of the current framework of myAT&T, understanding the purpose of the app, and understanding specific functions necessary to manage a mobile account.

Divergent Thinking
Divergent thinking is essential to designing outside of current constraints and allows for more creative thinking when designing new flows.

Storyboarding & Sticky Flows
Ideating in low-fidelity helps to quickly think through a flow and its purpose, rather than getting stuck on the aesthetics. Storyboarding also helped me think through the user’s story, and understand the “why” behind each flow.

User testing
User testing is key to uncovering pain-points in your design and gathering new flow or feature ideas. It is central to the iterative process.

Digital Wireframes
Once I started to create digital wireframes, I found that the higher-fidelity actually helped me flesh out my flows. I’m a visual thinker, so, while the low-fidelity exercises helped in terms of ideating, the high-fidelity helped me get a clear vision for how I wanted the user to interact with the flow. Tools like Pinterest and dribble helped for inspiration.

NEXT STEPS
Over the break, I will continue to test my wireframes and iterate per feedback.