DCC DC Metro RedesignOctober 1, 2019

Erin Lea, Maya Lee, Chris Lucian, Katie Norden, Renee Paulraj, Christina Yang, Tiffany Yen

Group Members and Responsibilities

● Chris Lucian (Project Manager) - Chris organized all means of communication, including the GroupMe and Google Doc. He took responsibility for turning in the design and notes and proofread all the designs and documents. He and Renee took responsibility for presenting the team’s design and screenshots of the WMATA website.

● Renee Paulraj (Ethnographer) - Renee tested the current Metro/SmarTrip Card setup and interviewed real-life users in Washington DC on Sunday, September 15. She helped analyze the usability test results and make improvements. Additionally, Renee compiled notes, screenshots, and photos for her presentation with Chris.

● Katie Norden (Ethnographer) - Katie tested the current Metro/SmarTrip Card setup and interviewed real-life users in Washington DC on Sunday, September 15. She conducted usability testing with Maya Lee on Thursday, September 26 and helped analyze the results. Additionally, she and Christina Yang compiled this usability document to summarize project work.

● Erin Lea (User Experience)- Erin contributed to the initial team meeting by providing ideas for the design of the metro kiosk and continued by creating the design through Adobe XD. She worked on the welcome screen for the metro system, in addition to incorporating the keypad into the design so users can add money.

● Tiffany Yen (User Experience)- Tiffany also contributed to the initial team meeting by providing her insights into how the metro kiosk should be designed. She utilized Adobe XD to create the interface for one-way and round trips. Tiffany also created a solid baseline for how the slides should be presented and transitioned.

● Christina Yang (User Interface) - Christina worked to add fonts, color schemes, and designs to the interface created by UX. Christina additionally planned out the pre-testing, testing, and post-testing questions and procedures, and compiled this information into forms. She helped analyze the data and provided new revision ideas. She also conducted a usability test with her mom.

● Maya Lee (User Interface) - Maya worked to add fonts, color schemes, and designs to the interface created by UX. Maya decided that the Metro redesign should mirror the WMATA website design, since the WMATA website is streamlined and well-designed. It would also help to have some consistency between platforms. She also compiled a mock setup in which to place the kiosk, including a slot for money and a place (on screen) to tap the SmarTrip Card. She conducted usability testing with Katie Norden, and helped analyze results.

Initial Fieldwork NotesRenee PaulrajKatie Norden

Inexperienced user observations● Not intuitive● Technology really stands out● Too many minor steps within the three major steps● Progression doesn’t flow logically● Passenger adds money by amount, not trip, which is very confusing● Buttons for dollars and cents are very confusing; users are confused at first about which

ones to press● Very bulky● One user placed the smartrip card the wrong way against the sensor ● “Cancel” button pressed very frequently

Experienced user observations● Took less time● Still struggled with tapping card and adding money using buttons● Familiarity = ease● Believes the instructions are clear for the most part

Positive user feedback (mostly from experienced riders)● Directions written out● Experienced riders only hit “cancel” once or twice

Negative user feedback● Toggling price● A, B, C buttons constrained visible options

○ Hidden options are confusing● Everything is condensed on a very outdated, 90s-looking screen

How was the experience:● One woman gave up after putting the card in the wrong way and couldn’t figure out fares● Another man was struggling with cash, couldn’t get change, pushed cancel and walked

away

What could make it better (based on interviews)● Interviewees:

○ Experienced user, older man, said there was nothing wrong with his experience○ Two middle aged women, tourists, very frustrated, had no idea what to do,

overwhelming design, too much at once○ Two experienced users, said they were used to it but gave good insight from the

metro/transportation systems in Tokyo; they said Tokyo had many less choices, designated fares for each destination, and less information on the screen at once

● Touch screen, immersive interface

● In Tokyo, you can enter the destination and a one way/round trip and fare is calculated for you. This would definitely make it better

● Phone connectivity option. A metro app would be a good idea● One step at a time direction on touch screen● The directions could be condensed and made more comprehensible ● Money could be inputted with a keypad, not a toggle

Major Problems to Solve● Buttons for adding money are very confusing due to the toggles and their proximity● Everything on the screen is cluttered and overwhelming to a new user who doesn’t know

where to begin● Adding based on trip and not by price● SmarTrip card sensor is small, on the bottom, and near step 2 so it isn’t intuitive that’s

what the user should first use

Our Prototype

Usability Testing

Active testing profiles for each participant. See separate attachments for demographic pre-test details and post-test results.

READ TO PARTICIPANTS:[conduct pre-test survey]You are at the College Park Metro Station, and you know you’re going to several places

throughout the day. You already have $1.20, but you would like to add $10.00 to your SmarTrip Card so you have enough to last a whole day. Try to add $10.00 to your card. Narrate your process.

[take notes while they add $10.00]The next day, you go back to College Park Metro Station. Today, you’d like to take a

one-way trip to Farragut West. Yesterday, you spent a lot of money on your SmarTrip Card, so it now has a balance of $1.20. Try to add money to your SmarTrip Card, but only enough to make a one-way trip from College Park to Farragut West. Narrate your process.

[take notes while they plan a trip][conduct post-test survey]

