For the last four weeks we have been working on redesigning the CapMetro Public Transit smart phone app in our Methods course. A new tool to help us with the redesign process was introduced for each of the first three weeks.
The first week we created a concept map of the existing CapMetro app and a concept map of our proposed redesign. A concept map is a tool to visualize the structure of a system to understand complex interactions that can not all be viewed simultaneously in the actual product. It is a useful way to think about emphasis and hierarchy as well as consistency before diving into the weeds of screens and interactions.
The second week we started wireframes. Wireframes represent the layout of a screen that focuses on functionality and interactions, rather than visual design. We also updated the concept map for our proposed redesign based on new ideas and feedback.
By week three we had iterated on the wireframes once and it was time to go out and get feedback from real people. To do this we used a method of user testing called the think-out-loud protocol with printouts of our wireframes. The user is given a task to preform using the wireframes. While he is completing this task the user is instructed to think out loud, verbalizing each action as he does it. During the test the researcher acts as the “computer” bringing up the appropriate wireframe screens. If the participants stops thinking out loud the researcher says, “Please keep talking.” Otherwise the researcher does not answer questions or explain anything. Verbalizing what they are doing does not change how people approach tasks (although it does slow down the process), however, questions, especially those that require introspection, will change their approach. So, by just instructing the user to keep talking, the researcher gets the best representation of how the user would actually approach the task and what problems there are in the current system. Based on the problems users encountered we each identified 3 major problems with our design to address.
So, now it’s week four, and I’ve done it all again: Updated my concept map, iterated on my wireframes based on last week’s feedback, tested my wireframes with 5 users, and identified three major problems with my design that need to be addressed. Tonight I will present all of this to my classmates and professor, solicite feedback about resolving the issues I’ve identified, and then start the process again.
Below are the three flows that I tested. A flow is just a succession of screens that allow the user to achieve an intent. Not all of these screens are necessary to for each intent but hopefully they illustrate some of the major variations that are possible. The orange dot on each page indicates where the user taps, swipes or pinches to get to the next screen (pdf available at bottom of post).
The major issues I found in my testing have to do with accessing the Next Bus feature from the home page (page1, 20, 30 in the flows) and how the Next Bus feature relates to planning a trip. Users weren’t clear on the difference between the two. The fact that on page 8 an identical box has a different function added to the confusion.
1) Users thought the red line was the distance they had to walk, rather than the first bus in this trip. 2) Users did not realize that bottom section would pull up to reveal step by step instructions for the trip.