News and blog posts from our students and faculty

Category Archives: Interaction Design

Last iteration of the Quarter, though there’s still more to do

Although I feel I’m just getting started with these iterations of my new App idea for CapMetro, our quarter is coming to a close. Our Rapid Iteration and Creative Problem Solving class has been an eye opening study for me on understanding systems, making digital renderings, and working through step-by-step details of process.

I started the quarter with the assignment as given- redesign the existing CapMetro app. While I started the first few iterations just sketching, sharpie to paper, a new problem arose. Over a weekend during our quarter I had a frustrating experience trying to travel to an event in the Austin area. I wanted to use public transportation and I felt there was no adequate system, website, app, etc. to help me find easily a way to travel to the event. So the idea was born, why not make a sister app, to the CapMetro Transportation app that focuses only on a specific festival and how to get around town and all the designated venues easily and frustration-free.

I first began trying to make an all-in-one events app, and that was quite a mess. So I refocused on one specific event- South by Southwest. It’s been a lot of fun trying to organize the events and calendars so that it’s simple to know what is going on around you and gives an easy portal to CapMetro transportation services (including a map and walking points in-between stops.)

Each digital iteration I have been posting every week here on the AC4D blog. Today I’d like to share with you where I am on this next iteration.

Discovery flow:IDSE201_WIREFRAMES_forBLOG_1-01

The user can discover new events that they possibly hadn’t seen or heard of through this feature of the App. Based on current user favorites, where they’re located and trending popularity, this is kept to a minimum number of events per section and is simply meant to be a fun way of exploring what’s around you. When clicking into the event there is a larger section of detail with an image. And there is always a button (represented by the M in the circle) to start your journey of getting there via CapMetro in Austin.

 

Get there flow:IDSE201_WIREFRAMES_forBLOG-02-02

Here the user begins their travel to their destination of choice. There are a couple ideas represented here- one the user is automatically identified in their place of standing on the map. A drop pins identifies their location (represented by a circle with a pulsing circle around it.) This is the “you are here” portion of the map- and remains so for the duration of the user’s journey. The user can search by even or exact address in the search fields. And the map follows the user in real time shown on the map above. There is also an option to swipe up and leave the map out of view to just follow the list view directions, that also follow the user’s journey in real time.

 

Schedule flow:IDSE201_WIREFRAMES_forBLOG-03-03-03Added this iteration is the ability to narrow viewable results by section (Interactive, Film, Music, or all) to help consolidate all the events into viewing only what the user is interested in at any given time. Once the sections are chosen another viewing option is reveled where you can pick viewing by category under each main section above. The grey “striped” pattern is to represent color-coding each section for an even more identifiable grasp as to what event matches each section of the festival.

 

New Event Flow:IDSE201_WIREFRAMES_forBLOG-04-04This is my first attempt at trying to organize the amount of events a user would be possibly attending. As you can see in the menu bar, “events” is added as it will be a strong and useful function for the user to have easy access to. On the second screen the day markers move to the top of the screen easily by touch to help quickly view what day you’re interested in looking through your events in.

 

Favorites / Settings:IDSE201_WIREFRAMES_forBLOG-05-05In this favorite section the user has the ability to transfer their saved events directly into their iCal for more streamlined organization, and can share via social media (share button) their plans with the public if they chose to. This I feel aesthetically is a bit clunky and I would love to continue to try to rework this segment to  simply note the ideas that users would like to have as an added convenience.

Moving forward I’d love to continue to work on the ease of viewing an intense amount of data simply. But more so I’d like to work through the “getting there” portion of the App- which was my main goal in the first place. I’ve learned through working through these iterations that for me to wrap my head around complex problems, I need to get outside of my head and sketch it out a ton of times to work out the major issues and dead ends that may appear in working through systems. I love the challenge though, and feel this is a very complex puzzle to be solved so it makes the work fun and rewarding in the end.

 

Posted in Interaction Design | Leave a comment

CapMetro Re-design Wrap Up

For quarter two, our Design Methods class has been focusing on rapid ideation and iteration for a redesign of the Capital Metro mobile app. For those of you who don’t know, Capital Metro is Austin’s public transportation system.

To kick this project off, we completely immersed ourselves in the current app in order to formulate a thorough understanding of the current experience of using the app and identify the key areas where it breaks down.

The Problems

