My Charlie App

Your transit & Charlie Card Guide to travel in boston

Mobile app design · Public Transit · Proposal design

My Charlie App

Transforming Boston's public transit challenges into a seamless digital experience.

Drawing from our collective experience as students in Boston, our team identified significant user friction within the MBTA’s physical ticketing system.

To tackle this we proposed the design of a mobile-first platform to digitize the MBTA Charlie Card. By synthesizing user pain points into a seamless digital interface, the team optimized the user journey, reducing physical touchpoint friction and enhancing overall transit accessibility.

Project Proposal

PRODUCT

Mobile Application Proposal Sent to MBTA

TIMELINE

Aug – Dec 2023 → Concept Design & Dev Hand-off

MY ROLE

As the experience designer, I operated at the intersection of product strategy, user research, interaction design, and technical feasibility.

Ran discovery and market research to translate complex clinical requirements into accessible, low-literacy user flows.

Executed problem solving, MVP scoping, wireframing, and interactive prototyping.

Developed and maintained design systems to ensure UI scalability across surfaces.

Led product presentations and key stakeholder reviews to align leadership on the core solution.

TEAM

1 UX Designer
1 UX Researcher
2 Product Managers

TOOLKIT

Figma, Adobe XD, Balsamiq Wireframes, UserBerry

USER PAIN POINT

Why do we need real-time transparency in transit?

Behind every declined tap is a real commuter with somewhere to be, a student racing to an exam, a parent running late for a shift. When a CharlieCard’s balance stays invisible until the moment it fails, a routine trip turns into a public rejection at the doors. Real-time transparency turns that guesswork into something commuters can act on before the bus ever arrives.

Suddenly, your CharlieCard flashes red at the door showing insufficient balance.

Imagine you’re sprinting for the 8:55 AM bus, already late for a final exam.

You feel helpless and embarrassed, forced off the bus as it pulls away without you.

Key Insight

This systemic failure point demonstrates how information opacity causes immediate service rejection and social anxiety for commuters

This made us think?

How might we make Boston's public transit experience
Seamless, Digital & Easy?

KEY PRODUCT FEATURES

Key Features

of My Charlie App

By prioritizing a lean feature set, our team reduced information overload and cognitive friction. This intentional scope allowed us to test and validate which functionalities were most critical to the user journey.

Recharge

your Charlie Card!

Tap your Card

on the GO!

Explore Routes
& Timings!

KEY FEATURE 1
Tap & Reload your Charlie Card
01
Scan your Charlie Card
02
Reload your
card on the go!
03
Add
Multiple Cards
04
Set up
auto-reload.
Users can easily view live train schedules on the app, eliminating the need to switch to other map apps.
Search/Type
your location
Select the
route from the
options
KEY FEATURE 2
View live train schedule
Look at a
detailed route
User also have access to
train closures, delays, and other important news, which currently the users rely on Google Maps for.
Important
news &
notifications
KEY FEATURE 3
Always be notified
Get quick
Updates
Transaction /
Tap History
KEY FEATURE 1
Tap & Reload your Charlie Card
01
Scan your Charlie Card
02
Reload your
card on the go!
03
Add
Multiple Cards
04
Set up
auto-reload.
Users can easily view live train schedules on the app, eliminating the need to switch to other map apps.
Search/Type
your location
Select the
route from the
options
KEY FEATURE 2
View live train schedule
Look at a
detailed route
User also have access to
train closures, delays, and other important news, which currently the users rely on Google Maps for.
Important
news &
notifications
KEY FEATURE 3
Always be notified
Get quick
Updates
Transaction /
Tap History
KEY FEATURE 1
Tap & Reload your Charlie Card
01
Scan your Charlie Card
02
Reload your
card on the go!
03
Add
Multiple Cards
04
Set up
auto-reload.
Users can easily view live train schedules on the app, eliminating the need to switch to other map apps.
Search/Type
your location
Select the
route from the
options
KEY FEATURE 2
View live train schedule
Look at a
detailed route
User also have access to
train closures, delays, and other important news, which currently the users rely on Google Maps for.
Important
news &
notifications
KEY FEATURE 3
Always be notified
Get quick
Updates
Transaction /
Tap History
KEY FEATURE 1
Tap & Reload your Charlie Card
01
Scan your Charlie Card
02
Reload your
card on the go!
03
Add
Multiple Cards
04
Set up
auto-reload.
Users can easily view live train schedules on the app, eliminating the need to switch to other map apps.
Search/Type
your location
Select the
route from the
options
KEY FEATURE 2
View live train schedule
Look at a
detailed route
User also have access to
train closures, delays, and other important news, which currently the users rely on Google Maps for.
Important
news &
notifications
KEY FEATURE 3
Always be notified
Get quick
Updates
Transaction /
Tap History

