BIV
Simplify your weekend itinerary and discover Boston's gems
BIV is an app that helps users explore beyond their usual commutes by showing a compressed view of what each T station offers—attractions, history, and local tips.
It cuts planning time, highlights lesser-known spots, and makes discovering Boston easier and more affordable.
Duration
2 weeks, Spring 2025
- - - - - - - - - - - - - - - - - - - - - - - -
Type
UI/UX
- - - - - - - - - - - - - - - - - - - - - - - -
Tools
Figma
Context
Project Brief: Improving the MBTA
As part of my course Processes + Practices, students were tasked with creating an interactive project that improves the experience on Boston's public transportation system – the MBTA (or more commonly called the T).
This could have been accomplished through any new interface that promoted interaction between people and
-
people
-
environments
-
service
-
technology
-
or devices​
Research
​
The MBTA and other Subways
The first step in developing a solution is analyzing the problem at hand.
With sticky notes and a whiteboard, my class went back to basics—writing down every good and bad aspect of our subway system.
Through discussions with my peers, I became particularly interested in addressing how newer students interact with the T. Much like tourists, most students come from suburban backgrounds and are completely unfamiliar with train systems. When arriving in Boston, they want to navigate the city like locals and will always focus on cost efficiency.
Without prior knowledge of the MBTA, newer students are often misguided in their exploration of the city. However, with the right application, I could prevent missed opportunities and confused travel.
Analyzing pain points and best aspects of the MBTA (in class)
Best features found in the top 5 global subways; cited by Essential Living
_edited.jpg)
Outlining elements of the T that could be addressed in my project
Transit/Tourism
App Precedents
​
There are many navigation and trip-planning apps available. My goal was to identify what competitors do well and where they fall short.
As a student who regularly uses the T for both commuting and exploring the city, it was easy for me to pinpoint the pros and cons of these apps.
MBTA Go
Pros:
-
Visual distinction between different line colors
-
Shows both inbound and outbound train positions
-
Shows the lines closest to your location (won’t show me the Red Line because there’s no direct access to it from Northeastern)​
Cons:
-
For my app’s intended purpose, knowing how close the next train is isn’t AS important as knowing where it could go
Timetable of MBTA Go's train tracking function
All the locations Apple Maps shows in proximity to searching up an individual station (Copley)
Apple Maps
Pros:
-
Helpful and clear directions from one station to another
-
The map interface shows different spots near the selected station​
Cons:
-
Shows EVERY opportunity → what if I just want to know what popular street has restaurants? Not every single restaurant in the area.
-
Understanding how to track only the T option takes time (constant clicking back and forth)
-
I would have to know what station to go to ahead of time (not conducive for people who don’t know the T)
Wanderlog
Pros:
-
Activity/itinerary planner
-
Plots out the relevant distance of each activity you put on a list
-
I like the photos associated with each activity
-
Bases their activity options on existing Internet articles → shows online reviews to create credibility
Cons:
-
Difficulty understanding how to get from one activity location to another → you can add transport registration, but it is most helpful if you’ve already pre-booked something
-
The app is suited for planning well-structured trips in the long-term future → I want my app to advocate easy, unplanned adventures
Mapping and location reccomendation functions on Wanderlog
Brainstorming and Ideation
Flows, Categories, and Initial Prototype
Drawing from earlier research, I began organizing the information that would best help my users discover new Boston adventures. From there, I mapped out potential page flows and developed an initial prototype to communicate these ideas.
Categorizing the information communicatied through BIV. These categories help users determine their prefered station to explore by accessing diffrent needs (distance, activity wanted, favorite locations, etc).
Page flows for BIV: a helpful reference for future Figma prototyping.
Low fidelity sketches of page views and potential UI icons
Feedback Received​
​​​​
After presenting BIV's prototype and project narrative to my peers, I received the following feedback to improve my designs:​​​
Layout & Navigation
-
Reduce map size on the Copley info page; use smaller icons and increase white space
-
Create clearer section distinctions to improve navigation
Color & Branding
-
Maintain consistent color usage across visuals and features; avoid reusing line colors for attractions/landmarks to reduce confusion
-
Explore alternative colors and icons to better align with MBTA branding
-
Adjust logos to better match the overall visual style
Typography & Legibility
-
Improve legibility of warning text on the Copley page
-
Standardize typography for activity buttons to ensure consistent visuals
-
Explore alternative fonts to better align with MBTA branding
Icons & Visual Elements
-
Replace “Freight cars” with “T cars” in line graphics
-
Update the train icon to a simpler design and apply full line color for cohesion
-
Reevaluate certain icons (e.g., activities) that may feel confusing or mismatched​​​
Refinement
Before v. After
​​
In response to feedback, I made several key refinements to improve clarity and consistency:
-
Swapped out freight car trains for subway imagery
-
Converted all fonts to Helvetica and Helvetica Neue for consistency (and to match the MBTA’s official typefaces)
-
Increased the size of station names and information bubbles on the Copley page
-
Replaced real-world images on the activities page with representative icons, aligning with the icon style used on the station map
-
Adjusted map icon colors so that vivid color associations were reserved exclusively for T lines
These updates strengthened overall design cohesion while also improving navigation and building user confidence in the platform.
Comparing the First and Second Layouts
Reflections
Expanding the Prototype
This project pushed me to learn Figma quickly and work within a tight timeline, shaping my first experience in UI/UX prototyping and visualization.
If expanded further, I would include more content (line, activity, and station pages), add new features (home station dropdowns, favorites, fare details), and enhance maps with zoom functionality.
Regardless, BIV's current model aligns with the mission to provide a personalized, flexible guide for any MBTA rider across Boston.
© 2025 Mayah Hamaoui.