top of page
MIELA EFRAIM
CharlieCard Redesign
Redesigning the interface for the MBTA CharlieCard fare vending machine to improve accessibility features
Challenge
In my Computer Interface Design course, I was tasked with redesigning the interface for the MBTA (Massachusetts Bay Transportation Authority) CharlieCard vending fare machines. The prompt asked to design for 2 card options: a stored value card where riders can add money and deduct value with each ride including free transfers, and an unlimited ride card by week, month, or semester. Design requirements included buying a new CharlieCard, adding stored value to an existing CharlieCard, checking the balance of stored value of an existing CharlieCard, paying and getting a receipt and change and getting information on how to get from current location to a new destination via T, bus, commuter rail, or ferry.
Personas
System Requirements
Wireframing
Workflow Analysis
Site Map - Tree Diagram
Mockups (Round 1)
For the first round of mockups, I focused on making each screen legible, minimalist, and easy to navigate.
User Testing (Round 1)
For an initial round of user testing, I asked 2 participants to complete the tasks on the task checklist and talk through their actions and decisions to provide feedback in a casual, untimed setting. I made edits to the mockups based on suggestions made during testing.
Updated Site Map - Tree Diagram
Original
Original
New - "Call for Help" button
New - Added option to view fares from Home page
Updated - Pinned language selection bar
Updated - New page dedicated to accessibility
New - Dedicated page to instruct user to scan CharlieCard in order to view stored value amount
New - Dedicated page to view fares
User Testing (Round 2)
For the second round of user testing, I asked the same 2 participants to complete the new task checklist with added subtasks. I implemented feedback to change the location of the language bar and to add screens for different types of payment methods.
Original
Updated - Language selection pinned to top right
Original
New - Screen for Apple Pay
Original
New - Screen for Yes I want a receipt
Interactive Prototype
bottom of page