LEAN & AGLE DESIGN PROCESS

Design Process

Brief And Estimation

Design Team Process

Information Architecture & Wireframes

Feedback

Usability

Testing & Validation

Interaction & UI Design

Calendar Update

Satisfaction Survey

Final Delibarables

Discover

Validation
from Target Users

Kick- Off

KICK OFF & BRIEF CREATION

Top Research Questions

We drafted a comprehensive list of research questions and used affinity mapping to shortlist the most relevant ones for our design. Our systematic approach ensured thorough coverage of user needs.

Current Balance Management

How do users check

and reload their Charlie Funds

Card Management

What features & functionalities affect

the accessibility of Card?

Mobile App Integration

How can mobile app& payment

integration enhance experience?

Understanding user behaviors & pain points in managing card balances to optimize the reloading.

RESEARCH METHODOLOGY

User Interviews, Card Sorting, Journey Mapping

KEY METRICS

Success Rate : 94%

User Satisfaction: 4.2/5

Key Insights

85% of users prefer automatic reload
Mobile checking is primary method.
Balance anxiety is common pain point

KICK OFF & BRIEF CREATION

CONTEXTUAL RESEARCH

Decoding

MBTA

Our team conducted a market audit of the MBTA using
SWOT and positioning mapping to decode existing inefficiencies and define strategic opportunities for a digital-first transit experience.

Boston's T operates both over and under ground, yet there aren't any Charlie Card Reloading kiosks at the overground stations.

The transportation infrastructure includes extensive routes and a broad grid, hence a significant populace relies on mass transit for their everyday jobs.

The kiosks are solely accessible at the subway stations that are quite distant from one another, hence numerous individuals don't bother to pay for the journey or fail to catch their ride.

The transportation infrastructure includes extensive routes and a broad grid, hence a significant populace relies on mass transit for their everyday jobs.

Physically tapping a Charlie card for access often leaves individuals stranded when their card balance is inadequate so they have to search for a kiosk to top up the card.

Main Target Group
Segmentation 1
Segmentation 2
Sub Target Group
Transist System in the United States
Global Transit Apps
MARTA, OMNY, VENTRA, CLIPPER
Oysters, Presto
Prioritize efficiency, real-time updates, digital fare payment, have contactless and app payments, direct competitors, and reference points for Boston Transit system.
Indirect competitors should be researched to identify additional features and references to add to the app.
Chicago , USA
Atlanta , USA
New York , USA
San Francisco , USA
London,UK
Toronto , Canada
Direct Local Competitors
Global Competitors
MBTA
Things to consider:
Allows users to manage their fare payment.
Include balance checking, reloading, and viewing travel history.
Users report technical glitches within the app.
The app interface could be more user-friendly
and intuitive.
App allows user to check balance & top-up.
Can view travel history, expense &
Journey tracking.
Does not offer real time updates/services.
Interface is outdates and not as user friendly
Allows users to manage their fare payment.
Include balance checking, reloading, and viewing travel history.
Users report technical glitches within the app.
The Charlie Card used for subways and buses does not have full digital integration or a dedicated app.
Fully contactless payment experience.
Integrated across New York's buses and subways for ease of use.
OMNY does not support all fare types
No dedicated app; users rely on general payment methods like credit/debit cards and mobile wallets.
Breeze Card system, which is a
rechargeable smart card for fare payment.
Simplifying transit use.
Not yet contactless, which is less convenient
compared to newer systems.
Limited digital integration, no official MARTA app for managing the Breeze Card.
Widely accepted across various transit modes.
Offers convenience through autoload and balance protection features.
The system is yet to be fully contactless.
Providing real-time updates on transit schedules, delays, and service disruptions, helping users plan their journeys more effectively.
Users can track their journey history and expenses for commuting and expense reimbursement.
Contactless payment and a modern interface are necessary to keep up with current technological trends.

