For this project we were redesigning the interface of apps that navigated through physical and virtual spaces. I chose Tiramisu, the Pittsburgh bus application. I decided to test the app by taking a bus to East Liberty and then attempting to return to Carnegie Mellon University by using Tiramisu.
This is the starting page for Tiramisu app, not knowing the nuances of each option I chose the first option.
I was quickly located on GPS tracking, but was confused as to which bus stop to click on. There was no direction as to which bus stop I should select or how to get to each one.
This was the corresponding view in real life from where I was. From outside the Giant Eagle I can’t see any of the bus stops shown in the app. I actually opened Google Maps in order to find a bus stop that would take me to Carnegie Mellon and navigate to the bus stop.
Once I drew closer to the correct bus stop I reopened Tiramisu and clicked on the bus stop pin icon. I was given no real indication of which bus stop I should go to as both bus stops had the same information in the bubble.
This is the bus that would take me back to Carnegie Mellon University.
The bus I wanted to take would switch between showing these messages on its front as well as “GO BUCS”.
In later wireframes I chose to include “71B” as well as “Downtown Via Oakland” as ways to identify the correct bus. I didn’t include “Highland Park” as the bus that travels in the opposite direction also flashes “Highland Park”.
Tiramisu Wireframes
This is my preliminary in class redesign of the Tiramisu app and process work on defining the needs and goals of the target use. The user I am designing for is a new Carnegie Mellon student who isn’t confidant about taking the bus.
These are my first draft wireframes that were meant to simplify the process of taking the bus. In simplifying the process of taking the bus I decided to only include bus routes that took a user directly to their destination. I also removed or hid information I deemed unnecessary or confusing such as multiple start menu options, the compass, and the icons for bus stops that would take you in the wrong directions.
After critique I reexamined each phase of the public transit process and redesigned all of my wireframes. My primary goal in redesigning my wireframes was to empathize with what the user would want to know at a certain time. I analyzed how time should be presented to the user when they’re walking to the bus stop versus while on the bus. I also looked at how to determine which was the correct bus stop to be at.
Next, I looked at what an initial navigation app should show to the user and how much choice a user should have. I remembered a Google UX guideline which recommended limiting the choices a user had to make. I applied this idea to a critique someone made about wanting to know alternate routes to a bus stop. Instead of letting a user spend time choosing which route to take, I created a binary choice on the start menu that would automatically choose a route. A user could choose to turn on or off “safety mode”. Turning on safety mode would keep a user on busy streets while turning of safety mode would choose the fastest walking route.
For navigating to the bus stop I designed a “Run!” feature in which the app would flash the words “Run!” and beep if they weren’t at the bus stop and the bus was coming in less than a minute.
These are the wireframes themselves.
In this iteration I attempted to clearly spell out the capabilities of “Tiramisu Simple” with an early disclaimer about which bus stops would be shown. The text “Destination” disappears when once you tap on it.
If a user taps on the blue asterisk, the first text block and the destination box become dark silhouettes and an explanation for “Safety Mode” appears in the middle of the screen. Safety mode will only map walking routes that are main, well trafficked roads in order to keep users safe. Tapping anywhere on the screen will minimize the safety mode explanation block and the screen will return to the normal homepage.
The safety mode button can be tapped or slid to be changed. The dark switch moves back and forth and shows text to clearly show which option is being selected.
After inputting destination, the screen jumps to a map of the user’s current location. Unlike Tiramisu, the map will resize accordingly so at least one bus stop with a direct route to the user’s destination will be shown. All street names are shown in the map, however I only wrote in three in order to simplify the wireframe. Users can navigate through the map by sliding their finger and can zoom in and out by pinching with two fingers. Bus stops that don’t have a direct line to the destination are shown as light grey ghosts. These bus stops are included as landmarks for the user when they’re walking, but cannot be selected or interacted with.
When a user taps on a bus stop a popup window appears from the pin and centers in the top middle of the screen. The map zooms out accordingly in order to keep the user’s gps location on the screen. After tapping the pin, a suggested walking route appears, with an estimate on walking time compared to the time the bus would arrive. Clicking anywhere on the map other than the popup exits the interface and the user can select other bus stops.
This is the same interface as above, but if safety mode was activated. The suggested route only stays on main roads, avoiding walking through a side road.
After tapping the “GO!” button a timer appears in it’s place. For the first three seconds the timer beeps in order to draw the user’s eye and reinforce the idea that a timer has begun.
If the user isn’t within 20 feet of the bus stop and the bus is arriving in one minute or less the app will beep for each second of the timer. The beeping will stop once the user reaches the bus stop.
After each beep, the words “Run!” appear in between each second to emphasize urgency.
Each bus is gps located and appears on the map as a moving icon. Once the bus arrives, the countdown timer becomes a flashing box with the words “Track Bus”.
After entering the bus the map simplifies and zooms out to include the bus stop the user will exit on. The bus exit timer and gps tracking help a beginning user follow along the bus route. This time the timer will not beep when starting as urgency at this point in the process is unnecessary.
Once the bus passes one stop before the final bus stop, the green box will flash and a notification will sound.
After the cord is pulled the green box flashes again, telling the user to walk to the front of the bus.
Finally, after exiting bus, walking navigation is given to the user.
This is the wireframe layout as a user could move through it.
Tiramisu Storyboards
This is my initial in-class storyboard about using a modified version of the Tiramisu bus mapping app.
I first looked for storyboarding tips before starting and established a rough establishing shot, climax, and ending. Next I highlighted when a user would interact with or be notified by the app. I built the rest of the frames off of that structure.
This preliminary storyboard captured more actions and events than would be necessary in the final. After defining the key moments I wanted to capture I added more story elements to my final storyboard such as using different angles and drawing more expressive figures.
My final story board attempted to convey the ease of using Tiramisu and the feelings of empowerment after successfully using public transit.
A composite of my story board and corresponding wireframes is on the link below.
Photo Storyboards
When adding low fidelity wireframes into each photo I only included information that was relevant to each individual photo. This was done in order to simplify the storyboards. I also included wireframes in a few of the storyboards to clarify what information the user was receiving from the app.
I first sketched out the key moments I wanted to capture, experimenting with different camera angles for each photo.
The user in this situation planned out his journey on a desktop computer beforehand, but still isn’t confidant when taking the bus.
The user starts out in a Giant Eagle parking lot that offers no clear direction towards a bus stop.
Carnegie Mellon University is typed in and entered as a destination.
The user can follow along while walking with built in navigation.
The bus timer indicates that the bus will be arriving so the user holds up his phone to check that this is the correct bus.
The bus timer indicates that the bus will be arriving so the user holds up his phone to check that this is the correct bus.
While riding the bus the user is able to track where the bus is and how long it will take before he arrives at the bus stop.
A notification is given to pull the cord once the bus passes one stop before the actual stop.
After successfully returning to Carnegie Mellon, the user feels empowered with his ability to use the public transportation system in Pittsburgh.
Reflection
Environments Track 