HOME

MBTA KIOSK

Don’t just ride the train.
Be a part of the city.

Don’t just ride the train.
Be a part of the city.

Don’t just ride the train.
Be a part of the city.

Your all-in-one hub for fares, navigation, and local hotspots.

Overview

This project aims to redesign the Massachusetts Bay Transportation Authority (MBTA) kiosk. The goal is to enhance the existing machine’s functionality and create an interactive experience that assists riders in exploring the city using the transit system.

Disclaimer: I am not affiliated with the Massachusetts Bay Transportation Authority and this is an academic design concept created for educational and creative purposes only.

Role

UI Designer

Instructed by

Cory Costantino

Duration

5 weeks

Scope

UI Design

UX Research

User Personas

Role

UI Designer

Instructed by

Cory Costantino

Duration

5 weeks

Scope

UI Design

UX Research

User Personas

Design Prompt

Elevating the transit experience, starting at the kiosk

The aim is to move beyond a static fare transaction display toward a tool that actively helps riders navigate ambiguity around the city: unfamiliar routes, service disruptions, and new sights. The redesign builds on a kiosk that already works, so core tasks like buying and reloading fares stay quick and familiar, while new interaction makes the machine one riders are curious to use beyond its basic function.

The aim is to move beyond a static fare transaction display toward a tool that actively helps riders navigate ambiguity around the city: unfamiliar routes, service disruptions, and new sights. The redesign builds on a kiosk that already works, so core tasks like buying and reloading fares stay quick and familiar, while new interaction makes the machine one riders are curious to use beyond its basic function.

The aim is to move beyond a static fare transaction display toward a tool that actively helps riders navigate ambiguity around the city: unfamiliar routes, service disruptions, and new sights. The redesign builds on a kiosk that already works, so core tasks like buying and reloading fares stay quick and familiar, while new interaction makes the machine one riders are curious to use beyond its basic function.

Target Audience
Target Audience
Target Audience

The primary audience includes Boston natives and tourists, from daily commuters to first-time riders. Additionally, the kiosk should work for riders with low vision or mobility impairments, and for those who prefer a language other than English.

Innovative Features
Innovative Features
Innovative Features

Multimodal trip guidance

Live alerts for delays and construction

Travel information for locals and visitors

Affordances for language, vision, and mobility impairments

Challenge

How might we transform a static fare kiosk into a city companion?

The MBTA is more than a way to get around Boston. It is part of the city's history, home to the nation's first subway, which opened in 1897. Today it carries a ridership more diverse than ever, with riders of many backgrounds.

The kiosk is often a rider's first touchpoint, yet it offers few languages, unreliable audio, and text-heavy screens with no guidance for newcomers.

The kiosk is often a rider's first touchpoint, yet it offers few languages, unreliable audio, and text-heavy screens with no guidance for newcomers.

Final Design

An interactive experience available at every station, for every rider

Featuring ID-verification for reduced fares, faster payment flow, and trip planning that seamlessly guides riders through the city's gems, the kiosk aims to remove barriers that make riders hesitate.

Featuring ID-verification for reduced fares, faster payment flow, and trip planning that seamlessly guides riders through the city's gems, the kiosk aims to remove barriers that make riders hesitate.

The MBTA kiosk is no longer just a place to pay, but a city companion that makes getting around Boston simple, welcoming, and worth a second look.

The MBTA kiosk is no longer just a place to pay, but a city companion that makes getting around Boston simple, welcoming, and worth a second look.

Fare /

Fare /

Fare /

Purchasing and reloading fare across all transit modes

City Exploration /

City Exploration /

City Exploration /

Navigating and staying up-to-date

Accessibility /

Accessibility /

Accessibility /

Getting the help you need

Getting the help you need

Getting the help you need

Process

3 Phase design

Over 5 weeks, I redesigned an existing tool with the focus of making the kiosk more interactive and useful for riders of diverse backgrounds. I wanted to design a tool that people would be curious to explore and most importantly, within real-life constraints.

Over 5 weeks, I redesigned an existing tool, moving from research and definition through prototyping and feedback. Because the kiosk already works, I focused on changes that could realistically be made without buying a new machine or overhauling the layout riders already know. Every decision had to improve the experience while keeping the kiosk familiar.

WEEK 1
Research
WEEK 2
Define
WEEKS 3 - 4
Prototype
WEEK 5
Final Design
WEEK 1
Research
WEEK 2
Define
WEEKS 3 - 4
Prototype
WEEK 5
Final Design
Week 1
Research
Week 2
Define
Weeks 3 - 4
Prototype
Week 5
Final Design

Research

Who are the riders of the MBTA?

A passenger survey conducted by the MBTA in 2022 show that transit riders consist of . . .

  • 65% are between the ages of 18-34

  • 32% speak a language other than English at home

  • 48% are from lower-income households

  • 58% of riders identify as a minority

Source: MBTA 2022 System-Wide Passenger Survey

However, the existing kiosk fails to support even the everyday rider. Upon conducting a usability audit, I found that . . .