A Digital version of the Charlie Card to complement the physical card, catering to the growing preference for digital solutions and reducing inconvenience of lost/ damaged cards.
Should seamlessly integrate fare payment for various Boston transit options.
Users to check their balance and recharge their Charlie Cards directly from the app, ensuring convenience and avoiding the need for physical kiosks.
The app interface could be more user-friendly
and intuitive.
MARKET ANALYSIS
Digital Advancements (1 = Low, 10 = High)
AS IS
Digital Advancements (1 = Low, 10 = High)
This map rates systems based on ease of use and features. Higher functionality scores mean more user-friendliness and features.
AS IS
Digital Advancements (1 = Low, 10 = High)
This map rates systems by design and interface. Higher visual appeal means a more attractive, intuitive interface.
Highly Advanced
VISUAL
FUNCTIONALITY
Highly Advanced
Highly Advanced
Low Digital Advancemenet
Highly Advanced
Low Digital Advancemenet
Highly Advanced
Low Digital Advancemenet
Highly Advanced
Low Digital Advancemenet
Highly Advanced
Low Digital Advancemenet
Highly Advanced
Low Digital Advancemenet
Highly Advanced
Low Digital Advancemenet
Highly Advanced
Low Digital Advancemenet
User Accessibility 1 = Low, 10 = High
User Accessibility 1 = Low, 10 = High
TO BE
My CharlieApp
THE ONLY TRANSIT APP, WHICH WILL HELP YOU
TRAVEL EASILY IN BOSTON.
These maps compare practical use and aesthetic design of each system through hypothetical scores.
POSITIONING MAP
O
T
S
TRENGTH
PPORTUNITY
W
EAKNESS
HREAT
The SWOT analysis for "My Charlie" succinctly identifies its strengths, weaknesses, opportunities, and threats, guiding its development to effectively serve Boston's transit users
SWOT ANALYSIS
Mission Statment
My Charlie: The premier transit app for Boston's T commuters, uniquely designed for convenient Charlie Card recharging and providing real-time travel updates
My Charlie is
Stands out for its integrated, user-friendly approach to Boston's transit, offering real-time updates and modern digital payment options.
Limitations include fewer advanced features compared to competitors, reliance on existing transit infrastructure, and the challenge of converting traditional users to digital.
Can expand its user base and functionality through new digital features, partnerships, and focusing on environmentally conscious transit promotion.
Faces competition from established apps, changing transit usage trends, data security challenges, and the need to keep pace with fast-evolving technology.
Main Target Group
Segmentation 1
Segmentation 2
Sub Target Group
Transist System in the United States
Global Transit Apps
MARTA, OMNY, VENTRA, CLIPPER
Oysters, Presto
Prioritize efficiency, real-time updates, digital fare payment, have contactless and app payments, direct competitors, and reference points for Boston Transit system.
Indirect competitors should be researched to identify additional features and references to add to the app.
Chicago , USA
Atlanta , USA
New York , USA
San Francisco , USA
London,UK
Toronto , Canada
Direct Local Competitors
Global Competitors
MBTA
Things to consider:
Allows users to manage their fare payment.
Include balance checking, reloading, and viewing travel history.
Users report technical glitches within the app.
The app interface could be more user-friendly
and intuitive.
App allows user to check balance & top-up.
Can view travel history, expense &
Journey tracking.
Does not offer real time updates/services.
Interface is outdates and not as user friendly
Allows users to manage their fare payment.
Include balance checking, reloading, and viewing travel history.
Users report technical glitches within the app.
The Charlie Card used for subways and buses does not have full digital integration or a dedicated app.
Fully contactless payment experience.
Integrated across New York's buses and subways for ease of use.
OMNY does not support all fare types
No dedicated app; users rely on general payment methods like credit/debit cards and mobile wallets.
Breeze Card system, which is a
rechargeable smart card for fare payment.
Simplifying transit use.
Not yet contactless, which is less convenient
compared to newer systems.
Limited digital integration, no official MARTA app for managing the Breeze Card.
Widely accepted across various transit modes.
Offers convenience through autoload and balance protection features.
The system is yet to be fully contactless.
Providing real-time updates on transit schedules, delays, and service disruptions, helping users plan their journeys more effectively.
Users can track their journey history and expenses for commuting and expense reimbursement.
Contactless payment and a modern interface are necessary to keep up with current technological trends.

