Learning the mechanics of wireframes

myAT&T Mobile application Redesign

Go redesign an informationally overloaded app for your first ever wireframes, ready? Go! Yup, thats AC4D.

The AT&T Mobile application has been mind expanding to dig into. After 3 iterations it is starting to feel like “Yeah, this is something that people could actually use that would be so much damn easier!” The meaning and possible use cases of ‘iteration’ shifted slightly for me in the past few days with this project, especially ‘iterations’ relationship with ‘fidelity’.

Previously, I had understood fidelity as making things look better, adding polish, finishing touches etc. I also understood iteration as a similar thing. Except iteration was taking into account layout, as well as what worked and what didn’t work. A tool for mixing, matching and trying different methods and things until you find what you want. After these past 2 weeks iterating on screen flows for the myAT&T app I am seeing them in a different light.

Let me explain.

The Process

We have chosen 6 use-case stories for classic uses of the myAT&T application. We chose these in particular through speaking with AT&T customers and asking them about their most difficult, frustrating, and time consuming interactions with their mobile app.

We aggregated the information as a class and came up with these use-case pain-points:

  1. The ability to view current plan and features.
  2. The ability to compare usage against available plans. &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.

From these pain points we exploded the flows correlated with these interactions in the application and created concept maps to make sense of the mayhem. This initial sense making process is outlined here in my blog about Attacking Concept Mapping.

The thinking behind divergent thinking

Getting into redesign was inspiring. We utilized “divergent thinking” to come up with multiple ideas for optimization of the myAT&T experience. This was another term redefinition moment. My thoughts about what divergent thinking meant were predicated on ideas of “How abstract can we get?” “What would a car be like if it had square wheels? Lets design suspension around that idea”. Thoughts along these lines led my mind into uncharted territory where I came up with ideas that, most likely, AT&T would never agree with because it was essentially a ‘servant leader’ model of operation. AT&T would be assisting the customer in the facilitation of things that were good for them and potentially problematic for AT&T.


This rudimentarily illustrates the application allowing a limit on various phone applications to train regimentation for its customers. Everyone wants to use Facebook a little bit less right? Probably not the case with the Executives at AT&T.

Here are others from that first round of iterations using divergent thinking.

IMG_4351 IMG_4349 IMG_4348 IMG_4347

The feedback I received was that my ideas were not realistic in terms of redesigning the experience. I was redefining AT&T’s fundamental offering. A totally understandable criticism which showed me my bias towards enjoying paradigm shattering innovation. This also brought a realization for me that, those lofty ideas of what is ‘needed’ (paradigm shifts)  in the given space is not the next step for what is ‘necessary’. This is true even when speaking in regards to incremental steps towards the “needed” paradigm shifts.

I, then, pulled in the extremities of my ideas and focused on redesigning screens and the flows of our stories. My goal for the second round of iteration was to get my main core ideas onto paper, specifically the variance in the sequencing of ideas and what comes next within the app.

IMG_4364IMG_4365IMG_4363IMG_4366 IMG_4363

Raising the fidelity so that the next step is digitization was my favorite. I practiced user empathy, and stepped out of my design mind as much as possible. How would this actual feel? What do I care about? What is annoying? What am I most likely trying to do? How can I make all of the extraneous information only show up when it is mandated for an unlikely and specific interaction? These questions, and more like them, helped me immensely in establishing criteria for what I was trying to create within the constraints set out by myAT&T and what it offers. They also helped me establish why I want to create that type of experience.

Welcome to the new myAT&T experience (on paper lol):

Home Screen Concepts


  1. The ability to view current plan and features. 
  2. The ability to compare usage against available plans.
  3. The ability to change a plan.


2. The ability to upgrade a device.IMG_4357



3. The ability to suspend or remove a device.



4. The ability to make a payment/set up automatic payments.



5. The ability to review and set account security.


I got a lot out of having to consider continuity and the design language I was creating at every step in the process of the last iteration. What would be good at every step, in every scenario? That refines the constraints considerably. It is easy to create something beautiful and awesome 1 time for 1 use. But to consider all of the people, with all of the connectivity we have today, that will use this for, might as well say, all time…. That is a lot to consider.

Initially we analyzed the current structures, flows, and navigation of the myAT&T app the way that it is now. We went through all of our pain-point heavy flows and critiqued them apart. What we inferred was that various pieces of the application had been developed at different times and then been “duck taped” together. We came to this assumption because of stratified purposes for different navigation attributes. Very little of the reasonings behind actions or portrayals of information had continuity. Therefore, putting a larger emphasis on the importance of consistency, continuity and thoroughness of thought in the creation of attributes and navigation was necessary.

As I alluded to earlier, the characteristics of what iteration and fidelity mean lost a little bit of definition in my mind and also became more robust in other ways through this process. The way they were utilized in the circumstances of this project were to zoom way out to what was idealistically ideal. Then come back down to earth and morph the utter optimal into the truly practical and probable next iteration in a world that needs numerous and constant iterations. The way that those two words coalesced during this project was enlightening because you need to stay at low fidelity to allow for more iteration. Your iterations need to gradually gain in fidelity as they gain in detail. Therefore, with low fidelity accompanied by a first iteration, there should be few details and then as more iterations happen and the fidelity gets raised you add more details because you have gradually solidified the overarching framework of your creation through trial and error.

You know what the shape of the house will be, now you have to chose the color of the paint, and what flooring you want, followed by furniture and decor choices.

First things first.

Worse things burst.

Birth new worth.

I like poetry.