Redesigning MARTA’s iOS App

Over the long weekend, I began redesigning MARTA’s iOS app. Since it’s release, I’ve wanted to try out Apple’s new iOS component library. Redesigning the MARTA app was a perfect fit because the app’s core feature—quickly pulling up arrival times—is useful and straightforward.

Why take on this project though?

For years I was a daily rider. And although I work from home now, I still take the train when I go into the office or to the airport. Recently, I was in Chicago for Salesloft’s Saleslove conference and took the train back home from the airport. I opened up the Marta on the Go app. Sure enough, it was the same as when I moved back to Atlanta in 2015.

Also, I love Atlanta and I love trains. When MARTA asked for public comments on the new rail cars, I jumped at the opportunity to voice my opinions. A crowning achievement was having MARTA cite my feedback about the train’s exterior design.

Sam Solomon, who also favored the minimalist approach said: “Of all the designs, this one seems like the one with the most staying power. Several of the other designs will look terrible in 5 or 10 years. Considering these cars need to last 40 or 50 years, that should be a major consideration. This concept also feels like the one that most closely fits with MARTA’s branding.” 

Below you’ll find some short clips of the prototype I’ve built. Below that is some brief commentary on what I changed and why.

It might not seem like much, but this app is an extremely visible way people interact with MARTA. It’s current state it leaves an impression that nobody cares‚and maybe nobody does right now. However, my hope is that this work inspires someone to care. For someone to take another look at this app.

App icon and splash screen

Let’s start at the beginning. The app icon should reflect the app’s brand—and MARTA has a strong one. The thick orange, yellow and blue stripes are recognizable to everyone in the city. The reflective gradient effects on the existing icon washes out the bold brand colors.

Additionally, the vehicle icons and text overlay on the existing app are difficult to read on a phone screen. It takes away from the brand and adds noise.

I propose to simplify the icon to three stripes at an angle. Here I’m following the pattern of the reversed direction that is outlined in MARTA’s brand guidelines. That seems to be what is currently used on the official site and newer materials. Trailing logomarks are fairly uncommon today. That’s probably why the reversed variant is the most used.

For the splash screen, I wanted to design something that felt appropriate, interesting and wouldn’t take too much time to create. My idea was to use the brand stripes and make them seem like trains pulling into a station. Have them arrive and depart independently.

The design is a bit of an optical illusion. It’s one frame with staggered stripes that move from the bottom left to the top right instead of independent stripes. The staggered image is what gives the impression of them moving independently.

Information architecture

Most of the issues with the existing MARTA app stem from an information architecture that takes several taps to get to useful content. Instead of showing lists with filters, or giving priority to specific content, the existing app makes riders tap to get to every individual piece of content. For example, the fastest route to get to the Five Points arrival times is—to tap Train, tap Next Train Arrival, Tap Select from the station list, scroll, and tap Five Points. It is a huge amount of work to get to key content.

Take a look at the existing information architecture compared to my concept. Keep in mind the the colors represent the following:

• Orange cards are navigation items
• Gray cards are filters, list views or pages without content
• Yellow cards content pages
• Red cards are pages from MARTA’s See & Say 2.0 app

The biggest change here is move the favorites page from behind layers of menus and make it the home screen. I’ve relabeled it Arrivals and as you’ll see, I’ve added arrival times directly to the favorites menu. Riders will open the app and immediately see the next arrivals. No further taps needed.

You’ll also see some red cards in the IA. Those are from MARTA’s See & Say 2.0 app. There are only a handful of pages—so I think it’s worth consolidating so riders have less apps to install.

There’s also the Breeze Mobile 2.0 app for ticketing—that really should be included here. Then riders would only need a single app for managing fares, checking arrival times and for safety. That would include some sort of checkout flow and was too much to include for a weekend project. I would love to eventually see everything consolidated into a single app.

Arrivals

Most riders have a station or stop that they use often. It may be because it’s near their home, work, grocery store or somewhere they frequent. That’s why the Favorites view is one of the most important places in this app, but it is currently hidden behind layers of menus. And once you’re on the Favorites view, it still requires an additional tap to drill into the station. It isn’t a useful implementation of the feature.