A Digital version of the Charlie Card to complement the physical card, catering to the growing preference for digital solutions and reducing inconvenience of lost/ damaged cards.
Should seamlessly integrate fare payment for various Boston transit options.
Users to check their balance and recharge their Charlie Cards directly from the app, ensuring convenience and avoiding the need for physical kiosks.
The app interface could be more user-friendly
and intuitive.
MARKET ANALYSIS
Digital Advancements (1 = Low, 10 = High)
AS IS
Digital Advancements (1 = Low, 10 = High)
This map rates systems based on ease of use and features. Higher functionality scores mean more user-friendliness and features.
AS IS
Digital Advancements (1 = Low, 10 = High)
This map rates systems by design and interface. Higher visual appeal means a more attractive, intuitive interface.
Highly Advanced
VISUAL
FUNCTIONALITY
Highly Advanced
Highly Advanced
Low Digital Advancemenet
Highly Advanced
Low Digital Advancemenet
Highly Advanced
Low Digital Advancemenet
Highly Advanced
Low Digital Advancemenet
Highly Advanced
Low Digital Advancemenet
Highly Advanced
Low Digital Advancemenet
Highly Advanced
Low Digital Advancemenet
Highly Advanced
Low Digital Advancemenet
User Accessibility 1 = Low, 10 = High
User Accessibility 1 = Low, 10 = High
TO BE
My CharlieApp
THE ONLY TRANSIT APP, WHICH WILL HELP YOU
TRAVEL EASILY IN BOSTON.
These maps compare practical use and aesthetic design of each system through hypothetical scores.
POSITIONING MAP
O
T
S
TRENGTH
PPORTUNITY
W
EAKNESS
HREAT
The SWOT analysis for "My Charlie" succinctly identifies its strengths, weaknesses, opportunities, and threats, guiding its development to effectively serve Boston's transit users
SWOT ANALYSIS
Mission Statment
My Charlie: The premier transit app for Boston's T commuters, uniquely designed for convenient Charlie Card recharging and providing real-time travel updates
My Charlie is
Stands out for its integrated, user-friendly approach to Boston's transit, offering real-time updates and modern digital payment options.
Limitations include fewer advanced features compared to competitors, reliance on existing transit infrastructure, and the challenge of converting traditional users to digital.
Can expand its user base and functionality through new digital features, partnerships, and focusing on environmentally conscious transit promotion.
Faces competition from established apps, changing transit usage trends, data security challenges, and the need to keep pace with fast-evolving technology.
Main Target Group
Segmentation 1
Segmentation 2
Sub Target Group
Transist System in the United States
Global Transit Apps
MARTA, OMNY, VENTRA, CLIPPER
Oysters, Presto
Prioritize efficiency, real-time updates, digital fare payment, have contactless and app payments, direct competitors, and reference points for Boston Transit system.
Indirect competitors should be researched to identify additional features and references to add to the app.
Chicago , USA
Atlanta , USA
New York , USA
San Francisco , USA
London,UK
Toronto , Canada
Direct Local Competitors
Global Competitors
MBTA
Things to consider:
Allows users to manage their fare payment.
Include balance checking, reloading, and viewing travel history.
Users report technical glitches within the app.
The app interface could be more user-friendly
and intuitive.
App allows user to check balance & top-up.
Can view travel history, expense &
Journey tracking.
Does not offer real time updates/services.
Interface is outdates and not as user friendly
Allows users to manage their fare payment.
Include balance checking, reloading, and viewing travel history.
Users report technical glitches within the app.
The Charlie Card used for subways and buses does not have full digital integration or a dedicated app.
Fully contactless payment experience.
Integrated across New York's buses and subways for ease of use.
OMNY does not support all fare types
No dedicated app; users rely on general payment methods like credit/debit cards and mobile wallets.
Breeze Card system, which is a
rechargeable smart card for fare payment.
Simplifying transit use.
Not yet contactless, which is less convenient
compared to newer systems.
Limited digital integration, no official MARTA app for managing the Breeze Card.
Widely accepted across various transit modes.
Offers convenience through autoload and balance protection features.
The system is yet to be fully contactless.
Providing real-time updates on transit schedules, delays, and service disruptions, helping users plan their journeys more effectively.
Users can track their journey history and expenses for commuting and expense reimbursement.
Contactless payment and a modern interface are necessary to keep up with current technological trends.

