Picking up where we left off: AT&T App Update
Last we left off in this project we had finished working our divergent thinking ideas into the AT&T app, and writing out six short hero flows of our screens. Since then we’ve ramped up quite a bit. We’ve moved from sketching to digital files to user testing and iterations.
To further explain, once we finished making short hero flows of the screens, we took to sketching out the full flows with full screens. We had print outs of an Iphone outline that, within each of the outlines we illustrated all of the pieces needed to create the various screens. At this point I was working out how to integrate all the current app features and my own divergent thinking ideas. To do this some ideas were cut such as the concept of paying for the service at the beginning of the month, rather then at the end. I also cut some of the features the app currently has, such as the search feature. It seemed like it was put in the app perfunctorily. I continued to combine my flows and ideas with the actions needed in the app, continually presenting to my fellow classmates to gain their feedback and integrating that information too. Eventually once I felt confident about my screens and flows, I began to transition these into Illustrator. Below is an image from one of my sketched out screens with feedback.
I started out by adding the iphone image that we sketched on into the Illustrator file as a background. (This turned out to be a terrible idea, since the sizing was completely off.) I then built out the different buttons, features and flows as I had sketched them. My goal was to transition as much as I could to be digital.
After the first pass at digitizing the screens I brought them in class for feedback. Greg politely but directly tore them apart (not literally though). His feedback culminated to me needing to integrate more of the actual functions of the app into my redesign. I had been cutting too much from the actual app, and I wasn’t including any screens aside from the hero flow, which was a mistake.
So I went back to my files and integrated more pieces from the app. I added more overlap between different pages, so instead of keeping “Plan” in a silo, I started building more crossover between parts. I also found a file from Connor, which was filled with great Illustrator icons specifically from Iphones. This elevated the overall feel of my screens to be more polished. I also removed the iphone image background, it was really only restricting how I was creating pieces. Finally I started adding additional colors as accents and to create contrast.
The second round I brought my screens in received similar feedback; I needed to add more icons, more color, more standardization to my buttons. I went back into my digitized screens and again attempted to add more details. To more fully align to the actual app, I began reviewing our old screenshots and pulling out where there was overlap between different pieces of the app and any additional features of the app. This helped make sure my app was a redesign and not just the hero flows.
For the third round of review, we were presenting our files to the class. So I printed each of my screens out, two per page, and I ran through each flow. By the end of the critique, I needed to standardize my buttons, size shape and color wise. I also needed to create an emphasized button and deemphasized button. I needed to standardized my types and font sizes. Finally I needed to lighten my secondary color so it wasn’t as noticeable, but still created contrast between the navigation bar and the main activity space on the screen. I also was given the tip to change my data bar to be a slider bar, which turned out to be an excellent recommendation when I tested it.
After receiving the full class’ feedback, I went back and asked Conner for his additional feedback, so I could integrate that into my screens. Since Conner works in Visual Design I knew he could provide me with some 101 guidelines to follow that would increase the fidelity of my screens. He told me the official size of the Iphone screens that I should have been working in, as well as some simple tips on standardization. He also reassured me that my screens communicate the point they need to and that the aesthetic part of wireframing will come with practice.
I took Conner’s and the class’ feedback and got to work on resizing and formatting my screens. I reworked every screen on every flow, creating more hierarchy, standardization and correct sizing. I was far more satisfied with this version than I had been for all other versions of the screens. Below is an image which illustrates each of the different iterations for each of the rounds.
Throughout this whole time though, Greg was directing us to begin user testing to confirm our screens were properly working.
Once I had the finalized version of the screens, I began user testing. I used the Think Aloud Protocol, which is a method of “evaluating the usability of work by encouraging a user to think out loud as they use your product or service.” During the user tests, I found I had missed two confirmation screens and I needed to add more overlap between the different parts of app. Overall the testing was very helpful in figuring out what was missing from my app.
Below are the final updated version of my screens, specifically for the flows.