SEPTA, the Southeastern Pennsylvania Transportation Authority, enlisted our team of designers and developers for an extensive redesign of their mobile application. Despite its pivotal role in aiding riders with transit schedules and system navigation, the app had become stagnant over the past decade, failing to keep pace with evolving rider needs and falling behind similar apps in other cities. Recognizing the need for modernization, SEPTA entrusted us with the task of comprehensively revamping the app's design, information architecture, features, and user experience to meet the dynamic demands and expectations of their ridership.
Lead Product Designer with a focus on Visual Design
Research
UI/UX Design
Branding
Design System
Product Design
Experience Design
Prototyping
Usability Testing
SEPTA, the Southeastern Pennsylvania Transportation Authority, is the driving force behind 🚍 public transit 🚆 in the greater Philadelphia area. They approached us with the thrilling challenge of revamping their mobile app.
The SEPTA transit system has long been recognized for its complexity. In its quest for modernization, SEPTA aimed to enhance riders' navigation experience by introducing SEPTA METRO. This system unifies the subway, elevated, and trolley lines into a singular system, while incorporating new colors and simplified names, all geared towards helping riders navigate the system with greater ease and efficiency.
The subway line called the “Market-Frankford Line” will be simplified and renamed to the L Line.
By seamlessly incorporating the new wayfinding system into the app, all the while retaining references to the existing line and station names, we can assist riders in swiftly acquainting themselves with the system and streamlining the transition process.
SEPTA has made great strides in improving accessibility at their physical stations and stops, however these enhancements are not effectively highlighted within the app.
Users can’t check if a station has elevators, or if the station elevators are functioning.
This creates a frustrating and potentially harmful experience, especially for older riders or those with limited mobility.
App features have been haphazardly tacked on throughout the years without assessing and updating the underlying information architecture. This has led to users overlooking and missing important features that the app offers.
Access to a user's SEPTA Key account (the account for their reloadable fare payment card) is currently situated solely in the top right corner of the home screen, which led users to overlook where they can add new funds. Furthermore, the trip planning functionality is buried within the "More" section of the navigation alongside unrelated features, resulting in many users being unaware of the capability.
Users often resort to visiting the SEPTA website to add funds to their card and rely on alternative apps such as Google Maps and Waze for trip planning. This fragmented approach results in a needlessly complex and time-consuming experience, potentially deterring users from utilizing the app altogether.
While each rider's needs are inherently unique, the current app lacks sufficient opportunities for users to prioritize the information that aligns with their preferences or to filter trip options accordingly.
A rider has the option to save a favorite route (from station to station); however, this feature only displays scheduled upcoming transit information, lacking real-time tracking capabilities. Moreover, it fails to consider factors such as the time required to reach the station or any potential route disruptions due to detours or construction. Additionally, alerts that could affect a rider's journey are relegated to their own navigation item, making users need to manually search the alerts screen to check for any pertinent updates that may impact their travel plans.
The user may miss critical information that could adversely affect their journey, resulting in additional time spent waiting for transit or, in some cases, missing it altogether.
Riders have expressed frustrations regarding the current app's unreliable transit tracking capabilities and safety features.
Current UI appears outdated due to overly detailed iconography, excessive use of the SEPTA dark blue, and extensive copy. Sub-brands are poorly showcased and lack integration.
The app provides limited options for users to personalize and highlight their most relevant trip information.
We need to challenge the current information architecture and speak to users to better understand what's most important to them.
By leveraging a comprehensive digital consumer survey, backed by insights from over 2,000 respondents and supplemented by in-depth interviews with customers, we successfully crafted 6 distinct user personas, spanning from "The Daily Commuter" to "The Retiree". These personas vividly illustrate their frustrations, concerns, driving forces, and feature preferences.
Subsequently, these personas served as invaluable tools in gaining deeper insights into the diverse needs of SEPTA's ridership. They empowered us to meticulously outline optimal user journeys and refine the framework for forthcoming usability tests.
Before we could begin the redesign, we continued our research and testing to better understand current riders' perceptions of the SEPTA brand and current app. Additionally, we compared our app to other city transit apps and navigation services like Google Maps and Transit to gain valuable insights.
User flows were tailored to the various rider personas, encompassing essential actions within the app such as trip planning, viewing upcoming trips, onboarding, and managing funds. We were able to identify potential drop off and pain points.
Our baseline user interviews and usability testing of the current app revealed an average success rate of just 64% for basic in-app tasks, with an average time on task exceeding 2 minutes. These findings underscore the urgent need for simplification and restructuring.
Given the low task success rate and an average subjective ease score of 2.9/5, we initiated a card sorting exercise to better understand user's natural information categorization tendencies. This informed clearer feature groupings in the nav, reducing clutter and minimizing the number of taps required to complete tasks.
In our initial user testing phase, we utilized low-fidelity grayscale wireframes to quickly present our initial designs to users. The response to testing the new information architecture and updated navigation was overwhelmingly positive allowing users to more easily find what they were looking for.
After refining our designs through multiple rounds of iteration, we progressed to creating high-fidelity prototypes. This gave us the opportunity to focus on defining the updated brand identity while also figuring out the best way to integrate the new wayfinding system into the app.
Having the user account only accessible on the home screen caused users to overlook it. This led to us moving it into the nav.
Users wanted "Add a Favorite" functionality readily available across multiple pathways to provide easier customization.
Some users still experienced confusion regarding the new line colors and terminology, indicating a necessity for more comprehensive onboarding.
The average success rate to complete a task increased by 29%, totaling 93%. In addition, users completed tasks faster and with less taps.
Avg. subjective ease improved by 28%. Users found the redesigned app to be easier to use and navigate while expressing excitement about the preliminary designs and updated UI.
Projected 70% increase in safety reporting with native integration of the SEPTA Transit Watch Features.
The new SEPTA App unveils a fresh, modern look and feel, prioritizing an enriched experience for riders, whether navigating digitally or traversing Philadelphia's transit system in person.
Users now have enhanced trip planning capabilities accessible on the home screen. While planning a trip, the elevator icon indicates accessibility at stations, and customizable trip preferences offer users the ability to minimize walking time and transfers to meet rider's accessibility needs. Formerly tucked under "More," in the nav, trip planning is now only one tap away, featuring real-time transit tracking, trip cost estimates, built-in alerts and all that is expected of a modern city transit app.
Now users can save Favorite Trips, Routes, or Stations, expanding from the previous option limited to just Routes. A Favorite Trip includes walking time, while a Favorite Station displays all upcoming departing transit. Personalized trip alerts are shown only when relevant, with redesigned tiles featuring the new SEPTA Metro line colors and icons to reinforce the new wayfinding system.
Safety reporting functionalities are now accessible under Help within the nav. Before the redesign, users had to download a separate app to be able to file a report or reach transit police, deterring many users to report their concerns or notify SEPTA security of potentially harmful situations.
We crafted a seamless onboarding experience to introduce users to the new SEPTA Metro and its latest app features. Furthermore, we integrated the vibrant SEPTA Metro colors into their favorite tiles, the trip planning flow, and the schedule screens, reinforcing the new system in riders' minds.
SEPTA Key is no longer only accessible from the home screen. It is now easily accessible from the Buy section in the nav menu, alongside Key tix (single-use mobile tickets for individual rides) and Parking.
Given that the design of the SEPTA Key Card was handled by a separate department, it appeared visually disconnected from the broader SEPTA branding, primarily due to its heavy use of teal. As a remedy, the app now visually aligns with the physical key card, ensuring branding cohesion by adopting a "teal takeover" across all branded elements in that section.
The status bar at the top of the home screen welcomes users with a time-based greeting and displays vital user information such as active transit tickets (Key tix) that features a scannable QR code and important system-wide alerts, but only when relevant.
In the updated SEPTA app, we've implemented rounded corners, soft drop shadows, and material-like components to establish a tangible user experience, enriching visual allure and fostering increased user interaction for a more inviting user journey. Departing from the outdated color scheme of the previous version, we've retained the base colors for brand consistency while infusing the palette with brighter tones, offering a fresh and modern aesthetic to enhance user engagement and reflect contemporary design trends.
Furthermore, we've updated and simplified the iconography for improved legibility on mobile devices and ensured compliance with current accessibility standards, incorporating features such as adequate color contrast, appropriate text/graphic sizing, and clear labeling. We've seamlessly integrated SEPTA's sub-brands like ISEPTAPhilly, and introduced custom graphics that mirror their styling, alongside digital renditions of physical products like SEPTA Key, delivering familiarity and delight throughout the app.
Although both the client and our team were ecstatic about our achievements, we felt it was important to take a moment to reflect on our journey and pinpoint areas for improvement that we could utilize in future endeavors. Our reflections naturally fell into three key categories.
As this marked our consultancy's first full app redesign, our initial project timeline may have been overly optimistic. Despite surpassing many of our goals, the constraints of a year-long timeframe and a rotating design team—fluctuating between three to five members—compelled us to expedite certain phases, such as comprehensive design system documentation and mapping out alternative user pathways. In addition, this pace limited our ability to accommodate unforeseen feature requests or easily adapt to evolving requirements. In future projects, I would propose a more nuanced approach by carefully assessing team size to allow for extended design and iteration cycles. Extending the timeline by at least six months would afford us the flexibility to navigate potential roadblocks more effectively.
Our engagement saw the development team joining midway through, necessitating substantial rework due to misalignments between design concepts and backend functionalities. While budgetary constraints initially influenced this decision, I would advocate for early developer involvement to validate the feasibility and viability of our designs. Assigning even a single developer with limited allocation from the outset can preemptively address implementation challenges, ultimately saving time and resources as the project progresses.
Although our timeline accommodated two rounds of testing, we realized the value of incorporating additional testing cycles as new features emerged. This approach would have allowed us to better validate design decisions in real-world scenarios later on in this process and to refine our hypotheses iteratively. Moving forward, I would propose a strategy of targeted, incremental testing to focus on specific feature details as the project progressed, ensuring a more robust user experience.