There are a number of things that cause frustration while using this app, but the attributes that cause the most frustration is the navigation, different menu items take you to the same place, and in some flows, it’s difficult to find your way back.
Here’s a concept model of the app as it currently is in order to illustrate its complexity and more clearly identify the breakdowns:
 
CURRENT-ConceptMap-CapMetro

 

With these breakdowns noted I created a new, “ideal” concept map:
 
Ideal-ConceptMap-CapMetro-Revised03

With this in mind, I chose to focus on the following:

1. Get a step by step itinerary based on my desired destination from my current location
2. Identifying a stop near me and easily understand if the bus I need will pass through

And so we begin…

Like I said earlier, this class is about rapid ideation and iteration. We started with an initial set of wireframes, user tested them and then made edits based on the results from testing. This process of make, test, iterate went on for six weeks.

Overview-iteration

User testing allows us to assess the usability of the product. In this class, we used Think Aloud Protocol, a method of testing where you ask the participant to think out loud as they are going through the flow of the product to complete a specific task. It allows you, the designer, to gain insight into the thought process a person uses to complete a task rather than just focusing on the completion of the task. This way you can pinpoint where adjustments to the design are needed.

UserTest-Hands
 

Evolution of the Trip Planner

TripPlanner-AllScreens

Evolution of Home Page
Evolution-HomeScreen

Evolution of the Trip Experience

Evolution-Map

Iteration 7: Trip Planner

TripPlanner-FinalFlow-Blog

What I learned

Think aloud protocol works.
People catch on and it’s a great opportunity to step out of your designer tunnel vision and see the design through their eyes. It immediately becomes clear where there are wholes in your design.

Make it difficult, make it real, make it almost impossible.
When user testing, you must be careful about how you craft the scenarios. It’s easy to make a scenario that may not be real enough but works well with what you’ve designed. This won’t tell you what you need to know to move your design forward.

Carefully consider the order of your flows.
It became very clear that it only takes one flow for a user to begin to learn your application and then begin to expect certain results. With this in mind, it’s important to order your flows strategically.

Posted in Interaction Design, Methods | Leave a comment

CapMetro App Iteration 6: Defining and Refining

The latest iteration of the CapMetro App was intended to reduce the number of physical clicks that it would take a user to get from point A to point B, purchase a ticket, or add money to their “wallet”, and get on their bus.

Other smaller functions such as saving to favorites, finding help info were taken into consideration but not the primary function of this iteration.

Below is the revised concept map for this version of the flow:

Cap Metro Concept Map - Support Process

And below are the pre-critiqued wires of the consolidated journey:

1-01

2-01

3-01And below is the post critiqued in class revisions to the wires:

20141210_214335After both critique and user testing the results were mixed both positive and negative.

My user tests did not seem to have an issue with being immediately presented with the idea of getting to a particular location from the location they were currently, via gps.

The critique however pointed out that someone, at some point may want to not always use their current location to get from A to B, and might not realize that by clicking the “Plan a Trip” button on the navigation that option actually appears.

My user test questions then were to specific. The task posed was get from where you are to this destination. This was not an open ended question and from this the task seemed rather obvious and was generally successful.

The next steps are to actually take into consideration these open ended questions. What if a user wants to perform a certain task that I do not have the option for? And this is the process of iteration.

Honestly 7 iterations is really not enough to get to the ultimate flow for the user. Testing and re-testing is really the key. Getting the wires in front of real people and knowing what questions to ask or to NOT ask might actually be the key.

Posted in Classes, Design Research, Interaction Design | Leave a comment

A moving experience: Nearing the end of the CapMetro ReDesign

It’s week 7. That might not mean much to you, but to us here at Austin Center for Design it means we have 10 days left to finish out the second quarter of the Interaction Design for Social Entrepreneurship program.

It also means that after spending the last six weeks working on redesigning the smart phone application for the Austin’s Public Transportation system, CapMetro, we only have one more week to update wireframes, user test them and present them for critique. We are using a method of user testing called the think out loud protocol: A user is given a written task to complete using the wireframes (for example, find a route between your current location and this address), the designer performing the test acts as the “computer” bringing up the appropriate screen or component in response to the user’s actions, and the user is instructed to “think out loud,” saying what he or she is doing and why, while performing the task.  With the fact that the quarter is drawing to a close in mind, I planned my user testing this week to focus specifically on a couple of problem areas in my design.

Me conducting a user test at a favorite dive bar. Image courtesy of Lauren Segapeli.