However, the existing kiosk fails to support even the everyday rider. Upon conducting a usability audit, I found that . . .

  • Language support is limited. Older machines offer at most only three languages.

  • Low-vision support is unreliable. In a 2012 test, 60% of 76 machines gave no audio through headphones or announced purchase details aloud.

  • Newcomers get little guidance. Buying a fare can take up to 7 text-heavy screens, with no help finding the way afterward.

Define

3 riders, 3 different needs

To reflect the diversity of riders in Greater Boston, I created 3 personas grounded in the rider census and my usability audit.

Over 5 weeks, I redesigned an existing tool, moving from research and definition through prototyping and feedback. Because the kiosk already works, I focused on changes that could realistically be made without buying a new machine or overhauling the layout riders already know. Every decision had to improve the experience while keeping the kiosk familiar.

Each represents a different background, goal, and level of familiarity with the system, so the design could be tested against more than one kind of rider. Together, they shaped what the kiosk offers and when.

Vivian Smith
Vivian Smith
78, Retired
Vivian is a retired widow who lives alone in the suburbs. She no longer drives and avoids ride sharing, so she relies on her children or public transit to visit friends and walk around Boston Common.
GENDER
Female
STATUS
Single
LOCATION
Foxborough, MA
PAYMENT METHOD
Cash
TECH LITERACY
NEEDS
  • Rides commuter rail into the city
  • Wants a simple fare purchase with few buttons and choices
CONCERNS
  • Has a hard time navigating new technology
  • Prefers single-use passes
  • Has poor eyesight
Jaydon Williams
Jaydon Williams
22, Student & Barista
James is a 4th-year pre-med student from France. He lives off campus without a car, is always on the go, and prefers the most efficient, reliable route. In his free time, he wants to try all the new restaurants in Boston and runs a food Instagram.
GENDER
Male
STATUS
Single
LOCATION
Quincy, MA
PAYMENT METHOD
Tap-to-Pay
TECH LITERACY
NEEDS
  • Rides the bus to campus and his part-time job
  • Frequently goes to NYC via Amtrak
CONCERNS
  • Wants the cheapest rates and the most efficient travel package
  • Depends on transit for a packed schedule
Minh Le
Minh Le
34, Hair Stylist
Thuy moved to Boston about 2 years ago and speaks limited English. She has two young children and works full time at a salon 3 miles from home. She doesn’t own a car.
GENDER
Female
STATUS
Married
LOCATION
Foxborough, MA
PAYMENT METHOD
Cash
TECH LITERACY
NEEDS
  • Takes the bus/subway daily to work and to pick up her kids
  • Takes the train/ commuter rail with her family on weekends
CONCERNS
  • Speaks some English but is less comfortable reading and writing it
  • Loads her card at the start of each month so she doesn’t have to think about it
Vivian Smith
Vivian Smith
78, Retired
Vivian is a retired widow who lives alone in the suburbs. She no longer drives and avoids ride sharing, so she relies on her children or public transit to visit friends and walk around Boston Common.
GENDER
Female
STATUS
Single
LOCATION
Foxborough, MA
PAYMENT METHOD
Cash
TECH LITERACY
NEEDS
  • Rides commuter rail into the city
  • Wants a simple fare purchase with few buttons and choices
CONCERNS
  • Has a hard time navigating new technology
  • Prefers single-use passes
  • Has poor eyesight
Jaydon Williams
Jaydon Williams
22, Student & Barista
James is a 4th-year pre-med student from France. He lives off campus without a car, is always on the go, and prefers the most efficient, reliable route. In his free time, he wants to try all the new restaurants in Boston and runs a food Instagram.
GENDER
Male
STATUS
Single
LOCATION
Quincy, MA
PAYMENT METHOD
Tap-to-Pay
TECH LITERACY
NEEDS
  • Rides the bus to campus and his part-time job
  • Frequently goes to NYC via Amtrak
CONCERNS
  • Wants the cheapest rates and the most efficient travel package
  • Depends on transit for a packed schedule
Minh Le
Minh Le
34, Hair Stylist
Thuy moved to Boston about 2 years ago and speaks limited English. She has two young children and works full time at a salon 3 miles from home. She doesn’t own a car.
GENDER
Female
STATUS
Married
LOCATION
Foxborough, MA
PAYMENT METHOD
Cash
TECH LITERACY
NEEDS
  • Takes the bus/subway daily to work and to pick up her kids
  • Takes the train/ commuter rail with her family on weekends
CONCERNS
  • Speaks some English but is less comfortable reading and writing it
  • Loads her card at the start of each month so she doesn’t have to think about it
Vivian Smith
Vivian Smith
78, Retired
Vivian is a retired widow who lives alone in the suburbs. She no longer drives and avoids ride sharing, so she relies on her children or public transit to visit friends and walk around Boston Common.
GENDER
Female
STATUS
Single
LOCATION
Foxborough, MA
PAYMENT METHOD
Cash
TECH LITERACY
NEEDS
  • Rides commuter rail into the city
  • Wants a simple fare purchase with few buttons and choices
