SMARTA for iPhone Prototype

Interaction Design, UI/UX

tl;dr - SMARTA for iPhone is a prototype of a redesigned MARTA mobile app, made for my Principles of Interaction Design course. The purpose of this app is to provide users with a more accessible way to view live transit updates and the user's proximity to nearby MARTA train stations and bus stops.

BACKGROUND

For this course, my group was tasked with improving public transportation with technology. I took on the challenge of redesigning the mobile app of Georgia's current public transit "MARTA." I wanted to provide a seamless and useful application for MARTA riders as well as adding in some perks for using public transit in Atlanta, where our traffic is well on its way to copying LA's traffic style. I also wanted to provide an infrastructure that digitized the MARTA Breeze Card by allowing riders to reload their card and scan it at turnstiles from their phone, with no need for a physical card.

My main inspiration for the concept was from Google Maps, Snapchat, and Starbucks Mobile.

WHY MARTA?

There were a lot of reasons that I felt passionately to choose MARTA as the centerpiece of this project. As a MARTA user with my own gripes about the system, I really felt that just an excel sheet with numbers that were not always accurate did not really appease my need to be on time whenever I took the MARTA. At the time of the project, the app did not have any sort of real time updates for your phone, only a giant screen at the station itself with a typically unreliable tracking system. I could wait 8 minutes for the red train, only for the listing to suddenly disappear off the screen completely.

MARTA also is something that people don't make the most of. There's a lot of places you can go through MARTA's trains and buses, but instead of learning how to navigate it, people opt to just drive themselves.

Something I always thought would be useful for MARTA is mobile payment. When I was in university rushing from class to class yet I needed that Iced White Chocolate Mocha to survive, Starbucks' mobile payment really saved me. I feel like this is something that would benefit the MARTA Breeze Card heavily. A mobile payment system that integrates with the users' devices.

Finally, incentive - in order to help clear up traffic, promote the usage of public transit, people need a good little push or a reason. Incentivizing riders with rewards - this was a concept I thought of from seeing Snapchat's trophy case, combined with Starbucks' reward system.

Why not get people to ride the MARTA by giving them perks for doing it?

RESEARCH

The first key part of any UX process is to do research - even if you don't have the time, budget, etc for it. (In fact, I argue that could be the most important situation to do research in.) Any bit of help is better than jumping in blind, so I put on my big girl pants and quickly got to work. Due to having a short timeline for the project, I knew that I wouldn't be able to survey people quickly enough and get to do 1-on-1 interviews with them, so I ran with my own experience, which is a fairly common pitfall if you are not the intended audience.

I wanted to really pin down the audience first, so I had to think about the different scenarios the app applies for. For the exercise, my professor wanted us to have 5 different scenarios, so I will list them below:

- Student traveling to school to make their morning math class

- Employee attending an office holiday party

- Adult who commutes to their night job every weekday evening

- Teenager going out for the day who has just used the last of their BreezeCard funds

- Individual wanting to take Marta to a concert event they’ve marked on Facebook

These became makeshift personas for the assignment, and I created a set of user flows in our improved app for each scenario. For example, take the fourth bullet.

Teenager opens mobile app → Teen clicks on draw-down menu → chooses Breeze Card tab from options → notices that their number of trips on their Breeze Card is 0 → clicks on “reload” button → enters desired number of trips to add

Alongside this, the preliminary research included an in-depth investigation of the current app and identifying pain points for users. I also took the time to research other public transit systems to see how their websites and apps were set up.

PROCESS

The way I tackled this project was quickly dividing up who in our team was working on what. One member was creating a new logo for the project, and another spearheaded the Chrome extension. I took on the task of creating the overall look and feel, creating the mobile app mockups, and piecing everything together for the final prototype. We chose to do an Apple mockup because one of my members was very keen on Apple's style, so we went with that. I also took charge on making sure it followed the color scheme of the existing MARTA site/app because I feel that change is good, but depending on the user - you need to cater change in each unique scenario. Some people will be completely confused if everything is different at once. Because we were changing the entire information architecture, I wanted the audience to still have the same colors to rely on, so they don't think it's a completely different app.

I first created wireframes on paper then needed to quickly begin mocking up screens in Adobe XD with our short timeline. After the screens were all approved by the professor, I then transitioned into prototyping with XD. Below you can view the interactive prototype that was demoed to the class.

Being able to reflect on this project 2 years after its creation, I really feel that a lot of the UX elements that I was going for would still be a viable change. There are certain things that I know now to be more cautious of moving forward - one big one is that I am not an Apple user, so for me to design these screens, the biggest issue that I found is that there is not back button on the screen. Android users are used to having this "back" feature as an actual button, but the Apple users do not have this. Constantly being aware of the constraints in the space that you're designing for is very important. While I worked on the majority of the styling, there were 2 screens that I only did partial styling for, and so seeing the look of the buttons being inconsistent with the rest of the style is something that I should have put more importance on and fixed before we presented. I am still pretty pleased with the ideas that I had in the project, and I feel like this would have definitely been a good starting point for a MARTA app redesign.

Complete Set of Mockups

Chrome Extension

The Chrome extension provides inline transit directions for any address a user comes across on the web (Facebook and Yelp listing examples were included in the prototype). It also features a widget in the address bar that provides nearby transit and bus schedules, as well as directions to the user's Facebook events, in the same way the iOS app does.