Today in class we got to present our final HiFi version of our narrative and app improvement. The whole process of evaluating and improving was extremely tedious and forced me to make sense of complex topics that I had never explored in such depth before. Since there were a lot of new lessons in this project, I gained a lot of knowledge in a short amount of time.

I have learned about a lot of components to environment design, and it has been difficult to implement them. Understanding and noticing thresholds took some time to get used to, but I feel myself becoming more comfortable with that concept. I also feel that explaining and creating hybrid environments can be tricky, but I think I can successfully identify them as well as their digital and physical components. How to communicate the meaning behind my idea for the application became very important to me. Personally, I do not see phone apps as doing much good, but when you have the broader context of the hybrid environment, the greater meaning is evident.

In addition to new concepts, I gained a lot of skills. I learned how to wireframe correctly with annotations. I also learned how to make Illustrator files look they are not photoshopped into a photo by lowering their opacity. I have never tried to make something I edited on my computer look photorealistic before, so I feel really confident now that I have that skill.

Thresholds come up a lot in class, and I think it is a very interesting concept. The point where change is noticed is a critical point in time where we can see the affects of all the variables in the larger network that surrounds us. A threshold that I noticed personally had to do with the development of my narrative. I learned that when you have a strong narrative, your direction becomes more confident and iterating becomes much faster. The more you work at the overall story and the clearer it becomes, the easier it gets to physically and digitally create the story that you are trying to visualize. Until that point, it can be hard to see what your direction is.

Throughout my process I try to take a pragmatic approach. I broke down all the steps and all the assignments into even smaller parts that were easier and faster to achieve. I also made sure that I felt comfortable with all of my process before I decided to move on and elaborate upon those ideas. I also made sure that I spoke with my peers and got their critique before I moved onto the next step in my process. I cannot always see everything or notice all the mistakes, and they always provide a new perspective that adds even more layers to my narrative.

There were many points where I felt that things were not falling into a logical sequence or my ideas were not connected. There were many times during the process when I felt frustrated or stuck. I encountered a lot of new problems that I had no idea how to solve. I really enjoy the environments thinking style, but it is more abstract and more difficult to wrap my head around.

Frequently I find that people around me are distractions. Some times whatever is going on around me will take my focus away from my work. I have to listen to music or take breaks in order for me to be able to have more control over where my focus is. When I am motivated it is much easier to focus. When I am working at something for a long amount of time and finally get to a point where I think it may be successful, I feel a lot more motivated to keep on working. Having smaller goals within the process also helps me continue to focus on work because I feel like I am being productive and using my time wisely.

Everything felt challenging in this project since it was all so new. I had to create an order that felt logical, flowed well, had good transitions, correctly sequencing all the visuals with the emotions (basically getting all the layers to match up), making a nice looking interface, making sure i had all the steps and making sure that what wasn’t shown was not imperative to the overall message, etc.

The project really made me realize why you need to have so many roles on a team because there is so much to get done and it all has to come together seamlessly.

Next time, I would have done some more hand drawn story boards. I think that is an important skill that I should be using in my work more often. I also would have liked to explore some other narratives. I picked mine because I needed it to proceed with the project, and there were infinite possibilities. I am more curious about how I would fit my narrative into other pieces of artwork on campus that might not be so explicitly connected to the city and its history.

Below are scenes from my SketchUp model of the environments studio.

My main stories for the studio are:

1. When the noise in studio reaches a certain threshold, the lights will dim until the noise level has dropped.
2. The group of students at each cluster will be coordinated with the lights next to the desk cluster. Whenever a student in the group makes a blog post, submits a project, etc. the lights will react by changing color, flickering, etc.
3. The whiteboard walls will also function as digital presentation boards that students can connect to and project their work on.

I started my process by printing out some different views of the space I created on Sketchup. Then I overlaid tracing paper and noted some things about the space. I tried to make note of all the different situations in the room; who would pass through, where certain things are located, if things are in the way of certain paths, how different areas were being used, etc. In this frame I decided to incorporate a collaborative area into the space. I pushed some of the desks back to accommodate this, and considered other possible changes to the space, noting the ample wall space, the projector, and the moving walls.

I tried to consider the possible changes of the projector and the sliding walls. From this exploration I started thinking about light, temperature control, traffic flow, and other things.

When analyzing a possible social environment for collaborative projects, I thought the incorporation of an interactive wall would be useful. I then started thinking about how to connect these physical items with the Smartthings tool on someone’s phone or computer.

Angles of the room

I think these explorations were really useful in terms of trying to understand the space and what changes or improvements could be made. I am still unclear as to how these changes could be illustrated in a narrative; I don’t have a clear idea about one single thing I want to make modifications to. I learned a lot about the Sketchup program while making my model and I think this tool will be very useful later.

Final

Reflection

Narrative HiFi Version 1.1

Process Narrative

This project was definitely a challenge for me but I learned quite a bit about Illustrator, Photoshop, and InDesign. I think the biggest issues I ran into were deciding what my narrative layout and my key or highlight moments were going to be. I also had some difficulty with finding angles or photos that worked best with whatever I was trying to convey. For example how much of the screen of the phone is reasonable to show compared to the background. For next time I would definitely play with the layout of the presentation and try and make my app interface a little more complex but understandable.

I have never used any kind of 3D modeling software, so I was starting from a blank slate when learning to use SketchUp. It was extremely difficult to learn how to use the new software. I haven’t learned new software since I first learned to use the Adobe Suite. I definitely forgot what it is like to be introduced to something so new. I think it was good to remember what it’s like to be really confused and lost. So much technology today is intuitive, but it is imperative to remember, especially in human-centered design, that not everyone has the same amount of basic knowledge as I do.

The second half of class was focused on our individual process thus far. What I took away was that I just need to go ahead with my final HiFi presentation. I have a wireframe sequence nailed down, and I already have a detailed story; the logical next step is to realize it with better photos and some illustrator renderings.

One thing that Peter said really stuck with me; he said that we have to design for the future meaning that we need to create a portfolio that is timeless. If we are already pushing technology past its limit, then we will be able to adapt and continue to think outside of the box.

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

Reflection