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.
Final upload
My intention in redesigning Tiramisu was to increase the use of public transportation in Pittsburgh.
Reflection
Knowledge
What
This project I increased my understanding of Indesign, Photoshop, and Illustrator and practiced merging elements of all three together. I also learned more about human-centered design, storyboarding, and user interface. My second set of wireframes were vastly more thorough after I began to think more about user needs. After iteration and research on storyboarding methods I was able to move much faster through the process. Finally, I considered many of Apple and Google UX interface guidelines while creating my final wireframes.
How
This project I sketched my way through all of my wireframes, storyboards, and photo storyboards. The constant sketching helped me physicalize and critique my ideas. Since I sketched quickly I was able to redo many of my original ideas without wasting too much time. While it took me longer to complete my work by rarely asking for help, my grasp and memory of Indesign, Photoshop, and Illustrator operations are much stronger.
When
In the beginning of the project I was primarily sketching, but switched to iterating digitally after creating photo storyboards.
Regulation
Planning
One of the most difficult aspects of planning for this project was breaking up “thinking time” and organizing photoshoots. While working through my redesigns of wireframes and storyboards I would try to work on them everyday while taking breaks in between so I wouldn’t begin to overanalyze. By dividing my iteration timing I hoped to always have a fresh view on what I had just worked on. Secondly, I wanted my photos to be when the weather was fair in order to promote a sense of ease and comfort in my final images. Figuring out when the sky would be clear as well as when my “models” were free proved to be difficult as well.
Assessing
After creating my first set of wireframes I realized that I would have to redo them before moving on to storyboards as the wireframes would be the framework for the next stages of the project. I spent much more time editing my wireframes than my storyboards as I felt that the wireframes were much more important. Critiquing my own digital work was more difficult as I’d have save multiple versions of a file in order to compare them.
Experience
Emotions felt
Anxious: I felt anxiety presenting to the class as well as keeping up with the influx of assignments while also trying to refine my past assignments. The final presentation was particularly worrying as well as the task of providing for the needs of a user taking public transportation. I also felt anxious about whether or not the work I was creating was on par with the rest of my classmates.
Excitement: Although Tiramisu required many edits I was excited to rise to the challenge of redesigning almost every part of the app. Also the rapid progression of the project was exciting.
Distractions
At times my anxiety was distracting as I would be caught up worrying about minute details in photos or overthinking assignments. People talking around me and to me was distracting, but for the most part wasn’t an issue. My main distraction was my laptop. If I got stuck on an idea for a while or was eating food in studio, it was tempting to just surf the web for far too long.
Motivation
If I started working immediately after sitting down at my desk I would become motivated and stay motivated although I was lazy on Thursday afternoons and Friday mornings. The requirement of presenting my work each class provided a bit of fear that would help curb my laziness. I am now in the habit of listening to one electronic song on repeat for hours while working so I can block out sounds around me more easily.
What were you challenged by?
I was challenged by working to a quick deadline without too much time for iteration. I also found presenting my work to the class a huge challenge. I tried to remain succinct while also illustrating what I had worked on and why I made the decisions I did. This was one of the first times I used Illustrator extensively, experimenting with its capabilities and limitations was time-consuming.
What did you do well?
I believe that my decision to thoroughly redo all of my wireframes set up the rest of my project for success. Even though I did change some aspects of those wireframes I wouldn’t have been able to have a solid groundwork for my redesign of the app.
What would you do differently?
The first wireframes I created were vastly inadequate, starting out the project with strong wireframes would’ve been much easier in the long run. Also while deconstructing wireframes I edited many different components, but then took a break before putting them all together. Then when I came back I couldn’t quite remember exactly how they all fit together. Lastly, my final presentation needed more time dedicated to it. I didn’t practice enough about what I was going to say. I should’ve made sure to mention all the key features of the app then planned out exactly when to say them.
Environments Track 