A Digital version of the Charlie Card to complement the physical card, catering to the growing preference for digital solutions and reducing inconvenience of lost/ damaged cards.
Should seamlessly integrate fare payment for various Boston transit options.
Users to check their balance and recharge their Charlie Cards directly from the app, ensuring convenience and avoiding the need for physical kiosks.
The app interface could be more user-friendly
and intuitive.
MARKET ANALYSIS
Digital Advancements (1 = Low, 10 = High)
AS IS
Digital Advancements (1 = Low, 10 = High)
This map rates systems based on ease of use and features. Higher functionality scores mean more user-friendliness and features.
AS IS
Digital Advancements (1 = Low, 10 = High)
This map rates systems by design and interface. Higher visual appeal means a more attractive, intuitive interface.
Highly Advanced
VISUAL
FUNCTIONALITY
Highly Advanced
Highly Advanced
Low Digital Advancemenet
Highly Advanced
Low Digital Advancemenet
Highly Advanced
Low Digital Advancemenet
Highly Advanced
Low Digital Advancemenet
Highly Advanced
Low Digital Advancemenet
Highly Advanced
Low Digital Advancemenet
Highly Advanced
Low Digital Advancemenet
Highly Advanced
Low Digital Advancemenet
User Accessibility 1 = Low, 10 = High
User Accessibility 1 = Low, 10 = High
TO BE
My CharlieApp
THE ONLY TRANSIT APP, WHICH WILL HELP YOU
TRAVEL EASILY IN BOSTON.
These maps compare practical use and aesthetic design of each system through hypothetical scores.
POSITIONING MAP
O
T
S
TRENGTH
PPORTUNITY
W
EAKNESS
HREAT
The SWOT analysis for "My Charlie" succinctly identifies its strengths, weaknesses, opportunities, and threats, guiding its development to effectively serve Boston's transit users
SWOT ANALYSIS
Mission Statment
My Charlie: The premier transit app for Boston's T commuters, uniquely designed for convenient Charlie Card recharging and providing real-time travel updates
My Charlie is
Stands out for its integrated, user-friendly approach to Boston's transit, offering real-time updates and modern digital payment options.
Limitations include fewer advanced features compared to competitors, reliance on existing transit infrastructure, and the challenge of converting traditional users to digital.
Can expand its user base and functionality through new digital features, partnerships, and focusing on environmentally conscious transit promotion.
Faces competition from established apps, changing transit usage trends, data security challenges, and the need to keep pace with fast-evolving technology.
Main Target Group
Segmentation 1
Segmentation 2
Sub Target Group
Transist System in the United States
Global Transit Apps
MARTA, OMNY, VENTRA, CLIPPER
Oysters, Presto
Prioritize efficiency, real-time updates, digital fare payment, have contactless and app payments, direct competitors, and reference points for Boston Transit system.
Indirect competitors should be researched to identify additional features and references to add to the app.
Chicago , USA
Atlanta , USA
New York , USA
San Francisco , USA
London,UK
Toronto , Canada
Direct Local Competitors
Global Competitors
MBTA
Things to consider:
Allows users to manage their fare payment.
Include balance checking, reloading, and viewing travel history.
Users report technical glitches within the app.
The app interface could be more user-friendly
and intuitive.
App allows user to check balance & top-up.
Can view travel history, expense &
Journey tracking.
Does not offer real time updates/services.
Interface is outdates and not as user friendly
Allows users to manage their fare payment.
Include balance checking, reloading, and viewing travel history.
Users report technical glitches within the app.
The Charlie Card used for subways and buses does not have full digital integration or a dedicated app.
Fully contactless payment experience.
Integrated across New York's buses and subways for ease of use.
OMNY does not support all fare types
No dedicated app; users rely on general payment methods like credit/debit cards and mobile wallets.
Breeze Card system, which is a
rechargeable smart card for fare payment.
Simplifying transit use.
Not yet contactless, which is less convenient
compared to newer systems.
Limited digital integration, no official MARTA app for managing the Breeze Card.
Widely accepted across various transit modes.
Offers convenience through autoload and balance protection features.
The system is yet to be fully contactless.
Providing real-time updates on transit schedules, delays, and service disruptions, helping users plan their journeys more effectively.
Users can track their journey history and expenses for commuting and expense reimbursement.
Contactless payment and a modern interface are necessary to keep up with current technological trends.