I’ve taken the existing Favorites page and moved it to the home page. That way, it is the first thing riders see when they open the app. Additionally, I’ve included the next train, bus or streetcar arrival time.—no additional taps are needed.

One visual choice I made was setting each transportation type to a different shape. Trains are squares, Buses are circles and streetcars are triangles. I think this works as long as the app is simple.

Trains

Selecting Trains in the navigation takes riders to an alphabetically sorted list of train stops. There is a search bar at the top that allows users to filter the list. We could add a lines filter here—the existing app offers that approach. I’m not sure how common that use case is though. Most riders will be looking for specific stations, not train lines.

I’ve added the link to the system map in the top right. While useful, I feel like the station list should have the emphasis.

A further enhancement not included in these designs would be surfacing nearby stations in a separate section at the top. Riders would have to grant location services to the app and the coordinates would need to be added.

On the station detail page upcoming train arrivals are front and center. I’ve included bus connections and arrivals—as I’ll discuss elsewhere, this might be difficult to implement. I’ve also included some basic details like number of parking spaces and whether it has bathrooms—basic info on the station detail page on MARTA’s website.

What else? Tapping the bookmark in the top right adds or removes the station from favorites.

Buses

The existing app shows buses by route. For commuters getting on and off at the same stops each day, it seems like bus stops would be more useful. Here I’ve kept routes but allowed riders to drill down to individual stops from those route pages.

I built this prototype before writing this post and, unfortunately, I may have been overzealous. This post by Jake Swanson and the associated reddit discussion about MARTA’s API doesn’t give me much hope of building something for buses.

The bus data uses something called the Google Transit Feed Specification. GTFS doesn’t have a human-readable format like the JSON Rail API. After spending a little time looking through GTFS documentation, I think getting that data into a readable format may be beyond my abilities.

I suppose an alternative approach would be to show the estimated arrival times based on the schedule. I don’t think that’s particularly helpful though. Otherwise, riders could just show up at the same time every day!

Streetcars

The Streetcar section works similarly to the others. There’s a list view that can drill down into individual stops. Stops intersecting with rail or bus stops, should show those on the streetcar stop detail page. Here we can see the Peachtree Center MARTA station on the Peachtree Center streetcar stop.

I’m also skeptical about the ability to incorporate streetcar data. If you navigate to the streetcar section right now, you’ll realize there are no results. No matter what you do, the results are blank.

I’ve discovered a handful of conversations online about accessing the Streetcar data. It doesn’t give me much hope that most of those sites are offline. Hopefully, I am wrong.

Alerts, See & Say and More

Currently, the More section is a holding place for everything else in the app—favorites, settings, contact and such. That’s fine, but organization makes all the difference.

I’ve placed Alerts as the first thing. An alert is a simple message about services that expire at a specific time. The structure I’ve used here mirrors what already exists. Although I think having an ID to map it to a particular station would go a long way. Given the pattern that most of these follow, I suppose it could be done by picking route and station names out of the alert itself.

Escalator, elevator and restroom alerts don’t belong with transit alerts. While they are still in the Alerts section, they are separated.

See & Say 2.0 is MARTA’s safety app, which likely means the budget and requirements were controlled by MARTA police. As a rider, I don’t want to have multiple apps to juggle. I think the simplicity of See & Say would allow it to fit inside the main app.

What else? I’ve added some general settings. The ability to manage favorite stations and stops, adjust language or default screen, and perhaps adjust the theme.

Dark theme

One benefit of using Apple’s iOS components is that it is easy to implement something like dark mode.

Looking at Apple’s Figma library it’s interesting to see their naming convention adding -dark to dark theme variants. It works well for simple applications. I think that approach could be tough for a product like Salesloft though. There are too many colors to manage that way.

What’s next?

One thing I didn’t mention earlier—I’ve been going through a course called 100 Days of Swift UI. I feel pretty confident that I’ll eventually be able to take the JSON from Rail API and put them into a basic list view like in the trains section above. We’ll see if I have the time to complete that project.

Regardless, if there are any engineers—from MARTA or elsewhere—interested in making this prototype a reality, let me know! I’d be happy to clean up the Figma file and share it.