CONCERNS
  • Has a hard time navigating new technology
  • Prefers single-use passes
  • Has poor eyesight
Jaydon Williams
Jaydon Williams
22, Student & Barista
James is a 4th-year pre-med student from France. He lives off campus without a car, is always on the go, and prefers the most efficient, reliable route. In his free time, he wants to try all the new restaurants in Boston and runs a food Instagram.
GENDER
Male
STATUS
Single
LOCATION
Quincy, MA
PAYMENT METHOD
Tap-to-Pay
TECH LITERACY
NEEDS
  • Rides the bus to campus and his part-time job
  • Frequently goes to NYC via Amtrak
CONCERNS
  • Wants the cheapest rates and the most efficient travel package
  • Depends on transit for a packed schedule
Minh Le
Minh Le
34, Hair Stylist
Thuy moved to Boston about 2 years ago and speaks limited English. She has two young children and works full time at a salon 3 miles from home. She doesn’t own a car.
GENDER
Female
STATUS
Married
LOCATION
Foxborough, MA
PAYMENT METHOD
Cash
TECH LITERACY
NEEDS
  • Takes the bus/subway daily to work and to pick up her kids
  • Takes the train/ commuter rail with her family on weekends
CONCERNS
  • Speaks some English but is less comfortable reading and writing it
  • Loads her card at the start of each month so she doesn’t have to think about it

Tap to reveal

Prototype

Building on the structure riders are familiar with

Every task has its own flow, from buying a ticket to finding recommendations, and every flow shares the same principles:

  1. Accessibility options on the first screen

  1. Status updates at each step

  1. Help and cancel always available

Check for Updates

Check for Updates

Check for Updates

Start

Select option

View

View Maps of MBTA

View Maps of MBTA

View Maps of MBTA

Start

Select option

Select map

View

Reload Card

Reload Card

Reload Card

Start

View balance

Add value

Select how to pay

Pay

Take receipt

Buy Ticket for Subway/Bus

Buy Ticket for Subway/Bus

Buy Ticket for Subway/Bus

Start

Select fare option

Select # of rides

Preview total

Select how to pay

Pay

Take receipt

Buy Ticket for Commuter Rail

Buy Ticket for Commuter Rail

Buy Ticket for Commuter Rail

Start

Select fare option

Input start/end

Check train times

Review trip info

Select how to pay

Pay

Take receipt

Explore

Explore

Explore

Start

Select option

View options

Navigate

Navigate

Navigate

Start

Select option

Input start/end

View

Physical Design

Looking beyond the screen

Before people even get to the screen, they come across this giant metal box with all sorts of slots, readers, and labels… where do we even start?

For first-time visitors, riders with limited English, or anyone in a wheelchair, that first moment decides whether the kiosk feels welcoming or intimidating. I redesigned the machine so riders know where to look, reach, and ask for help.

  1. Know at a glance: Fare costs displayed for each mode and labeled groups for payment, card scans, and receipts

  1. Within reach: Screen height adjusted for wheelchair users

  1. Help before the screen: A mechanical push-to-call button located at the lower right corner

  1. Private payment: Pin pad moved closer to the touchscreen

Before
Original Design
After
Proposed Design

The model is not drawn to scale. It is a reference based on average wheelchair height.

Feedback

Consistency is a part of usability

During the 5 weeks span, I presented to my professor and classmates for feedback. The feedback helped me understand the importance of information architecture and the visual hierarchy when designing for the general population. It made the design clearer and more functional. It also showed me that consistency across screens is part of usability, because every mismatch is something riders have to relearn.

Reflection

Ship what’s realistic, then design what comes next

This was my first time designing an end-to-end flow for a real need, and it pushed me to think like a product designer. I scoped the redesign to changes the MBTA could realistically ship: no new machine, no new layout, and a fare flow that stays fast and familiar. Every addition had to earn its place by serving a rider's need.

Additionally, I realized that a product doesn’t end at the screen. For example, kiosk shows riders navigation and recommendations, but a rider who wants to bring that with them on-the-go has nowhere to go next. A useful product should account for the journey beyond the interaction.

Additionally, I realized that a product doesn’t end at the screen. For example, kiosk shows riders navigation and recommendations, but a rider who wants to bring that with them on-the-go has nowhere to go next. A useful product should account for the journey beyond the interaction.

Additionally, I realized that a product doesn’t end at the screen. For example, kiosk shows riders navigation and recommendations, but a rider who wants to bring that with them on-the-go has nowhere to go next. A useful product should account for the journey beyond the interaction.

Creating a minimum viable product

With a real audience and a real need, the list of features I could add was endless. I learned to ask what the product must do first, and to treat constraints as a guide for my design. Working within an existing system kept every decision focused on a usable, reliable experience.

Integrating accessibility into the framework

Testing the kiosk from different perspectives exposed assumption bias or friction I would have missed. Accessibility is easy to generalize or overlook, and goes beyond physical. Many needs aren’t visible, and designing for them makes the experience smoother for everyone.

Create a free website with Framer, the website builder loved by startups, designers and agencies.