Participant 1: Yan Li (middle-aged woman)What are their initial reactions to the prototype?

● She didn’t like the design because it did not feel “comfortable.”● It looks a bit confusing; she was not sure what to do first.

What do they notice immediately? ● It doesn’t tell you where to tap the card; we should have a picture indicating where to tap

the card.

What are their impressions? What would they want to do first? ● She wanted to click the buy card because even though she had a card, the buy card

option looked more like a button.

Ask participants to complete several tasks and narrate their thought process as they complete these tasks. Take notes on their narration, assumptions, and physical actions with your prototype.

● The black text for “Tap your SmarTrip Card to begin” was very odd and did not look clickable; she got stuck for a bit.

● When adding $10.00 and watching the numbers move to the left, she commented that sometimes adding numbers can be very confusing. She said she remembered to add the extra two zeros after the “10” because she’s very experienced.

● She went to add money instead of calculate fare for the one-way trip exercise.● The time delay was too short and did not give her adequate time to tap her card or insert

money. She also wanted graphic representations of where and how to do those things.● She thought it would be better to have the name of the location (Farragut West) appear

on the bar without having to click confirm. She was annoyed at having to click confirm excessively.

● She then started to critique the evaluation form and did not like that (even though I told her that I did not design it).

Participant 2: Ridgely Franklin (senior girl)What are their initial reactions to the prototype?

● Looked very neat, read directions immediately

What do they notice immediately? ● Panicked because she didn’t know what calculate fare meant...direction was unclear?

What are their impressions? What would they want to do first? ● Wanted to check how much she has, which she can do

Ask participants to complete several tasks and narrate their thought process as they complete these tasks. Take notes on their narration, assumptions, and physical actions with your prototype.

● Add money● Typed 10● Paid in cash● Did not like the second part with the drop down menu...maybe better instructions● Peak hours vs not peak vs weekends● She normally overestimates and never exactly calculates...didn’t like that calculated fare

only gives you EXACTLY how much you need...confusing wording at that part...people who go to DC all the time wouldn’t use that feature, but tourists might find it useful

● Found the extra keypad very useful in the drop down part

Participant 3: Ben Phillips (freshman boy)What are their initial reactions to the prototype?

● Confused, has never used the DC Metro before● Did not know things about mock setup but the prototype itself was fine● Didn’t understand time of day

What do they notice immediately? ● Asked if he’d get change

What are their impressions? What would they want to do first? ● Wanted to tap card but couldn’t find reader…maybe change mock up?

Ask participants to complete several tasks and narrate their thought process as they complete these tasks.

● Asked questions when confused● Had to tap some buttons more than once● Understood the numbers● Much easier second time through

Take notes on their narration, assumptions, and physical actions with your prototype.

● Liked that it added directly● Liked the back buttons, wanted one back to the keypad on the destination slide● Drop down menu was confusing● Hardest part was knowing where to tap card (not something to fix directly, but maybe

have a visual pointing to where the card reader is)

Prototype Evaluation Paragraph

Date: September 26, 2019

Major Problem: Hard to locate where to tap cardResearch Details: All users struggled with this and found it confusing.

Suggested Fix: Add a visual (i.e. an arrow) identifying where the card should be tapped, put card reader and “Tap Screen” on the interface, or implement animated graphic.

Major Problem: Didn’t understand calculate faresResearch Details: Users agreed that they would like a feature to choose how much money to add to their card after calculating fares. Second user thought it was confusing how much money was being added to her card. (also we need an option to select time of day)Suggested Fix: Make specific wording more clear and add time of day selection.

Major Problem: Struggle with DropdownResearch Details: Multiple participants didn’t like having to press confirm so many times when calculating fares.Suggested Fix: Allow a location selection to advance a user to the next page without clicking confirm.

When designing and creating our prototype, our main focus was to improve the current design by sending commuters smaller packets of information, making the kiosk more visually appealing and intuitive, and creating a simpler process for adding money and planning trips. While focusing on accomplishing these goals, we overlooked a few details which were immediately identified in our usability testing. Our first problem, which especially affected non-regular commuters, was that the commuter did not know where to tap their metro card, for there was no visual stimulation showing where to do so. To solve this problem, we implemented an animated graphic which displayed that one should tap their card to the off-screen card icon. Our second major problem proved to be fairly similar to our first, involving the design’s visual clarity and intuitiveness. All of our testers had an issue in our “calculate fare” task relating to this theme. To solve their issues, we started by changing the name of the route itself to “plan a trip,” because its language is much more self-explanatory. We then adjusted the interface to make the buttons more identifiable and clickable and to keep track of the information put in by the commuter, making the design feel much more natural and comfortable. We also added an option to manually input the money added to your card instead of using the exact calculated change to give commuters more choice and confidence (for those who like to overpay to be safe). Our final problem related to the physical loads put on our commuters. Specifically, we were told multiple times about the unnecessary confirm button that exists in our dropdown

menus, when choosing a destination. We solved this issue by directly inputting the commuter’s choice in the dropdown menu and advancing to the next screen. We also fixed another commuter load by adding a delete button to the keypad, allowing the consumer to delete a single number instead of having to re-input their entire purchase.