By this point my flow for searching for routes and narrowing down options based on departure time is going pretty smoothly. So, rather than run users through that again, I focused on how the user drills down on a particular route to a destination, looking at the interaction between the information presented through the map and the information presented via text. I also looked at the flow for the Next Bus feature, which allows the user to find out when a bus is next departing from a particular stop based on real time data, rather than just the set schedule.

My high level take away is both encouraging and daunting: my design has reached a high enough level of fidelity that the animation between states is increasingly crucial for the user to understand how to navigate the application. So, for my final round of testing and critique I need explore better ways to describe this animation. In the meantime, below are some of the specific problems I encountered in my testing and the complete flows I tested. I’m also including a high level system diagram that I created last week to explain a problem I was running into and how I have updated it in this week’s iteration.

searchflow-01searchflowContinued-01

 

Above is a search flow as the user finds a route, departing after 5:30, to go from his/her current location on Chestnut Street to my favorite Mexican restaurant in Austin, Polvos, on South First Street. point-01

This is screen appears after the user has selected one of the options for a possible route to Polvos.

“So I guess I walk from point 1 to point 2…” -User 1

The user I was testing with understood the numbered circles on the map to be points to travel between instead of steps on the trip, this caused confusion.

stackedOptions-01

 

The user can access step by step instructions by swiping up the panel on the bottom. To return to different options the user clicks on the section on top where the options have stacked on top of each other. Most users understood this, however, it was somewhat awkward. This is where I realize I need focus on the animations and transition. It is strange for the options to stack in front of the to/from bar.

The other flow I focused on is for the Next Bus feature below:

NextBusFlow-01

I realized while I was testing that I didn’t include a way to get to screen 25, the list of all bus stops on the route.  I have since added the VIEW ALL STOPS button that you can see in the flow above to address this problem.

:AllStopspng-01

This shows the screen before the button was added.

Finally, I need make more apparent the connection between the scheduled information used to plan trips in the future and the ability to use real time data to check projected arrival time for in-transit buses.

“I’ll reopen it to check for estimated time of arrival when I’m leaving.” -User 3

I want the user to know that when he/she looks at route to a destination within a certain period of time before departure, the app will automatically query the Next Bus data to update the arrival times for buses and modify the route if necessary.  This issue, plus some improvement since last week are diagramed below.

SystemProblemConceptMap-01

Posted in Classes, Interaction Design | Leave a comment

Redesigning the CapMetro App: Iteration 6

iteration 6

Previous user testing sessions made it very clear that it only takes one flow for a user to begin to learn your application and then begin to expect certain results. For this round of user testing, I reordered the flows and scenarios in order to combat this. At the end of a trip, the user is given the option to save that location as a favorite. Since this was the first flow they finished, they applied this model to future flows. Hence, when asked to save a location as a favorite, starting on the home screen, each individual decided to go through an entire trip in order to get to the end where they could then save the location as a favorite.

In addition to reordering my flows, I decided to give the participants scenarios that covered ‘edge’ cases. I wanted to see what how the app would hold up if they had to double back or completely end a trip. While it ended up working fine, I learned that I should most definitely role play these ‘edge’ scenarios as they can be slightly confusing. They were confusing for two reasons– 1. I didn’t write them well and role play before with at fellow classmate would have mitigated this. 2.The participants I tested had a difficult time putting themselves in a situation outside of their current one. Example: If they had to change buses and go a completely different direction they would have “Called an Uber”.

 

Flow #1:

You want to save your home address as a favorite location.

There were no issues in this flow during testing.

Flow01-CapMetro-blog04

 

Flow #2:

You’re currently on Chestnut between 14th St and 15th St. You are walking to the bus stop around the corner on 15th St near Coleto St. You want to see when the next bus is leaving from this stop. You want to double check that the next bus is on the route you need.

Flow02-CapMetro-blog04

Issue:Multiple people expected the route for the next bus to appear after pressing the white pop-up. The hierarchy on the route page confused people– one person thought they were looking at a series of steps for the route.

Design Solution:The hierarchy of information on the page needs to be more apparent. If the user is making a decision based on the route, then the route number needs to be the obvious notation for sorting. This will help set expectations for what they are looking at. Also, there should only be one icon in use on this page. In this case, animation could be a good solution for orientation. Once the user presses on the white pop-up, it will move up to the top of the screen and the other routes through the stop will appear below.

 

Flow #3:

You are currently on the Eastside on Chestnut and 14th St and want to go to Hole in the Wall. Knowing that you’ve previously saved it as a favorite destination, find a bus there.

