BOSTRAVEL APP

Mobile App // Applications used: Optimal Workshop, Sketch, InVision

Check out the prototype here.

Below is some of the research and design that went into designing this app. For the full report and results to the testing, click here.

OBJECTIVE  
The app will help aid commuters and travelers in the world of the Boston public transportation system. This app will include calendar and schedules, information/maps, easy pay options, delay updates, scanable ticket/card and the ability to see recent trips.

COMPETITIVE ANALYSIS BRIEF
By analyzing other apps that are similar to the one being created, we are able to see what works and what doesn’t. This will help with carrying over features that are successful, while solving the problems of ones that are not. It is important to test other apps to see what works and what doesn’t.

There are well over 20 apps that aid with the Boston public transportation. These three applications were chosen because they each showcase a different feature that this application could use. These study will help show us what each app currently has and what it could have to make it even more helpful for users. These features were decided from surveying users to see what they would want to see in a public transportation app. Being able to get real feedback about what the users want help create a successful product.

USER TESTING
After collecting research about the apps, I went and handed the app to a user. These results are just one user’s perspective of how she felt about the app. This research will be critical when designing an app that incorporates all of the positive features into my app.

Kate, 24, young professional working in Boston, takes the green line everyday, frequent user of this app.

GREENLINE APP (USER TESTING)

First impressions: busy, realtime, colors are good contrast

Wish it had: option to only see one line

Since this application was so simple, Katie had an easy time figuring out how it worked. She liked how user friendly it was but wished it was showed more than one line. The one negative was that there was only the green line and that it showed all the green lines at the same time. If Katie wanted to get directions, this app would not be the one to use.

Screenshots of the interface:

CARD SORT
A card-sorting test is used to determine how people categorize items. This test shows how users organize information. The data that is collected is compiled and analyzed to show where people look for specific items. By understanding how users categorize items, designers and researchers are able to best group items into specific areas. These are the 30 terms that were used: Ticketing, Map, Calendar, Track train, Delays, Updates, Green Line, Red Line, Orange Line,  Commuter Rail, Blue Line, Subway, Bus, Stops, Stations, Accessibility, Destination, Profile, Favorites, Report a problem, Contact MBTA, Twitter, FB, Instagram, FAQ, Alerts and Notices, Inbound, Outbound, Trip Planner and Routes.
(see report for results)

SURVEY
Surveys are used to understand who the users are. By asking questions about the people who will be using the app, researchers, designers and developers can create realistic personas that allow us to understand the users wants and needs. This will help when creating use cases and make sure that every walk-through is intentionally created to help the user best use the app. These questions ranged from age, transportation usage, feature requests and satisfaction with MBTA. 
(see report for results)

PERSONA
Personas are used to create a feel for the different users that would be using the application. They give designers a way to understand and empathize with each user.

SCENARIO/USE CASE
Use cases are developed to understand the actionable steps the user is trying to take. By understanding how they think, we can develop the path to where they want to go.

Carly is looking to find the best way to get to Cambridge from Brookline. She goes into the city everyday for work but usually takes the green line right to Government Center. She goes on the app and clicks on “Routes.” This opens up a place to type in “from” and “to.” She clicks on from and types in “12 Harvard Street Brookline MA” and to “Harvard Square Cambridge MA.” She clicks “Find Routes” and it opens up a window with the best three routes and how far away the train/bus is from her currently. She sees there is a “66 bus” not too far away from her that is almost there. She clicks on that one and it opens up a window with a map and a route. She walks over just when the app said the bus was coming and swipes open her CharlieCard from the screen. She hops on, scans her phone and takes a seat. Twenty minutes later, she hears Harvard Square and looks at the app to make sure that is the right stop. She confirms and gets off the bus.

INFORMATION ARCHITECTURE
This is an structure of how I envision the app to be laid out.

WIREFRAMES/LOW FIDELITY
This step is crucial for understanding where everything is placed on the screen. Before thinking about the visual design, it is important to focus on the interaction and make sure everything is placed in the best place for the user. (see report for all screens)

USER TESTING
After creating low fidelity wireframes, I took it into Invision and created a clickable prototype. This clickable prototype is then taken to users and tested. The testing process can go a few different ways. For this prototype, I opened it up on an iphone and handed it to a user. She was directed to first click around to get a feel for the app and then give initial feedback. Low fidelity prototypes are sometimes hard for users to fully understand because they do not look like what the app will look like and some of the features do not work as they would on a real application. This takes a little explaining but once she understood this she clicked around. These are the results from the testing.

Katie understood the registering and login features. At first she was a little confused at how to just see a live view when she was on the route screen. She didn’t see the bottom nav at first and wasn’t sure if the only option was to put in a route to get directions. Once this was cleared up, she clicked on the live view and understood exactly how it would function.

HIGH FIDELITY PROTOTYPE
This step focuses on the visual design and allows the user to understand how the app will function and work for final rounds of testing. (see report for all screens)