News and blog posts from our students and faculty

Category Archives: Interaction Design

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

Redesigning the CapMetro App: Iteration 2

We just wrapped up the third round of iterations for our redesign of the CapMetro app. I made changes to the design based on the feedback from user testing in the previous round as well as built out additional screens in order to have a more complete application.

As I said in my previous post, we are doing user testing to drive the iterative process. I didn’t go into much detail before, and am going to give you a little more insight into the process this go around.

FullSizeRender-2

Think Aloud Protocol

User testing allows us to assess the usability of the product. The kind of user testing we have been taught in class is Think Aloud Protocol. With this method of testing, 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.

While some participants catch on immediately and verbalize their thoughts throughout the process, others tend to drop off after about 30 seconds. When this happens, simply prompt them to “please keep talking”– you’ll be met with a smile and a continuous stream of verbalized thoughts.

People get into it.

It’s pretty cool. It’s especially illuminating to hear the thought process of the participant as they are completing the task– most of the time in a way that you didn’t design for. I can say, first hand, that it works. People can describe what they are doing stream of conscious without it affecting the task at hand.

We’ve been testing our app designs using paper prototypes. This is an extremely affordable method that allows us to test each iteration early and often.

For the last two rounds, I’ve tested 5 participants each. I’ve found that only one out of the five participants has a radically different experience with a flow, wether it’s no issues or more issues compared to the other participants. In the next round, I plan on testing seven participants in order to evaluate the difference between sample sizes.

We were tasked with completing user tests with participants that we don’t personally know. Living in a college town, a little incentive goes a long way:

FullSizeRender-3

 

Now, onto what I learned this round.

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

You can see the full flow below, with the green dots notating “ideal flow” and any red showing a breakdown and design rework opportunity.

The home screen was reworked based on the first round of testing where most of the participants were unable figure out how to enter in their destination.

(click image to enlarge)
Flow01-CapMetro-blog02

Issue #1
While each participant easily understood to click in the top section of the screen to enter in their destination, there were two participants that first clicked on their current location in order to get to the next step.

Proposed Solution: If someone clicks on their current location on the map, a small bubble should pop up with the option: “Plan a trip from here.”

 

Issue #2 & #3
Once seeing the map and route come back into view, each participant was looking for what time the bus was going to leave. It’s becoming apparent that once participants have chosen a “Trip”, they are no longer worried about how many total miles they will need to walk, nor the total trip time.

Proposed Solution: Departure time and arrival time will be the key pieces of information in the top bar. Also, if they click on the first bus icon, it will give them the specific bus info needed.

 

Issue #4
After clicking through the trip steps, one participant wasn’t sure how to stop the navigation sequence upon “arriving”.

Proposed Solution: Even though only one participant mentioned this, I think it’s worth considering. I feel like there should be a resolution to “end” the current process. This could be done with a notification that says something like “You’ve Arrived! Save Location as a Favorite Destination?” “Yes/No” > Home Screen

 

Flow #2: Set your home address as a favorite location.

Issue #1
This was a truthful moment. The star is not working as an initial gateway to accessing/setting a favorite location. It quickly became apparent that having two of the exact same icons in close proximity was confusing. Each participant’s knee jerk reaction was to go to settings. One participant wanted to push on his current location, assuming it was his home location, to set it as a favorite.

Proposed Solution: Managing favorite destinations needs to be located in the settings tab. The “destination” field should auto-populate frequent destinations once a user starts typing. There needs to be a simple way to save a location as a favorite.

(click image to enlarge)
Flow02-CapMetro-blog02

 

Flow #3: You’ve already saved your home address as a favorite destination. Find the bus you need to get home.

Issue #1
Compared to the first flow, the participants pressed the star pressed the star in the entry box. One participant pressed the star in the menu bar. While both option will get you to your favorites, it’s still too confusing.

Proposed Solution: The “destination” field should auto-populate frequent destinations once a user starts typing. For the next round of testing, I’m going to A-B test the location of the star.

(click image to enlarge)
Flow03-CapMetro-blog02

 

