Redesigning the AT&T Mobile App: Storyboarding & Wireframes

Oh, hello! In our Rapid Ideation & Creative Problem Solving class, we’re redesigning the experience of the AT&T mobile app. It’s important to emphasize “experience” as we’re not only focusing on the screen flows but also the emotions evoked as the user interacts with the app.

To get us in the right mindset, our teacher, Greg  Storey asked us to draw a vase.


Flowers painted on a flower vase. #SoMeta

Then, he asked us to draw a “way to experience flowers.”

File_000 (2)

I drew a room for flower therapy (because who doesn’t need a little therapy?), where one lays on a bed of flowers, whilst flowers fall from the ceiling. Ahhhhhhhhhh.

Greg immediately ripped up these drawings as soon as we were done. The nerve! Enough to make you need flower therapy! It was an important lesson in not getting too attached to your ideas. Luckily, my mind is a steel trap, and I was able to recreate these illustrations.

We then moved on to sketching new ways to experience the AT&T app, using “divergent” thinking. For my first sketch, I proposed that, when a user wants to suspend their service, they can just throw their phone in the trash, and AT&T will shut off the data.

File_000 (3)

I was told this was a little too divergent.

File_000 (1)

Granted, this was the night of the election, and the complete and utter horrorshow of it all was slightly distracting. At least there’s something from that night that makes me laugh.

We then took a crack at drawing screens for the following:

  1. The ability to view current plan and features/The ability to compare usage against available plans
  2. The ability to change a plan
  3. The ability to upgrade a device
  4. The ability to suspend or remove a device
  5. The ability to make a payment/set up automatic payments
  6. The ability to review and set account security

We prototyped flows on sticky notes for each. Although it was not necessary to create stories for each flow, it helped get my mind around the optimal user experience.




We then took those flows and made wireframes.


Scan 9

Scan 8

Scan 7


Scan 5

Scan 6

Scan 4

Scan 3

Scan 2

Scan 1

The next step will be digitizing these frames, incorporating the edits and comments provided by Greg.