Reflection 9.15

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.

SketchUp Studio Model and Beginning Narratives

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

Screen Shot 2015-09-16 at 10.46.22 PM    Screen Shot 2015-09-16 at 10.47.05 PM Screen Shot 2015-09-16 at 10.47.58 PM   Screen Shot 2015-09-16 at 10.48.13 PM

IMG_5324

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.

Studio Redesign

floor plan changes

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.

sliding doors projector view

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.

social area boards view

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 Presentation

Final

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.
Icon
My intention in redesigning Tiramisu was to increase the usage of public transportation in Pittsburgh.
 

HiFi Presentation Process

After the last critique, I decided that I needed a more concrete wireframe sequence. So, I took my story that I had developed and matched each highlight point with a different wireframe.

FullSizeRender

I included full annotations and descriptions of the actions that the user would complete to move through the sequence. The image below shows the addition of my notes of the narration for each point.

FullSizeRender-1

Once I felt comfortable with my wire frames, I went out and took new pictures keeping in mind the critique that my peers and I were given in class.

gilly8   gilly9   gilly1

After taking many photos, I began to construct my high fidelity (HiFi) presentation. I started with creating wireframes in Illustrator.

wireframe1   wireframe12   wireframe13   wireframe14   wireframe15  wireframe16   wireframe17

My goal was to create a sequence that directed the user through the space as well as teaching them about the art that they were about to experience. Thus, the user has some knowledge before they arrive at the art, allowing for a more thoughtful understanding.

Then, I started to pair the wire frames with the photos that I took in the place where my narrative happens.

story board process             story board process2           story board process3

This helped me to see the relationships and the parallels between what the user was experiencing through their phone and the physical world. Taking this organization, I started to create my final presentation. The final presentation shows the connecting thoughts and actions between the digital and physical environments. I added some graphics to the wireframes and photos in the same color (green) to show the presence of the connection throughout the narrative. The goal for this app is to create a hybrid environment where the optimal level of learning and appreciation take place.

Final Narrative HiFi Presentation/Process

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.

Reflection 9.10

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.

A1: Tiramisu

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.

Screenshot_2015-09-04-17-48-51

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.

Screenshot_2015-09-02-12-55-30

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.

20150902_125539

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.

Screenshot_2015-09-02-13-03-42

This is the bus that would take me back to Carnegie Mellon University.

20150907_172843

The bus I wanted to take would switch between showing these messages on its front as well as “GO BUCS”.

20150907_172844

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”.

20150907_172451

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.

Scan 7 Scan 9

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.

img002 img003 img004 img005 img006

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.

Scan 2

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.

Scan 3

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.

Scan 4

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.

img022

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.

img023

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.

img021

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.

img024

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.

img026

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.

img025

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.

img001

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.

img028

After each beep, the words “Run!” appear in between each second to emphasize urgency.

img029

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”.

img030

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.

img031

Once the bus passes one stop before the final bus stop, the green box will flash and a notification will sound.

img032

After the cord is pulled the green box flashes again, telling the user to walk to the front of the bus.

img033

Finally, after exiting bus, walking navigation is given to the user.

img034

This is the wireframe layout as a user could move through it.

Full layout

Tiramisu Storyboards

This is my initial in-class storyboard about using a modified version of the Tiramisu bus mapping app.

img006

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.

Scan 1

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.

img005

My final story board attempted to convey the ease of using Tiramisu and the feelings of empowerment after successfully using public transit.

img004

A composite of my story board and corresponding wireframes is on the link below.

story + wire

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.

photostoryboard

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.

1

Carnegie Mellon University is typed in and entered as a destination.

2

The user can follow along while walking with built in navigation.

3

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.

4

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.

5

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.

6

A notification is given to pull the cord once the bus passes one stop before the actual stop.

7

8

After successfully returning to Carnegie Mellon, the user feels empowered with his ability to use the public transportation system in Pittsburgh.

9

Final upload

Icon

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.