Flow #4: Edit the email you have listed in your account.

Issue #1
Having two options for editing the information in the account section wasn’t confusing, but the majority of the participants wanted to click on the email field first to edit.

Proposed Solution: For the next iteration, I’m going to make it possible to edit each field by clicking on it.

(click image to enlarge)
Flow04-CapMetro-blog02

 

Next steps
In the next week, I will be doing a third round of user testing which will include iterations of the above flows, as well as additional flows such as purchasing a ticket and the full setting options.

The updated concept map is below. The major change for this map is the ability to manage favorite destinations in the settings menu: (click image to enlarge)

Ideal-ConceptMap-CapMetro-Revised03

Posted in Interaction Design, Methods | Leave a comment

An app for Austin events

I created a 2nd iteration of redesigned concept map for the existing CapMetro application, which has transitioned into improving the experience for festival-goers. While working through the first iteration I realized there was a hole in the CapMetro app that I really wanted to expand on and improve- special events. I moved forward focusing on that specific detail, and while working through the mapping of the application realized it has enough weight to work on it’s own, as an independent resource, outside of the main CapMetro application I began with.

 

IDSE201_Map1_3

 

Upon working through this idea I composed written scenarios for experiences in which people who had plans to visit the various events. I also thought of others who would be visiting Austin just for these specific special events- people who haven’t ever been to the city or aren’t familiar with the area.

I also wanted this new app to have exploratory features, so you could use it for finding out about the events that are in Austin, possibly trigger you to visit or try something new based on user data and preferences. I hope for the app to start identifying with the user and become a great resource and tool for having fun and trying new events in Austin.

Moving forward I’m going to work through my sketches of wireframes, digitalizing and cleaning up the flow. I will then test them with users and rework the design around what users feel they need or see importance in. I’m really looking forward to the upcoming 3rd iteration. Now that my ideas are clearly focused I can start to dig into the details and move forward bringing the wireframes to life.

 

Posted in Interaction Design | Leave a comment

Testing CapMetro App in the Wild

This week our class began testing our proposed ideas for the re-designed CapMetro app. In order to get a sense of how people would navigate the app, I printed wireframes (revised based on our last in-class critique) on paper, and cut them out so they’d be one per page. I then conducted “think-aloud” testing with 4 participants at 2 cafes, some of whom accepted a $5 Starbucks gift card as an incentive. I thought it was just a little too time-consuming to expect participation for nothing, around 15 minutes per person. Think-aloud testing, where participants talk out loud through what they’re thinking as they test the app, seemed easier for some participants than others, but once users got comfortable with it, I was able to hear both their navigation decisions and some of their rationales. The overall concept map is represented here:

wireframes_conceptmapv3

The advantages of using mid/low fidelity images on paper is that, through testing, we’re able to see what aspects of the design give users trouble without investing a lot of time and money into developing the app first. The paper method definitely works. People navigate the app in surprisingly different ways, and problems quickly became apparent. The 3 most common and largest issues were:

1. Not using the menu icon: Only two main functions were shown on the home screen, all others had been hidden in a menu that appeared on the side when a user would tap the menu icon in the upper left corner. Most participants didn’t realize they could use this, leading them to try to accomplish tasks that were not built out through other buttons.

problem1

2. Using the “barcode” method was a novelty: This takes some explanation here. The current CapMetro app ticket is just a screen with a sheen animation. You show it to the driver and just get on. No scan or any other recording that the ticket is used. They just expire within a certain time period (for example, a day pass is 24 hours once activated). In order to create a system where CapMetro can still allow people to use tickets on their phones, but also so the company can track usage, I proposed putting a simple barcode in the bus, on the machine that currently accepts money for fare. I think it would be a relatively inexpensive solution that’s also easy for customers to use. However, I only know of one app from personal experience that turns the phone into a scanner capable of scanning a barcode. The scanner uses the iPhone camera to “look” at the barcode, and once it’s in focus, the phone recognizes the barcode and the next screen flows in. I don’t think this is a common function. One participant did figure out the mechanism behind the function. She talked through thinking the bus scans the phone to the phone scanning the bar code on the bus: “So I just hold my phone over it? […]I’m assuming I’d just use the camera on my phone.”

