T Talk App Design

Boston Train App

This project was inspired by my own frustrations with the T, Boston’s public train system, where delays and disruptions are often unclear and difficult for riders to track in real time. I set out to design a mobile app that reimagines how riders interact with transit updates by creating a community-driven, social-style platform—essentially “Twitter for the T.”

The app allows riders to quickly post about real-time events, share updates, and view what others nearby are experiencing. I began with low-fidelity wireframes to map out the basic flows and navigation, then progressed into high-fidelity mockups that refined the interface into a clean, accessible, and intuitive experience. The design emphasizes clarity, speed, and usability, making it simple for commuters to both contribute and stay informed during their daily rides.

By combining personal pain points with user-centered design, the MBTA App demonstrates how thoughtful UX/UI can turn everyday frustrations into opportunities for connection and problem-solving.

Back to T Talk Overview

Ideation & Info Architecture

After clearly identifying the gaps in the existing MBTA app, I shifted into the ideation phase. This stage was about transforming raw frustrations and pain points into potential design opportunities. To do this, I used techniques like brainstorming, feature prioritization, and card sorting to imagine how a new kind of commuter app could look and feel.Feature BrainstormingI focused on features that would directly address the most urgent commuter needs: clarity, safety, and reliability. Each idea was tied to a specific pain point uncovered during research:

Community Posts:
- Instead of one-way announcements from the MBTA, riders could share their own real-time updates, such as delays, crowding, or unusual activity. This feature was inspired by the way commuters already use social media (Twitter, Reddit) to fill the gaps in official communication.

Urgent Alerts:
- Not every post carries the same weight. To reduce information overload, I designed an “urgent” tagging system where time-sensitive or critical updates are highlighted at the top of feeds. For example, if smoke is reported at a station, or if a major delay is unfolding, this alert is immediately visible.

Trending & Recent:
- Commuters need a way to separate signal from noise. The “Recent” tab captures all the latest updates in chronological order, while “Trending” surfaces posts that have gained traction from the community.. This dual approach ensures that both freshness and relevance are built into the experience.

Threat Levels:
- Safety was a recurring theme in research, particularly for women and night commuters. I introduced a visual “threat level” system using clear iconography and color coding (e.g., green = safe, yellow = caution, red = high risk). These quick indicators allow riders to instantly assess the atmosphere at a station before deciding to enter.

Verified Updates (Certified T):
- To combat misinformation, I added a verification layer. Certain posts, whether from trusted community members, repeated confirmations, or even official MBTA moderators, are flagged as “certified.” This feature builds trust and reliability into the app, ensuring that riders can differentiate between speculation and fact.

From Features to Structure

Once the feature set was defined, I created an information architecture map to establish the app’s navigation system. The guiding principle was simplicity: commuters shouldn’t have to think twice about where to find updates.

Home Page: A map view with search functionality to quickly locate stations or lines.

Line Selection: Users pick a line (e.g., Orange Line) to drill into specific stations.Station Feed: Each station (e.g., Oak Grove) has its own hub showing Recent, Urgent, Trending, and Certified updates.

Posting Flow: A streamlined form that allows users to quickly create a new post, assign a threat level, and submit without friction.

This structure ensures that at any point, a rider is no more than 2–3 taps away from the information they need.

Prioritization: I also applied a MoSCoW framework (Must-have, Should-have, Could-have, Won’t-have) to ensure features were scoped realistically for a minimum viable product

(MVP):Must-Have: Community posts, urgent alerts, trending/recent feeds

Should-Have: Threat level indicators

Could-Have: Certified/verified updates (expandable in future versions)

Won’t-Have (for MVP): Complex integrations like MBTA ticketing or full trip planning (kept out of scope to maintain focus)

This helped me stay grounded and avoid feature creep, while still envisioning a roadmap for how the app could evolve.

By the end of this stage, I had a clear blueprint for the app: a community-first platform with lightweight navigation, visually intuitive safety signals, and mechanisms for surfacing the most useful content. This foundation guided my transition into wireframing, where these ideas began to take tangible form.

UI Moodboard

Map-Based Social Interaction

map-centric UI integrated with social messaging elements—perfectly mirroring how your app combines geolocation with peer updates at station level.

Clean & Contrast-Rich Routes

strong visual contrasts between routes and background, a great reference for layering urgent alerts or threat levels while keeping navigation intuitive.

Simple, Minimalist Map Controls

emphasizes clean search and filter components on a map interface, deal for your line and station selection, ensuring commuters can quickly locate updates with minimal friction.

Modern Map with Info Cards

integrates map visuals with essential data cards (like nearby venues or statuses). It’s a fantastic model for how your station feed (Recent, Trending, etc.) could overlay on a map view without clutter.

Ideating App Screens

Low Fidelity

When designing the low-fidelity wireframes for my MBTA app, my main goal was to create an interface that felt calm, clear, and trustworthy for commuters who are often rushed, distracted, or anxious. Every decision I made was centered on accessibility, usability, and keeping the experience as frictionless as possible.I chose to rely on familiar UI conventions so that users wouldn’t have to learn a new system during their commute.

The search bar sits at the top for instant discoverability, while the most critical navigation (Home + Posts) is anchored at the bottom of the screen within easy thumb reach. I used large rectangular buttons for stations and lines because they’re tap-friendly and minimize error, especially when a user is moving quickly or carrying bags.For the station feeds, I added pill-style tabs (Recent, Urgency, Trending) directly below the search bar. This creates a natural scanning hierarchy and allows riders to quickly filter information without scrolling endlessly.