There were no issues with this flow during testing.

Flow03-CapMetro-blog04

 

Flow #4:

Curious of how people would back out of a trip once they’ve ‘started’, I gave two scenarios for the same flow:

Scenario #1: You are meeting friends at Hole in the Wall. You want to see what different trip routes from your current location will look like on the map.

Scenario #2: You are meeting friends at Hole in the Wall. You are currently on Chestnut and E 14th St. Find a bus to get there. Get on the bus. When you are on the bus, a friend calls and says they changed their minds and instead are meeting on South Congress at Snack Bar.

Flow04-CapMetro-blog04
Issue #1:Everyone hit the back button to view other trip options and “End” to end the trip when their friends called and changed plans. This is good. The confusion happened after they chose a trip. Participants didn’t think to click on a part of the route to see the information.

Design Solution:Once a trip is chosen, the map of the route comes into view and the first step is highlighted with the information pop-up. So, screen 6 will replace screen 5 as the first screen a user sees.

Next Steps
You can view my concept map here. For the next week, I’m going to focus on the usability and fidelity of the above screens.

Posted in Interaction Design, Methods | Leave a comment

System flow from “discovery” to “getting there”

Working on this new iteration (in our Rapid Iteration and Creative Problem Solving class) of an improved festival app (the festival I’ve selected is SXSW) mixed with Austin’s public transportation system (CapMetro) I noticed a need for balance. I want a fluid interaction between searching and saving the large number of events SXSW has, and also how to get there using CapMetro.

One of the challenges in the festival schedule side of the App is communicating a clear even schedule in a calendar form that works easily on a mobile device. There are numerous events happening in multiple places each hour of the day during the festival. I decided to add sorting features that zoned into the different sections of the festival- Interaction, Film and Music. The default would then be “all” and there would also be a section for exploring called “discover” that can generate suggestions based on your selected favorites already added.

Here is a flow model I’m still working through to see how it all plays together as a cohesive system:

IDSE201_SXSW_Map_01-01

I also had the idea of implementing an area of the App that shows you the venue locations on a map (shown above as City Venue Map). I haven’t fit that into the flow yet- will work in that segment on the next iteration, but I do feel it’ll be a nice map for orientation to the various venues all the events are housed in.

The other half to this App is the actual “getting there” portion, and I’m trying to integrate an option at any point exploring the events and schedule that will easily take you to the directions and maps option for catching the bus and getting to your destination quickly.

I have an example flow below to show my first pass at progress.  The touch points (areas the user interacts with the screen) are illustrated in green. This is from when the user starts with “discover” and then elects to get directions to the event.

IDSE201_WIREFRAMES_03-16

From the point of discovery shown above (the user found an event they were interested in attending) they can then select the “M” button to get directions on how to get there using CapMetro.

IDSE201_WIREFRAMES_03-17

 

 

 

Posted in Interaction Design | Leave a comment

SXSW meet CapMetro

Austin is known for it’s music scene and festivals that surround it. It’s not known for it’s public transportation. With our CapMetro App iterations in full swing, I’ve decided to focus on those two very things: SXSW meet CapMetro. Let’s do this, and let’s do this right!

I picked one single festival to start, SXSW, which spans over a large amount of dates and has several different event types within it. Who doesn’t like a good challenge? So I started big. The idea behind this sister app to the already existing CapMetro App is that it can be implemented with any specific festival in Austin. I chose to start with a large and complicated festival because I wanted to work through organizing systems smoothly that seem problem some to simplify. I also think it’s desperately needed, so I’m jumping into it.

IDSE201_WIREFRAMES_02_blogpost-14

Here you’ll see my first draft of digital wireframes. Wireframes are not yet at a state of designing aesthetically, they’re simple for a reason. With wireframes you’re placing areas for functionality and your working through the interaction points. Once the flow and interaction is tested (We’re learning a think-out loud type of User Testing) you can begin to polish your design and bring it to life.

With this first pass I tried to simplify the amount of times you need to tap through screens to get to your final destination of information. I also was trying to implement points where at anytime you find an event you’d like to attend there was a way to get directions there via Capital Metro transportation instantly. You can see the “M” logos in this iteration, those are the points you push for access to the “get there” directions portion of the App.  With user testing I’ve found those don’t communicate clearly yet- although people attempt to push out of curiosity or confusion. I have a lot to fix and work through for next week!

Posted in Interaction Design | Leave a comment

