Eight class weeks, seven iterations and one redesigned CapMetro app later

In the Rapid Ideation and Creative Problem Solving class, we are wrapping up the last week of our quarter with one final iteration on a CapMetro app redesign. When we first started the quarter, the redesign process began with the creation of concept maps which are used by a designer to visualize all of the components within a system. Doing this allows you to create a visual reference for the priorities and relationships of these components. After creating concept maps for both the existing system and our proposed redesign, we then created wireframes which are illustrations of the interfaces that bring the proposed redesign to life.

Next, using an evaluative user testing method called, Think Aloud Testing, we took our wires and began testing them with potential users. This testing method allows the design researcher to get a glimpse into the working memory of a user. During testing, users can articulate what they’re doing for the researcher as they are actually doing it without affecting the outcome of the task they’re performing. 

When I first began this redesign seven and a half weeks ago, my main goals for the user were to simplify the pass purchase process, make it easier to figure out how to get from where you currently are to where you want to go and make it easier to use the passes you have purchased. In the original system, there were multiple flows in the system that the user could select as starting points to begin planning their route. This included the Schedule, Maps and Trip Planner flows. They then were required to remember or re-enter information from one flow to another. A flow is a series of screens that contain actions a user would take over a period of time to achieve a goal such as buying a pass. 

Making design decisions and learning from them 

To simplify the experience for the user, I consolidated the Schedule, Maps and Trip Planner sections together. This allows the user to identify their starting location and ending destination in the context of what routes are available to them nearby and what other times they could take this route. The user is able to see this on the map. Being able to plan your trip and identify what route to take determines whether or not you purchase the ticket that will get you to where you want to go.  

Knowing which route to take is information the user must have before they can identify the service level they will need to purchase a ticket for. This is a complicated process because the user must also chose from several different service levels including Local, which is the Metro Bus or UT Shuttle; Premium, which is the MetroRapid or MetroFlyer service; Commuter, which is the MetroExpress or MetroRail; and Access, a shared ride service.

While there’s still a ton of things that could be done to improve the overall redesign I have proposed, it’s worth taking a step back to look at where I first started to where I’ve ended the quarter. The first thing would be starting from a very low-fidelity sketch of the system. By low-fidelity, what I mean is producing something that aims to represent the target concept, but is simple and something you can produce and test from a broad perspective quickly. I took this approach in my first two iterations, one that you can see below. 

First Wireframe Iteration 

Low-Fi Wireframes for Blog

Last Wireframe Iteration 

Home Screen & Buy Pass Flow

Trip Planner Flow

My Profile Flow

Use Pass Flow

In this last iteration, I focused on merging the information from Buses Near Me on routes and times specific to the bus that would appear soonest for that route into the the Trip Planner.This is the change that is reflected in my final concept map. 

CapMetro Concept Map Redesign 7

User testing and common breakdowns 

User testing this week was focused on the Trip Planner flow as it was the one I changed the most from last week to this. It revealed that there are still some things that could be improved in future iterations. 

Trip Planner Flow Breakdowns

The first break down showed that I could potentially merge elements from the trip route view into the screen that showed the top three fastest routes such as the name of the route and the bus number associated with it. This is something I would explore doing if I were to go through another iteration.  

The second breakdown was really about having a more obvious way to navigate through the different bus stops associated with each route. My intent here was to use color as a way to draw attention for exploring options from route to route. What actually occurred was that this was a point in the user test that would prevent the user from seeing the other options. I think adding in some left and right navigation arrows on the sides of the map would improve this. 

Finally, found that the step-by-step trip instructions were hidden too far down the Trip Planner flow. While users were able to get here, they would often ask for this information on the first screen that listed the top three routes. I could potentially eliminate the second screen, by bringing some of that information into the first screen and then have the drop down arrow give you an option that takes you to the step-by-step instructions. 

Now that I know what I know.

If I could summarize what I’ve learned in eight weeks, seven iterations and one redesigned CapMetro app later, there are a couple of things that I found to be particularly valuable. Based on what I have learned from the quarter, there are some things that I would do differently if I were to start all over. From iteration to iteration, I became more and more aware of the dangers caused by over-simplifying. It is an ongoing learning process for me to externalize the things I have paired away in my head in a way that helps other people understand why I’ve done the things I did.

It’s also a point in the process in which you take a step back and ask yourself if you’ve really thought things all the way through. Documenting the design decisions I’m making as I make them is something that I have started to do in order to get better at this. Not only is this a good way for me to capture both my thinking and decision-making, but it also helps me feel better prepared to talk about why I did the things that I did using the wireframes as the visual artifact. Being able to do this is a major part of gaining the feedback from others that you need to continue improving your work. While iteration has taught me that there will always be something more I can do to improve the flow, actually embedding this as a check point in your iteration process is what will get you to stop long enough to reflect on the things you have done. 

I also would have written more scenarios about the user earlier on in the process. This method helped me to overcome feeling stuck about not being able to come up with solutions for your system that are oriented around the user in a later iteration. Scenarios are written stories used by designers to help articulate how a person will use their system to achieve a goal. 

Most importantly, I have learned the value of doing multiple iterations. Whether I was working from lower-fidelity, sketched wireframes or digitized wireframes built in Adobe Illustrator, there were many iterations in between each version that was ultimately used in user testing that week. While the quarter is coming to a close, I also want to continue improving how the work I do reads from a visual perspective and identify screens that I can experiment with for using different interactions such as swiping. I now have a full set of wires that I can continue to work from for doing just that.