problem2

3. Problems with the “Route selection” screen: This screen consistently gave users issues, for different reasons. One is that they were not sure that they could click the gray bars that show each route option. One user did not like the order each variable went in, preferring to see the route number, then departure time, then duration, then amount of walk time. More than one user was confused about walk time—if it meant walking to or walking from the bus.

problem3

Overall I think the tests indicated that most of the app worked well, but also gave plenty to iterate on for next week. Regarding the 3 problems specified above, my to-do list includes:

1. The menu icon: I will need to enhance the visibility, enhance indicators that make the icon look “clickable,” find a way to include options that are currently accessible only via the side nav in the home screen, or some combination of these ideas to make sure users can access all features with ease.

2. The barcode scanner: I need to think about it a little more, and consider if it’s too foreign to use for a public transportation app. I still really like the idea, and the confusion may be a downfall of paper testing. Also, if users can “learn” the usage quickly, it might be ok to keep even if usage of the scanner is not immediately clear.

3. Route screen: Rethink the layout of the screen and information hierarchy. With increased fidelity, route options should look more “clickable” by employing a visual technique such as a bevel.

And…

4. Test some less-primary functions and flows a user may need. The questions I asked this week were around major tasks a user would want to do with this app. There are more minor tasks a user may need some of the time, and I will explore those as well.

The full set of wireframes may be viewed below*:

wireframes_v3_blog

 

*Note, areas that say “Keyboard” are a testing note. In think-aloud testing, a separate card with a iPhone keyboard on it was used to simluate a keyboard popping up when fields were tapped.

Posted in Interaction Design, Methods | Leave a comment

Expanding orders of design

In his article, Interaction Design and Service Design: Expanding a Comparison of Design Disciplines, Stefan Holmlid builds on the Orders of Design, originally proposed by Richard Buchanan and a comparison between industrial design and digital interaction design by Edeholt &Lowgren, to investigate the similarities and differences between digital interaction design and service design. Buchanan’s Orders of Design were originally suggested before the digital revolution. Edeholt & Lowgren compare digital interaction design and industrial design in 2003, precisely because of the increasing prevalence of objects with digital components that required the skills of industrial and digital interaction design.

EdeholtLowgren-02

Holmlid picks up in 2007, exploring the boundaries between service design and digital interaction design. Right away his terms suggest that this might be a false dichotomy. He distinguishes digital interaction design, which Edeholt & Lowgren reference from the broader design order of interaction design that Buchanan uses in his framework. Holmlid suggests that digital interaction design and service design both belong to the design order of interaction design.

Holmlid

The axes for thinking about design presented by Edeholt & Lowgren with the elaborations offed by Holmlid are useful and revealing. For instance, one of his comparisons suggests looking at social, temporal and spacial dimensionality as part of the material area of design. These are all important facets of design that might not be thought of, however, Holmlid’s  conclusions fall short. He says that service design is “highly social,” whereas industrial design is “not significantly social” and digital interaction design is, “somewhat social.” What does this mean? Holmlid does not define social. Every relevant definition of social includes the concept of a person among other persons, rather than in isolation. Holmlid claims industrial design is not social, but the very idea of mass production is anathema to isolation. Holmlid’s categorization breaks down because he assumes a stratification and separation between Buchanan’s orders of design. What comes through to me from all of his comparisons is that all designed things, be they spaces, objects or signs, exist in a matrix of human action and are actualized by that action. I propose an alternate view.

WatkissThe complexity of human action required to interact with objects has increased dramatically with the advent of digital technology and created the need for interaction design as a discrete discipline. As design has matured as a discipline and technology has advanced our awareness has expanded from the things that we make to the actions that surround them.