A Digital version of the Charlie Card to complement the physical card, catering to the growing preference for digital solutions and reducing inconvenience of lost/ damaged cards.
Should seamlessly integrate fare payment for various Boston transit options.
Users to check their balance and recharge their Charlie Cards directly from the app, ensuring convenience and avoiding the need for physical kiosks.
The app interface could be more user-friendly
and intuitive.
MARKET ANALYSIS
Digital Advancements (1 = Low, 10 = High)
AS IS
Digital Advancements (1 = Low, 10 = High)
This map rates systems based on ease of use and features. Higher functionality scores mean more user-friendliness and features.
AS IS
Digital Advancements (1 = Low, 10 = High)
This map rates systems by design and interface. Higher visual appeal means a more attractive, intuitive interface.
Highly Advanced
VISUAL
FUNCTIONALITY
Highly Advanced
Highly Advanced
Low Digital Advancemenet
Highly Advanced
Low Digital Advancemenet
Highly Advanced
Low Digital Advancemenet
Highly Advanced
Low Digital Advancemenet
Highly Advanced
Low Digital Advancemenet
Highly Advanced
Low Digital Advancemenet
Highly Advanced
Low Digital Advancemenet
Highly Advanced
Low Digital Advancemenet
User Accessibility 1 = Low, 10 = High
User Accessibility 1 = Low, 10 = High
TO BE
My CharlieApp
THE ONLY TRANSIT APP, WHICH WILL HELP YOU
TRAVEL EASILY IN BOSTON.
These maps compare practical use and aesthetic design of each system through hypothetical scores.
POSITIONING MAP
O
T
S
TRENGTH
PPORTUNITY
W
EAKNESS
HREAT
The SWOT analysis for "My Charlie" succinctly identifies its strengths, weaknesses, opportunities, and threats, guiding its development to effectively serve Boston's transit users
SWOT ANALYSIS
Mission Statment
My Charlie: The premier transit app for Boston's T commuters, uniquely designed for convenient Charlie Card recharging and providing real-time travel updates
My Charlie is
Stands out for its integrated, user-friendly approach to Boston's transit, offering real-time updates and modern digital payment options.
Limitations include fewer advanced features compared to competitors, reliance on existing transit infrastructure, and the challenge of converting traditional users to digital.
Can expand its user base and functionality through new digital features, partnerships, and focusing on environmentally conscious transit promotion.
Faces competition from established apps, changing transit usage trends, data security challenges, and the need to keep pace with fast-evolving technology.

CONTEXTUAL RESEARCH & CURRENT PATTERNS

MBTA's Delayed Promise 👎🏻

Since 2014, The MBTA has attempted multiple times to modernize the CharlieCard system by digitizing it and making it more accessible, but these efforts have largely stalled or failed due to technical, financial, and logistical challenges.

Resources:
mbta.com

wcvb.mbtanews.com

The Promise of a Digital CharlieCard

The AFC 2.0 Plan

Repeated Delays and Cost Overruns

MBTA's Fare Transformation Program:

Where Things Stand Now?

USER RESEARCH

🎯 Targeted User Interviews

We initiated our discovery phase through contextual inquiry and in-depth interviews with daily MBTA commuters.

By synthesizing these qualitative insights, our team mapped recurring pain points into strategic solution areas, which directly informed the prioritization of our MVP features.

Recharge Inconvenience

Users find it inconvenient to physically visit stations to recharge their Charlie Cards.

Risk of Insufficient Funds

Users risk running out of funds on their cards due to the inability to recharge digitally, leading to potential missed trips.

Painpoint 1

Painpont 2

Painpont 4

Painpont 3

Kiosks are

far away

Lack of digital recharging limits users to specific locations and times for recharging their cards.

