Blog Post Image

Redesigning myAT&T – Sketches to Digital Wireframes and User Testing

After completing our sticky note storyboarding in Rapid Ideation we then moved forward by creating higher fidelity wireframes using pencil and paper on a phone screen template. Previously, we only concentrated on the most important task or idea for each screen in our sticky notes. Because of this key information within each screen was missing to fully realize what the experience may be like. By moving to pencil and paper it allows us to consider the more granular level detail of each screen, such as UI components and the navigation. Here are a few examples of some of my sketches.

Sketches

The next step was to critique each other’s screens for anything that might be missing or confusing. At this point we may have been missing back buttons or smaller detailed informational items that were less important to the primary point on the screen, but still important to include. One benefit from beginning with sketching is that changes are much easier to make, part due to the effort involved and arguably we are much less attached to what we have created at this fidelity. Once the entire flow made sense in sketch format, we then moved on to digitizing our wireframes (view full resolution).

Wireframes

Iteration is very important at this stage from feedback about the designs we are working with, both from other designers as well as users who are not as familiar with the project. To confirm our designs were communicating what we intended, we conducted user testing via the “Think Aloud Protocol”. With this protocol we ask users to tell us everything that is going through their minds about what their seeing and feeling about each screen. From feedback we received during user we took into consideration on future iterations of our wireframes.

To set this up I created a Craft InVision prototype to be able to tap from screen to screen. At this fidelity it’s pretty close to what a final experience may look like and can be used to gain valuable insights about usability and perception of information on the screen. I also plugged in the phone into my computer and recorded what was being used and said during the user test. Lastly, I took notes to highlight breakdowns or opportunities I noticed or the user mentioned.

One of the main findings that came out of user testing was learning that people gravitated towards the account tab I was using in my navigation when they wanted to submit an insurance claim, or suspend a device. I intended them to go to the device tab to do so. Although, these users did eventually get to the intended location, and admitted that they felt it made a little more sense than what they were accustomed to (they were probably just being nice), their feedback told me I should provide a button within the account tab to navigate to these same locations.

Another change in my designs that my user testing informed was for a more consistent messaging system. I realized that I had 3-4 different ways of showing confirmation that the action had been completed. There was also a place where I could have included a more clear success message that was missing. As soon as I updated this users had no confusion as to whether or not the task was completed.

Over the break I plan to iterate more on my designs and test them in front of other people focusing on more error states and any edge cases that arise to make sure the functionality of my app is complete.