D.C. Metro Kiosk
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris Ornare condimentum nibhr. Vestibulum id ligula porta felis euismod semper.
D.C. Metro kiosk
THE ASK: To identify an interface that is difficult for people to use and redesign it to create a more efficient, user-friendly experience.
THE SOLUTION: The ticker kiosks for the D.C. Metro system are out dated, confusing, and difficult to use. Ticket buyers are confronted with an overwhelming amount of information yielding an unguided flow of user interaction, causing traffic jams at the machines. The interface needed to be redesigned so that people could quickly purchase their ticket or refill their SmarTrip card in an efficient and timely manner. To accomplish this the amount of screen the user is confronted with has been streamlined and clarified for a shorter ticket purchase process.
CURRENT PAIN POINTS
- Confusion between peak vs. off-peak timing.
Too much information on the ticket vending machines (no hierarchy, overwhelming to user).
Price chart is out of date and hard to read, causing back up at the machines.
Does not have multiple language options.
New farecard amounts automatically start at $20.00, having the dollar and change buttons to click all the way down to the price you want.
Disposable, paper card that can hold from $2.75 to $45.00.
Permanent, rechargeable card that can hold up to $300.00.
Washington, D.C., U.S.A.
34 years old
NEEDS: Refill SmarTrip card as fast as possible
ACTIVITIES: Jogging, biking, teaching his son how to play tennis
METRO USAGE: SmarTip Card; to and from work, get around town on a daily basis
Alexandria, VA, U.S.A
26 years old
Foreign Affairs Officer
NEEDS: Be able to add money to an existing farecard or buy a new farecard fairly quickly
ACTIVITIES: Going downtown on the weekends for sports games and concerts
METRO USAGE: Single Farecard; get in and out of the city for recreational activity
47 years old
NEEDS: Easily figure out how to purchase a farecard, how much money to put on it, and have multiple language options
ACTIVITIES: Taking kids to the beach, coaching son’s fútbol team, watching games on television with friends and family
METRO USAGE: Multiple Farecards; For tourist travel around a foreign city
I created low-fidelity set of interactive wireframes to have people test the usability and interactivity.
Taking the Round 1 feedback into consideration I redesigned the wireframes and did one last round of user testing.
New Farecard Wireframe
Existing Farecard Wireframe
SmarTrip Card Wireframe
I came up with three distinct color palettes for each type of ticket so that users would recognize the ticket section they were in.
The symmetric design of the screens and chosen photography was inspired by the balanced layout of The Mall in downtown D.C.
A total of four screens that guide the new user through the purchasing experience.
The information is consolidated and the peak and off peak hours are automatically generated.
A total of five screens that user has to go through to add money to their existing farecard.
A total of four screens that the experienced user has to go through to add money to their SmarTrip card.