Managing Multiple Cards

Users risk running out of funds on their cards due to the inability to recharge digitally, leading to potential missed trips.

“I wish there was a more

convenient way to recharge

my Charlie Card like being

able to do it from my phone”

“It’s not always easy to find a reloading station when I am in a hurry and I don’t want to miss my train because of it.”

“I am worried about losing my Charlie card, or not having sufficient fns to travel when in need.”

“As a tourist I find it difficult to navigate Boston, and would wish for an app to help me do that”

Employee . Job Seeker.

Working Student. Social.

Student. International.

Tourist. Traveller.

Working Professional

University Student

Working Professional

Tourist

USER PERSONA

Converting findings to Personas

Ken McCormick: Working Professional
A working professional who utilizes the MBTA transit system for commuting to his job daily, he holds the belief that it's the quickest path to his workplace.

Kai Silverstone: Student
A Northeastern University student who utilizes Public Transit for her daily commute to campus for lectures.

USER PERSONA

Fragmented
User Journey

By mapping persona journeys, our team identified high-friction touchpoints and narrowed our project scope to prioritize the most effective design interventions.

Complicated balance checks & reloading.

No management, schedules, and alerts.

No digital payment options

Recharge kiosks not available nearby

We created journey maps to further understand the user journeys in detail.

Find a train

consideration

Problem occurs

Downloads

my charlie

Work time

SCENARIO

Ken is preparing to go to work. He has a crucial sales meeting this morning and must arrive on time. While eating his breakfast, he checks the transport app/site to see when the bus is leaving from his closest station and if there are any planned outages today.

EXPECTATIONS:

Easy interaction with the transport app/site

Clear information: bus departure, bus arrival, bus number

Truthful information

Getting ready for job. Must arrive punctually, locates a train using Google Maps. Organizes everything and departs home.

The data from Google Maps was remarkably precise.
Figuring out the correct train schedule was a breeze.
He's delighted as he is now assured of reaching his office punctually.

He realizes his Charlie card's credit is insufficient. Pressed for time, he aims to top it off without needing to commute to a different T station to use the kiosk.
The subsequent train is due in 8 minutes, yet he won't manage a kiosk visit and return in time.
Anxiety over missing his critical appointment builds; hailing a cab is a costly option.

Search online for ways to refill Charlie's card.
Learn about the Charlie Card. Download the respective app.
After logging in, he enters his payment info and other details.
He promptly manages to top up his Charlie Card online, all before the arrival of the next train in approximately 8 minutes.

The apps main job succeeded, his card got reloaded.
Allowing him to use the ready transportation without significant delay.
He considers this app immensely valuable.

Will I get on time for my buss?

Trust

Happy

Frustrated

Wondering

Happy

I hope this app helps
me recharge my card asap

How can I get to work on time now?

I wished I could recharge
this card online, Arghhh.

Why don’t I have
balance in my card???

What if the bus gets delayed like yesterday?

Was the information accurate?

Are there any planned outages today?

What is the quickest way to find when the train leaves?

What time should I leave my home?

Well, this went well, Finally I am at work on time

Okay wow, this was quick, now the next T is arriving

aCTIONS

What does the customer do?

Customer Thought

What is the customer Thinking?

Phase of Journey

Customer Feeling

What is the customer feeling?

Scenario & Expectations

Work time

Research and planning

Walking

Problem occurs

Downloads

App

SCENARIO

Kai is planning to attend university today; she plans well in advance and has a lecture to attend today. After she gets out of the house and waits for the T to arrive, after entering the T, she realizes that she doesn’t have enough balance on her card and can’t take the ride since she isn’t even carrying emergency cash. She has to go to a nearby kiosk in the cold to reassure her card, and she will get late for her lecture.

EXPECTATIONS:

Recharge information

Digital method of recharging the card

Wakes up in the morning

Preparing for her lecture

It’s super cold outside

Finds the schedule that is suitable for her

Saves the route and leaves her house for the T station

Leaves home

Walking to the station

Waits for the T

Is in a hurry

The T finally arrives, and Kai taps her Charlie Card, only to realize that she needs more balance.

She is asked to step out of the T and hence loses a lot of time.

She worries that she will get late and has to walk to the kiosk to recharge her card.