What would it mean to continue expanding that awareness to the systems of thought which surround human action? (I have replaced environmental design with systems design to avoid confusion with environmental graphic design or environmental concerns in design). Already, as designers practicing in the order of interaction design, we are aware that our designs are only as good as their ability to fit within the system of thought surrounding them. This is why we do research to understand mental models and cultural assumptions. This model also points out that everything we create is within this system of thought and therefore influences it. Designed things are not neutral and we are responsible to understand how they ripple out into our culture. Finally, there is an opportunity for designers to expand our work to directly creating systems of thought. Design has a role in shaping policy, education and culture.

 

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

Revitalizing Capital Metro App: Iteration 2

Concept Flow V2: Goal – Find a bus stop, get destination information, purchase ticket (ticketing checkout still undecided)

Cap-Metro-Concept-Map

Individual Screens:

screens

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

The critique you seek

The most exciting thing about rapid iteration is seeing the delta between attempts. I’m hoping that at the end of this evening I’ll be celebrating a big delta between last week’s critique and this week’s. It’s not that my work got torn apart last week, actually, the kind of the opposite. Although, I knew what feedback I wanted from the critique, at the end of the ten minutes, I didn’t feel like I had gotten that feedback. So, I have a new plan of attack for critique #2:

  • Ask specific questions
  • Don’t move to the next question until first question is an answered
  • Call on specific people if necessary
  • Keep my own mouth shut except to ask questions

On reflection, this course is as much about learning how to get the right feedback at a given stage of the design process, as it is about learning to create wireframes and app design. We have been discussing how the level of fidelity and style of wireframes influence type of feedback. Last class, Jon introduced the think out loud protocol for usability testing that we will be using to get user feedback to drive subsequent iterations.

With all that in mind, here is what I’m planning to show:

Concept Model Cap Metro App - New and Improved

I want feedback about what details belong in route preview when the user is still comparing options (blue section) and what details belong in the drill-down view of a specific route (pink section). I also want reactions to the paths to Routes & Schedules (yellow lines) and Next Bus (green lines). I am still undecided about the value of keeping the buy a ticket functionality (gray section). Since I don’t have user research to rely on I am going to solicit feedback about that as well.

Save new place dialogue

I’m confident that raising up and streamlining the trip planning functionality of the Cap Metro App is a priority. So I’m going to present wire frames of that section and ask about where to integrate a map view and the flow for saving frequently used places. Pfs of the concept model and additional wireframes below.

Concept Model

wireframes

Posted in Interaction Design, Reflection | Leave a comment

Financing Longer Life Expectancies in an Aging Population

“In 1940, the typical American who reached age 65 would ultimately spend about 17 percent of his or her life retired. Now the figure is 22 percent, and still rising.”[1]

As life expectancy in America has increased (about 3 months each year since 1840)[1], so has the length in retirement, and attendant worries about financing life in old age. By 2025, 25% of the U.S. population will be over 60, compared with 16.5% in 2000 [2]. The repercussions are often difficult for retired individuals and their families, but they are also far-reaching in society, affecting wide-ranging fields including politics, healthcare, and finance.

Here at the Austin Center for Design, we’re interested in researching how people finance or plan to finance this long period of retirement, and coming up with design ideas to address this multi-faceted problem. Our team [Lindsay Josal, Maryanne Lee, and Laura Galos] will focus our next 3 quarters on financing the longer life expectancy of an aging population, particularly for members of the working class.

In conducting our research, we will primarily employ Contextual Inquiry to gain understanding and empathy with people in retirement or planning for retirement by observing and learning from them in a “master-apprentice”-style relationship. Specifically, we plan to learn from retired individuals, working-class individuals in their 30’s, 40’s, 50’s, and 60’s (to gain a sense of perceptions at each age plateau), financial experts, and caregivers of retired individuals.

Our full research plan can be found here.

We believe that addressing the new financial concerns that arise with increased longevity can alleviate some of the financial, health-related, and emotional issues facing both seniors and their circle of caregivers.

Interested in learning more or participating in our research? Do you know someone who would be open to speaking with us about financing retirement? We would love to hear from you! You can contact us at:

lindsay.josal@ac4d.com

maryanne.lee@ac4d.com

laura.galos@ac4d.com

 

References:

[1] Easterbrook, Gregg. “What Happens When We All Live to 100?” The Atlantic Monthly, Oct. 2014. Online. Accessed 11/5/14. http://www.theatlantic.com/features/archive/2014/09/what-happens-when-we-all-live-to-100/379338/

[2] Disruptive Demographics. MIT AgeLab. Online. Accessed 11/5/14. http://agelab.mit.edu/disruptive-demographics

Posted in Design Research, Interaction Design, Motivation, Social Innovation | Leave a comment

User-centered sustainability

In our second quarter, we have begun to study Service Design. Our readings began with a chapter on “Convergence,” from Innovation X by Adam Richardson. One point raised in class was that some of Richardson’s arguments are from a business-oriented perspective, rather than a user-centered one. There are good reasons to present arguments from a business perspective, but to create truly useable and successful design ideas, a user-centered perspective is often highly desirable. In light of this observation, I examined Richardson’s argument about sustainability as a convergence challenge and opportunity.

To take one step back, Richardson defines “Convergence” as the “integration of multiple products (hardware, software, and services), and customer touchpoints to provide functionality, benefits, and a customer experience that would be impossible in a stand-alone product.” He argues that sustainability is a particular challenge and opportunity for convergence.  The term “sustainability” can be applied to many things, but at first mention Richardson specifies environmental sustainability. My mental model of environmental sustainability is of an eco-oriented practice that ensures natural resources for the future. Richardson states that, “sustainability is increasingly a competitive differentiator, as well as becoming necessary for regulatory compliance.” He also says that sustainability can spur new business models (eg. as customers move from ownership of products to shared products). He shares an example where HP was able to reduce packaging, resulting in lowered transportation costs, among other gains.

So it seems that sustainability, as he means it, is comprised of (1) competitive differentiation, (2) compliance, (3) cost efficiency, (4) opportunity for new business, and also (5) an environment/resource benefit. Richardson’s use of the word simultaneously makes the term more specific (applying it to concrete practices) and less specific (removing it from the nature and resources). It seems that “sustainability,” a fashionable term, is more a provocation for new business ideas than a goal in itself. If that ends up creating mores environmentally sustainable solutions, that’s wonderful, but is it the best method?

Here is sustainability as I thought of it previous to the reading:

sustainability

Here is what I think “sustainability” is made up of according to the text:

business_sustainability

Again, these terms seem to come from a business-oriented perspective. If “sustainability” for Richardson is a business imperative that can drive a product to success, would a user-centered one-to-one corollary to his model create better solutions?

This is one idea of what that might look like:

user_sustainability

How would this change resulting design ideas? It’s very hard to say without going through the process, but at least it would begin by addressing the things users themselves care about. If the point of convergence is to create “higher quality and more comprehensive experiences customers are seeking,” beginning with customers is a good way to start.

 

Posted in Interaction Design, Theory | Leave a comment

A Concept Map in an Hour

We’re starting off Quarter 2 with our class in Rapid Iteration and Creative Problem Solving. The first assignment came at us really quick- we had 48 hours to create a concept map of the Austin Bus application- CapMetro. We learned that a concept map, a tool for sense making, is a representation of a system that sacrifices accuracy for comprehensibility. Its particularly useful for this project because it helps examine an entirety of a complicated system in one visual representation.

This the first iteration out of 7 that will take place over the next 8 weeks. We’ve been learning how to complete assignments in broad strokes, which is a challenge for me in particular. To address this difficulty I decided to complete my first pass through concept mapping in just an hour, and I learned how effective it was to flesh out all ideas, even at a high level, in a limited time.

The first concept map I created represents the app as it exists today. The second shows my ideas to help improve issues and breakdowns that I observed.

Moving forward, I would like to continue to use rapid iteration in the form of one hour windows for getting through the process in its entirety.  As for CapMetro, I’d like to continue with mapping the entire system (only portions are shown here now) so that I work towards even more ideas to optimize usability.

Screen Shot 2014-10-29 at 10.30.11 PM

 

 

Posted in Classes, Interaction Design | Leave a comment