Redesigning the CapMetro App: Iteration 4

The redesign of the CapMetro app is moving right along! I was able to user test six people this round, and it continues to be an educational experience. (Check out my previous post for a more complete breakdown of the user testing process.)

As a reminder, the goals I identified as most important when using the app were the following:

1. Get a step by step itinerary based on my desired destination from my current location
2. Identifying a stop near me
3. Buy a ticket based on my route
4. Easily Use a purchased ticket from any point in the app

 

Flow #1: Find a bus to Hole in the Wall (a local bar).

Flow01-CapMetro-blog03

Issue #1
Once on the map view of their chosen trip, five out of the six participants hesitated on what to do next. They all ended up pressing “GO!” and most finished the trip, but there was lag time between landing on this screen and knowing what to do next.

Proposed Solution:
I’m going to remove the “GO!” feature all together. The full route will be in view the entire time with each ‘step’ of the clickable for more information. The trip progress will start automatically once landing on this screen.
 

Issue #2
The participants who pressed all the way through to the end of the trip, wanted to know when they should get off the bus.

Proposed Solution:
This is an opportunity to add a notification for when the rider is getting close to their stop, as well as when they need to transfer to another bus.

 

Next Steps
During this round of user testing, it became clear that I need to establish looser scenarios for my participants. So far, each of the flows has had a very specific scenario. Such specificity has been helpful in addressing immediate breakdowns within a flow, but has delayed the uncovering of breakdowns lying in the periphery. With this in mind, my next round of testing will involve scenarios that push heavily on the boundaries of the system.

Posted in Interaction Design, Methods | Leave a comment

How may clicks should it take to get to the center of a CapMetro App: Iteration 5 and critique notes for 6

A couple of weeks ago we had a visitor come in that was a map aficionado. From her wonderful visit I came away with a really great sense that a map isn’t just a representation of a space through lines and dots. Maps can convey space, distance, change over time in landscape and construction. Maps are extremely complicated, yet at the same time they should be simple.

A dichotomy I agree, but a necessity I also agree.

Reconstructing the idea of a map through an application where you preform tasks to get to an end goal is not only a task of keeping that map simple, but also making for the user the most straightforward fast and delightful experience that surrounds that map.

After her visit I made some changes to my version 4 iteration, and came up with the below offering to my user test subjects the same 6 tasks.

task1&2-01

task3-01

 

task456-01

This is what (after a few minor tweaks to the interface from feedback from users) my app mock up looked like when viewed through the eyes of a very very smart man.

1

If this doesn’t come completely across at first for the iterations that will come next blog post, here was the feedback from the mini-critique given on the fly Tuesday evening this insightful mini-critique.

  1. Screens 1 & 2 find better ways to show how the user interacted with the app.
  2. Screen 3  There is no option for choosing your time of arrival. What if the user wants to actually arrive somewhere at a certain time rather than leave at a certain time (This was brought up in user testing as well). Buy button can go to the bottom. Why do you need a home button when all your task items are listed at the bottom? Where does home even take you?
  3. Screens 4 & 5 refer to critique of screen 3. Screen 5 take into consideration that there might be multiple steps to get to your stop, and create a scrolling carousel where the user can scroll step by step to their stop while the map animation follows the written information so they are both in sync. Separate out the information sections with whitespace.
  4. Screens 6 – 7- 8 – 9 – 12 – 13 & 14 combine into one screen.
  5. Eliminate 10 & 11 altogether (they are annoying and unnecessary)
  6. Screen 16 – 17 – 18 ok, but could be better and higher quality.

Now, with all that said and all but a few screens left to get to point A to B and buy a ticket (add to Wallet), now it is time to correct these screens, combine and consolidate. To choose fabulously readable fonts, make the UI friendly and creative without being complicated. Fun but not kitschy.  So by eliminating almost half the screens the next iteration will “fill in the blanks” with all the things that inevitably happen when something goes wrong.

So lets get started.

Posted in Classes, Interaction Design, Portfolio | Leave a comment

Week 4: The Cap Metro redesign continues

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).

tripflow_Artboard 7 tripflow-02Next Bus FlowRoutes and Schedules Flow

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.

wireframes3_Artboard 7The other major problems occur on the trip overview screen (page 8).

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.

wireframes3-02

Trip Planning Flow Wireframes (pdf)

Next Bus and Schedule Flow Wireframes (pdf)

Concept Model (pdf)

 

Posted in Interaction Design, Methods | Leave a comment