She searches online how to recharge her Charlie Card fast or any other alternatives

She finally comes across the MyCharlie app and downloads it.

She finishes logging in and connecting the Charlie Card and payment methods.

She recharges the card.

The next T is almost arriving, and Kai has recharged her Charlie Card

She taps her card, and Voila, she has balance and can travel now.

Why is the T so late today?

Trust

Happy

Frustrated

Wondering

Happy

Can I still arrive on time?

I hope this applicaiton is easy to use and helps me !

Why is it delayed?

What if the T gets delayed like yesterday?

Why is Google Maps so confusing and innaccurate?

I hope I reach to the lecture on time!

Why is it so cold today!

What time should I leave my home?

Well, this went well

I hope this digital recharge works.

aCTIONS

What does the customer do?

Customer Thought

What is the customer Thinking?

Phase of Journey

Customer Feeling

What is the customer feeling?

SCenario & Expectations

DESIGNING THE SKELETON

Wireframing & IA

We leveraged low-fidelity prototyping to facilitate rapid design exploration and internal validation.

These iterations allowed our team to refine the interaction model before transitioning into high-fidelity execution and final UI refinement.

We mapped the app’s functionality into a structured diagram to enhance navigation, providing a foundation for our design concepts & wireframes.

User Flow

Card wallet with
one card only
Idea 01
Card wallet similar to
Apple Pay wallet
Idea 02
Card wallet swipe
for multiple cards
Idea 03
Targeted Problem:
Recharge and
tap card page
Targeted Problem:
Connect your current card

Final Design:
My Charlie

An app for your
Boston
Transit Needs

The introductory screens were created to supply a summary of the application and comprehend the minimum viable product functionalities

My Charlie

Explore Boston

Reload your Card

Onboarding Screens

Orange line is running late! Read More.

Chalie
Card

*
Add Physical Card Anytime: Seamlessly integrate your physical Charlie Card with the app at any stage, ensuring effortless management and accessibility.

Customizable Autoload & Security Settings: Tailor your experience with flexible settings for activity autoload and enhanced security measures for lost or stolen cards, keeping your commute worry-free.

FEATURE 2

View Train
Schedule

FEATURE 3

Mange your Charlie Card

MBTA Fare Card

Charlie Card Screen

Connect Card

Find T Station

Find Kiosk

These screens guide you to find a Charlie card.

Don't have Card:
Steps to help you find a
Physical Charlie Card.

*
Route Discovery & Timing Flexibility:
Search for your destination to access various route timings. Utilize available filters to refine your search based on preferences, ensuring a tailored commuting experience.

Timing & MBTA Schedule:
Overcome the uncertainty of public transport schedules. Our feature provides real-time updates on bus and train arrivals, keeping you informed and on schedule.

*

Comprehensive Route Itinerary:
Receive a detailed route itinerary to fully understand your journey, including specific stops and transfers. Designed to assist both tourists and regular commuters in navigating their way effortlessly to their destinations.

MBTA Map Screen

Transit Route Map > Schedule a Train

Chalie
Card

QUICK TAP:

A quick button to allow you
to tap your card on the go!

Bus

Tram

Ferry

Favorites

Search

All

Locate a Train Station:
Locate the nearest T station where you can get a Charlie Card

Last step to get the card:
Seamlessly integrate your physical Charlie Card with the app

FEATURE 1

Schedule

your journey

TRANSIT ROUTES

Orange line is running late! Read More.

SUNSET

Reflections & Future Opportunities

While this was a passion project, we followed a complete UX process to create a well-structured design system that contributed to its success. This journey taught us invaluable lessons, and we’re grateful for the opportunity to submit it as a potential proposal to the MBTA for further feedback.

What We Learned?

📱 Mobile First-Design & Contextual Research

Understanding the context in which users interact with the app highlighted the importance of a mobile-first approach, ensuring seamless usability on the go.

What We Could Have Done?

🚇 Worked alongside MBTA

To create a more impactful solution, we analyzed MBTA’s current challenges. With more time, collaborating directly with their team would have helped refine the design for real-world feasibility.

Next Steps >

📱 Designing for Android & Dark Mode

As a passion project, we focused on iOS design. However, expanding to Android is a crucial next step to ensure accessibility for a wider audience—something we’d love to explore further.