I also introduced a floating action button (FAB) in the bottom-right corner for creating a new post. This placement is intentional: it keeps posting accessible at any time, but it doesn’t compete visually with the feed itself.The overall vibe of the wireframes is minimal and utilitarian, which reflects the personality of the app.

By keeping the design neutral, I allow urgency indicators, warning icons, and threat levels to stand out when they appear. The feed itself is designed to feel like a community bulletin board rather than a noisy social media platform, posts are simple, timestamped, and easy to scan, with metadata like distance and time placed subtly below.I wanted this app to feel reliable, safe, and transparent. That’s why the layouts are consistent across screens, and why critical action, finding information, navigating stations, or posting updates, are always placed in ergonomic, predictable zones. My focus was not just on making the interface look clean, but on ensuring that it could realistically support a commuter under pressure

Mid Fidelity

The refined wireframes represent a significant step forward in clarity, usability, and context. By introducing strong header bars that include the MBTA “T” logo, the line or station name, and a home icon, each screen now gives commuters immediate orientation. This makes it much easier for users to know exactly where they are in the app, which is crucial when navigating under pressure. The addition of the vertical station map for the Orange Line also mirrors how riders already visualize the T, creating a more intuitive connection between the digital and physical transit experience.

Another improvement in the refined designs is the scannability of content. Posts are no longer plain text, they now include warning icons, timestamps, location data, and engagement metrics, making them more actionable at a glance. The tab system for filtering posts (Recent, Urgency, Trending) has also been visually strengthened, with clearer pill-shaped buttons and active states that reinforce context. Combined with large, tap-friendly station buttons and the consistent placement of the floating action button for creating posts, these refinements emphasize

accessibility and ergonomics, ensuring commuters can interact comfortably even when in motion.

Overall, the refined wireframes establish a tone that feels structured, reliable, and community-centered. Where the earlier versions were conceptual and skeletal, these screens convey a real product experience. The careful use of icons, navigation anchors, and visual hierarchy transforms the app into something that doesn’t just map functionality, but actively supports commuters’ needs for safety, transparency, and quick decision-making.

High Fidelity

As I moved into these mid-fidelity wireframes, my goal was to start building a stronger visual identity for the app while keeping the focus on usability. Earlier iterations were intentionally neutral so I could validate flows and hierarchy, but at this stage I wanted the app to start feeling like a real MBTA product that commuters could trust.

I introduced color-coded headers and line identifiers that match the MBTA system (Orange, Red, Green, Blue, Silver). This instantly grounds the experience in Boston’s transit language and makes the navigation feel more contextual. The vertical Orange Line map in particular was an intentional shift, by mimicking the way subway lines are represented in real life, the interface bridges the gap between a rider’s mental model of the train system and the digital one.

Another area I refined was the station feeds. I added warning icons, engagement counts, and status badges like “ongoing” or “unknown” to make posts more scannable and actionable. These details mean a commuter doesn’t need to read every line of text, they can visually parse the level of urgency in seconds. I also kept the pill-shaped filters (Recent, Urgency, Trending) but improved them with clearer active states, ensuring riders always know which context they’re in.

The homepage now incorporates a map, which was a deliberate move to tie the app to place. Commuters think geographically, what’s happening near me, what’s happening down the line, and giving them a spatial reference makes the experience feel more intuitive. To balance this with usability, I anchored the bottom navigation (home + posts) as floating buttons over the map so they’re still accessible in thumb-friendly zones.

Overall, these mid-fidelity wireframes mark the point where the app evolves from a functional prototype into a branded, commuter-facing product. By weaving in color, map context, and real MBTA references, I was able to give the app a tone that feels both trustworthy and community-driven.

The post creation flow is designed to be simple, structured, and safety-focused, allowing commuters to share updates quickly without friction. Each field is organized in a logical order, starting with the alert name, followed by threat level, description, and status, so users can input essential details in seconds. Visual elements like color-coded threat icons and status pills make severity and resolution instantly clear, reducing reliance on text and improving scannability. The large circular Post button anchored at the bottom right provides strong affordance and easy thumb access, ensuring commuters can submit updates even on the go. Overall, this flow empowers riders to contribute meaningful, actionable information in a way that feels both efficient and trustworthy.

Feature Addition

ChatGPT said:While conducting user testing, I realized that commuters needed a way to engage directly with posts, not just consume updates. Many users wanted to ask follow-up questions, share what they were seeing at the station, or validate what others had reported. To address this, I added a threaded reply system, allowing riders to build rapport and provide additional context around alerts. During testing, I also noticed concerns about the accuracy of information, so I introduced the “Certified T Worker” badge. This gave official voices a clear presence within community discussions, helping commuters quickly distinguish verified updates from peer commentary. Together, these changes made the app feel more collaborative, transparent, and trustworthy.

These thread screens highlight how the app balances community conversation with credibility. The main alert is anchored at the top with a warning icon and clear details, ensuring the core issue stays visible as discussion unfolds. Replies are displayed in a threaded format, making conversations easy to follow and less chaotic than flat comment lists. What really elevates this flow is the addition of a “Certified T Worker” badge, which clearly distinguishes verified updates from general rider chatter. This creates a space where commuters can share real-time perspectives while still relying on trusted voices for accurate information. The result is a feature that feels both social and authoritative, reinforcing the app’s role as a community-driven yet reliable platform for navigating safety concerns on the T.