A4 Process

Looking at different ways of creating heat as well as maintaining heat.

Scan 3

Exploration of PEM, personal environmental module. How to move heating elements increase the mobility of the mechanical system.

Scan 1

Exploration of using individual bikes for power. Steve: “Heating air is incredibly inefficient”.

Scan

Different ways to generate energy through human power as well as heat the rest the human body with motion. Stationary pedals with generator. Heat and cooling fan powered in user controlled proportions.

Scan 1.2

User moves heating elements by hand, for direct contact with body. Cooling system initially set by human. Areas sweating will be added to “rotation list” for motion tracking list. Infrared or camera will detect excess sweat.

Scan 2

Demo Progress:

Stationary Pedal Exerciser. Although this will in no way power a fan or a heat generator, the pedals will serve to prove the feasibility of pedaling while working. Also, those pedaling while sitting will feel the heat they generate because of their muscles creating energy to pedal.

resistive-pedal-exerciser-stationary-bike-189381-MEDIUM

Cardboard prototype of crank

Design of crank as well as framing further direction of project.

Scan

Crank design out of cardboard taped to generator.

20151011_003152

Second test type of crank. This version felt far less unstable.

next

For my final cardboard prototypes I ended up shortening the length of the crank in order to for a user to more comfortably turn the crank.

20151016_133051

This is my preliminary proof of concept demo. While the crank is a final product, the fan itself is bent paper taped to the front of a motor. This proves the viability of using human energy to power a fan.

I explored the possibilities of charging batteries or storing charge over time. However, through looking at how warmth would be produced, I reasoned that a direct transfer of energy would be most effective in heating a human. I also began to specifically define what my heating system would be capable of.

Scan 3

I had trouble defining how the fans or heating would work in specifics. While I worked through many different issues I had difficulty showing my design process in my final project.

Scan 4

Here I looked at the user and what they would be experiencing when using the heat system.
Scan 5

I finally created a wireframe concept that I felt content with that involved manipulating a thermal image of the user. However, these wireframes didn’t make it to the final because they weren’t essential to the story I was trying to tell.

Scan 6

Initial wireframes. The three main avenues I wanted to capture were quick heat manipulation, and specific heating and cooling settings.R2Wireframes

Personal critique of wireframes.

scan7 2.1

Idea to use analog knob in order to alter temperature while giving digital feedback. The standard interface of the app could be displayed with AR.

scan7 1

I finally began my storyboarding process, finding the key moments that would define what my story was was. I tried to use the quote: “You’re not telling the truth, you’re telling a story” in order to guide my storyboarding process.

scan7 2

Continued storyboarding of key events.

scan7 3

I revisited my app interface late in the project. I ended up wasting time trying to polish a relatively insignificant part of my final project.

scan7

Continuing work on the heat dial.scan7 4

Storyboard index cards. The middle three rows were the main storyline. So the shot order is left to right row of 3, row of 1, and row of 5. The two index cards in the middle were alternates.

20151022_164803

These are the storyboards annotated with stage directions and the meanings behind what I wanted to show with each shot.

20151019_200638

My initial dial for a user to determine how much heat they wanted. The red was meant to represent heat and would be the unit of measure since the user would heat themselves with the pedals as well as a heating pad, while just the fan produced cool air. However, after talking with classmates, I reasoned that the design was too ambiguous to be used.

Point1 5.13.20 AM

Final version of my InVision app wireframes.

Screenshot_2015-10-20-00-08-59

Final Video

Credit for Arduino and Processing code:
http://www.instructables.com/id/Overview/?ALLSTEPS

Inspirations:

Pedal Powered Generator – The Power Box

http://www.cnn.com/2014/03/14/tech/innovation/wireless-electricity/

logo

I wanted to reduce the heating costs of a building and bring about energy consumption awareness.
Reflection

   What
I learned how to “tell a design story”, storyboard videos, use InVision, wire arduino and motors, and the basics on how to shoot a design video.
    How
Critiques and guidance from professors helped with how to construct and storyboard a design story. Classmates in design helped with InVision while a friend in electrical and computer engineering helped with the arduino wiring. I looked to many different videos online as inspiration for my final product.
    When
Most of the new skills I learned  within the last week and a half of the project.
 
Regulation
    Planning
My planning for this project went well until the last week. I had a frisbee tournament the weekend before the project was due, taking up at least 20 hours as well as leaving me tired. That left me with much less time than I wish I had for the video.
    Assessing
In looking over my work I would sometimes get overly obsessive about details that didn’t matter in the final project such as my wireframes or the exact workings of my heat system. This wasted significant time that could’ve been devoted to other tasks.
    What would you do diff
Experience
    Emotions felt
I felt a fair amount of stress especially because the final project culminated a video. I wasn’t sure what I was doing with the arduino and thus felt out of my league, contributing to the stress. The video component of the project was stressful as I wanted to only shoot during the daytime in order to have better lighting. However, now looking back at my work, I feel content in what I was able to accomplish given the circumstances.
    Distractions
I was distracted by minute details in my interface design, specifically the design of the heating control. I also spent too much time making my InVision app look realistic, such as adding color to my on and off switches.
    Motivation
Overall throughout the project I felt incredibly motivated to work. My motivation dipped when researching different competing products and around 4:00 am the day before the final show. The other bike products that produced energy made me feel as if I wasn’t innovating any form of new design. At 4:00 am I lost my motivation to edit my video in After Effects due to tiredness. However, I felt driven the next morning after sleeping a couple hours.
    What were you challenged by?
I was challenged by how to evolve a concept into a story in design and how to tell it. That encompassed tying together and showcasing many different ideas I had about how to improve the heating in studio. Even finishing certain aspects of my concept, finalizing what I would be showcasing was difficult for me. The shooting and editing of the final video was challenging in that I felt I wasn’t quite getting the perfect shot.
    What did you do well?
I felt that I stretched myself and my abilities for the final show and am proud that I got all the mechanical components of the project to work while hiding the components of the system. Also, I was happy with how my demo pieces appeared.
 
    What would you do differently?
In the future I would prioritize my time, spending a proportionate amount of time on significant parts of the project. I spent too much time on app design and not enough time on my final storyboarding, editing, and shooting. Being able to quickly produce work that is passable for it’s role in a project will benefit me in the future. Finally, I will opt out of extracurriculars if I have a final project due soon, even if there are social consequences.
Advertisements

Healthy Ride Pittsburgh

Healthy Ride Pittsburgh

Healthy Ride Pittsburgh is a new bike sharing service owned by Pittsburgh Bike Share. A German company, Nextbike, supplies the bikes as well as an app.

Healthy-Ride-Logo (1)

Nextbike_logo_circle

DSC_4252

There are stations in Downtown Pittsburgh, East Liberty, Shadyside, and Oakland.

MapDetailed-Google-LARGE-Noedit

“Nextbike” is the app that can be downloaded in order to rent bikes from a smartphone (apple or android). Using the nextbike app, according to online reviews, is far more simple than trying to use the physical kiosk. This image greets users for one second upon opening the app.

Screenshot_2015-09-22-22-39-13

Google maps and it’s UX is used. Pinch, drag, and other interface controls are the same.

Screenshot_2015-09-24-18-40-41

After tapping on a bike station icon the popup centers on the page and lists the number of bikes at the station as well as when that number was updated.

Screenshot_2015-09-23-11-10-56

A Healthy Ride bike while locked into a bike station.

DSC_4251

By downloading the app, users can bypass using the kiosk. I didn’t ever use the kiosk when testing the system.

DSC_4253

The back of a bike. The number “70309” is the bike’s specific identification number, while the keypad is for using the cable lock.

DSC_4254

After registering a profile, including credit card information, this is the initial home and start screen upon opening next bike.

Screenshot_2015-09-29-01-03-43

Pulling out of bike was easy for me, no technological or mechanical problems. After tapping “Start new rental” the screen jumps to here.

Screenshot_2015-09-23-11-17-38

On the website FAQ, Healthy Ride instructs users to not use the cable locks as the software is faulty, yet, after renting a bike through the app there isn’t any form of notification to warn users. The cable locking device even is the most prominently displayed information on the page, (biggest font, bold) increasing the confusion.

Screen Shot 2015-09-29 at 1.15.04 AM

I didn’t see the warning online, so I tested the lock and didn’t experience any problems. The lock discourages theft as even if a thief cut the thinner bike wire, the solid bolt between the spokes would be much more difficult to remove.

DSC_4274

A closer look at the cable lock keypad.

DSC_4265

While riding the bike:

A user can track their location through an overhead map, but the connection between the physical and digital world isn’t very informative. There are no cues for navigating to a nearby bike station.

Screenshot_2015-09-23-11-34-26

Bikes can be returned by pushing the fork of the bike into any locking mechanism at a station. I held the bike in the station locking dock for a few seconds until the lock activated.

DSC_4277

Online reviews and community feedback.

Yelp reviews were primarily negative, although two people did appreciate the feeling of freedom and joy while riding a bike through the streets. Almost all the complaints were about mechanical or technological issues when using the bikes, bike locks, kiosk number pads, or bike station locking mechanisms.

Screen Shot 2015-09-29 at 12.43.08 AM

Screen Shot 2015-09-29 at 12.43.57 AM

Screen Shot 2015-09-29 at 12.44.37 AM

Members of an online community called the “Voice of the Region” were almost entirely negative, although most of the comments didn’t seem to be specific to Healthy Ride and almost all weren’t actual users of the service.

Screen Shot 2015-09-29 at 12.55.15 AM

Screen Shot 2015-09-29 at 12.48.02 AM

Screen Shot 2015-09-29 at 12.48.28 AM

Reddit users were far more supportive of Healthy Ride and also didn’t have any major complaints about the mechanics of the bike. They also noted the popularity of Healthy Ride throughout Pittsburgh.

Screen Shot 2015-09-29 at 12.45.15 AM

Screen Shot 2015-09-29 at 12.46.55 AM

Screen Shot 2015-09-29 at 12.47.28 AM

Sketchbook Process

I first looked at the boundaries and constraints of the physical and digital environment.

driver-sketch 2

In order to show an overview of the digital and physical environment of Healthy Ride, I created a storyboard that highlighted which parts of an interaction would be considered digital or physical.

driver-sketch 3.3

To further my understanding of the environment, I mapped the digital and physical entrances and exits.

driver-sketch 3.4

I broke down the key variables affecting the system and necessary services required of an average experience using Health Ride. I also recapped my findings from online user reviews.

driver-sketch 4

My personal experience with Healthy Ride was overall positive. The absence of a timer on the bike was worrying as I didn’t want to ride for more than 30 minutes and have to pay another $2. Riding a bike was freeing and I didn’t have any mechanical or digital problems when riding. However, I didn’t navigate to a different bike station or have any time pressure.

driver-sketch 5

I had many new ideas and problems to consider after the in-class critique. The primary questions raised were:

  • What would be considered a successful bike sharing system?
  • How do you navigate while driving?
  • How do you deal with maintaining an even distribution of bikes amongst stations?
  • How can other forms of payment besides credit cards be accepted?
  • How is illegal activity on bikes dealt with?
  • How do you evaluate customer reviews?
  • Do you need a smartphone to us this service?

I answered most of these questions in my sketchbook.

34 1

While continuing to examine nextbike I decided to pretend as if the mechanical components of the bikes, locks, and stations worked perfectly. I hypothesized that users didn’t report having trouble navigating through the environment because they were too busy being frustrated with the physical aspects of the bikes.

34 2

To improve user connection to the digital as well as physical, I added the ability to input a destination into the app.

34

In investigating ways of mounting a phone on a bike I ran into trouble with how to position the phone on the bike as well how to eliminate camera shake. After initially taping a phone to the handlebars, the camera shook violently, forcing me to reevaluate the viability of mounting a phone onto a bike.

34 3

My proposal consisted of creating a navigational app with augmented reality that would complement nextbike.

Proposal Final

https://vimeo.com/143213884

bike logo

In creating an augmented reality navigation system for Healthy Ride I hoped to provide a safer, more fun way to receive directions while biking.

Reflection

Knowledge
What
For A3 I learned about mapping physical and digital spaces together as well as how to use After Effects.
How
In order to explore how the physical and digital environment was composed I used then analyzed the different components of the service, took photos, explored Healthy Ride’s website, and researched customer reviews on multiple websites. To learn After Effects I used lynda.com.
When
All of my project came together in a little over a week. The Wizard of Oz video I created was edited after the due date with in order to more fully represent my idea. I wasn’t able to successfully use After Effects the night before the project.
Regulation
Planning
In completing A3 I believe that I planned well until the last few days before the due date, considering I only gave myself a little over a week to work. I spread out my researching and exploration of the environment over several days, but didn’t shoot my video for the final presentation until the last day. Then, I didn’t seek out the After Effects help I needed, instead trying to figure out how to render on my own.
Assessing
I had to re-assesse many of my design ideas for how to mount a phone on a bike. There were many issues such as video stability and video angle that I didn’t consider until I actually tried taping a phone to the handlebars. Furthermore I had to change my focus of the project, ignoring user complaints about mechanical problems, working instead on digital and physical space interaction.
Experience
Emotions
I felt content with my work until the day before the project was due, when I felt stressed and frustrated. Most of my anger was directed towards After Effects, but after sleeping solidly the day after I felt excited about learning how to use After Effects.
Distractions
My distractions were learning After Effects and my other environments project. I got caught up trying to learn how to use motion tracking when in reality I only needed to place arrows onto the screen at different times. Also, I didn’t invest any time in A3 because I was busy thinking about other environments projects.
Motivation
I became motivated during the beginning of the project when analyzing the environment and kept my motivation throughout the project. However, I was demotivated while first trying to learn After Effects and when I researched navigational augmented reality, which was already “old” technology by now.
What were you challenged by?
I was challenged by the time crunch of understanding a space then proposing a meaningful change within it.  Figuring out how defined a design proposal should be was another challenge I had trouble with. I wasn’t sure how many details or steps to show as far as final wireframes and storyboards.
What did you do well?
I was proud of the depth of my exploration for the current system in place as well as the final video I created.
What would you do differently?
I should’ve done a brief study of the environment before the week the project was due. This would’ve at least started the thinking process for how to improve the environment. Next, after shooting video, I didn’t immediately check my footage to ensure quality. Thus I had to return in the morning to retake video which wasted time. Finally, for my last deliverable, I will learn how to render my final before the last day as attempting to learn technology the night of the due date hasn’t worked for me in the past.

Studio Redesign reflection

Green Heat:
I wanted to improve studio by catering individually to each user’s heating needs in order to save energy.
logo
    What
This project I learned how to use sketchup and how to “wizard of oz” demos. I also fully realized the importance of documentation/aesthetic quality of a final project.
    How
I used simple drawing as well as software such as sketchup and adobe premiere. I learned sketchup and adobe premiere effects through inclass instruction as well as online tutorials. The significance of final documentation was learned through videos shown in class and comparing my work with my classmates.
    When
I learned sketchup and adobe premiere effects within the two week period of the project.
    Planning
I didn’t plan far enough in advance for this project. Too much time went into worrying about how exact the sketchup recreation of the studio needed to be.
    Assessing
I didn’t personally assess my own work enough, but I did get a fair amount of critique from my peers. The critiques helped open my mind to different aspects of my initial idea. I did assess the validity of the in-class critiques in order to further my understanding on my idea as well as to see which critiques were worth pursuing.
    Emotions
In the beginning of the project I felt a sense of futility, but I began to regain my optimism by the end of the project. The feelings of futility were based in my initial interpretation towards the task of “improving the studio”. I personally have great appreciation for the current studio environment as few other majors have dedicated workspace for their use. My optimism and enthusiasm towards the project was increased after I switched my focus towards promoting green activity in the studio.
    Distractions
Work in other classes began to pick up, but for the most part I procrastinated because I didn’t feel too excited about the project.
    Motivation
When starting this project I had reduced motivation, as I was still feeling a little bit stressed about the ending of the last project. My motivation picked up towards the end of the project, but I wasn’t as motivated as I was for A1.
    What were you challenged by?
I struggled to find a sense of meaning in the project as well as to find an effective way to demo my idea. When hearing about others’ ideas as well as considering my own I would ask myself, “do I really need this”?. The truth was that most of the technology was unnecessary. I had trouble creating green technology that was reasonably grounded in reality as well as finding effective ways to demo it.
    What did you do well?
I had pride in my attempt to save energy in a significant way, as I researched many different methods of saving electricity and focused on some of the most impactful ways.
    What would you do differently?
I definitely need to start out projects with more enthusiasm than I did with A2. With enthusiasm I can shape a project towards what I want to do, starting without energy only stalled my progress. Also my process work was lacking in this project, too few options and ideas were covered in my sketchbook. Finally, I will seek out more feedback on my work throughout the project. Multiple critiques will keep me motivated as well as make sure I’m not straying off my main idea or losing a sense of reality or imagination.

A2: Studio Redesign

For this project we were tasked with improving the studio space. How we were to design the “studio of the future” was left open-ended.

In this rough storyboard our user enters studio. There are three people in studio already, one standing in front of the fan in order to stay cool.

trial

The user sits down at their desk to begin work.

Screen Shot 2015-09-16 at 11.57.50 PM

However, after a short amount of time the user becomes sleepy and takes a quick nap on their desk. While the user is sleeping the rest of the students leave the studio.

trial2

Since the user was relatively motionless in their chair when sleeping, SmartThings didn’t detect any motion and turned off the lights. The fan has also been turned off.

trial3

The door, originally left open, was shut and locked automatically after 30 minutes after SmartThings didn’t detect any motion.

trial4

After the first crit I decided to go beyond my first iteration and looked through many different changes I could make to studio that I found interesting. Most were about saving energy and didn’t even use any technology.

7

8

I concluded that the two best ways to reduce energy use in the studio was through the lights and heating. I believe these would have the largest “pay-off” in energy saved.

One of the challenges I faced was conflicting information towards how the human body lost heat.

9

My idea for the heating involved shutting off the heating of the overall room entirely, instead catering to each individuals need in the studio. This would save energy as only those present would use enough heat for themselves.

10

Here the user has sat down to work the camera has just finished calibrating. Once the camera calibrates, the fan heater follows the user’s head movement as people will probably take off any scarf or mask that would cover their face. Since that part of their skin is exposed, it will lose heat.

track1

The camera adjusts the heat of the fan by detecting shivers (involuntary movements by humans to stay warm) of the user. This will prevent excessive heating.

track2

The camera detected movement and thus the heat fan adjusted.track3

Since the forearms and hands of people may be uncovered in the wintertime even while indoors, body heat would be lost from there. In order to only selectively heat those uncovered body parts, I thought of a tabletop with heating elements underneath and motion sensors on top.

whole desk fin

The motion sensors would detect cold parts of the arm and selectively heat body parts in quantities proportional to how cold they were. In this instance the user’s hand is colder than their forearm.small highlight

My classmates had lots of different questions and critiques for me that I hadn’t considered or had dismissed as irrelevant earlier. Some of the most notable concerns I heard were:

  • Awkwardness and possible discomfort (drying of skin) of a heat fan following around the face of the user
  • How exactly the heating element would be applied to the table, some users wanted to retain the wood tabletop
  • Some users felt cold in their legs and feet, not in their hands, forearms, or head
  • How the app would heat body parts instead of design supplies, possibility of damaging design supplies

10

I worked through most but not all of the issues I was alerted to through feedback. My solutions, illustrated and diagramed below were:

  • For the heating of the head, I didn’t arrive at a solution I was comfortable with. I experimented with an even more awkward device in which a series of heating strips would form a “helmet” of heat around your head and track your movement. The feeling would be akin to the matrix in which a user’s head would become completely immersed with heat and connected to their seat.
  • In defining how the heating elements would be implemented, I settled on the idea of a rigid heating element that could be slid in and out of tables. The heating element would be half an inch below the wood in order to prevent accidental cutting of the element as well as preserve the wooden feel of the desktop.
  • In addition to a slit being cut in the desk, a space underneath the floor could contain another heating element that could track the movement of feet. After further researching body heat, I believe that heating the soles of users’ feet (which are very sensitive to heat) will fool the body into thinking that their legs are warm too.
  • Finally, in order to give more user control I reasoned that an app could be used to control temperature of the heating element, determine which areas to heat or not, and calibrate the heating element to track certain body parts. This app could coincide with IFTTT in that a preset temperature for the heating element could be set based on the current weather conditions.

11

For my demonstration I used the “Wizard of Oz”ing technique in which I added effects to a video. This demo shows the specific heat tracking technology in use. Only the user’s right hand has been calibrated to be heated, thus the rest of the desk or user’s body isn’t heated.

https://youtu.be/Atq1IaqjdgE

logo

I wanted to improve studio by catering individually to each user’s heating needs in order to save energy.

Reflection

What
This project I learned how to use sketchup and how to “wizard of oz” demos. I also fully realized the importance of documentation/aesthetic quality of a final project.
    How
I used simple drawing as well as software such as sketchup and adobe premiere. I learned sketchup and adobe premiere effects through inclass instruction as well as online tutorials. The significance of final documentation was learned through videos shown in class and comparing my work with my classmates.
    When
I learned sketchup and adobe premiere effects within the two week period of the project.
    Planning
I didn’t plan far enough in advance for this project. Too much time went into worrying about how exact the sketchup recreation of the studio needed to be.
    Assessing
I didn’t personally assess my own work enough, but I did get a fair amount of critique from my peers. The critiques helped open my mind to different aspects of my initial idea. I did assess the validity of the in-class critiques in order to further my understanding on my idea as well as to see which critiques were worth pursuing.
    Emotions
In the beginning of the project I felt a sense of futility, but I began to regain my optimism by the end of the project. The feelings of futility were based in my initial interpretation towards the task of “improving the studio”. I personally have great appreciation for the current studio environment as few other majors have dedicated workspace for their use. My optimism and enthusiasm towards the project was increased after I switched my focus towards promoting green activity in the studio.
    Distractions
Work in other classes began to pick up, but for the most part I procrastinated because I didn’t feel too excited about the project.
    Motivation
When starting this project I had reduced motivation, as I was still feeling a little bit stressed about the ending of the last project. My motivation picked up towards the end of the project, but I wasn’t as motivated as I was for A1.
    What were you challenged by?
I struggled to find a sense of meaning in the project as well as to find an effective way to demo my idea. When hearing about others’ ideas as well as considering my own I would ask myself, “do I really need this”?. The truth was that most of the technology was unnecessary. I had trouble creating green technology that was reasonably grounded in reality as well as finding effective ways to demo it.
    What did you do well?
I had pride in my attempt to save energy in a significant way, as I researched many different methods of saving electricity and focused on some of the most impactful ways.
    What would you do differently?
I definitely need to start out projects with more enthusiasm than I did with A2. With enthusiasm I can shape a project towards what I want to do, starting without energy only stalled my progress. Also my process work was lacking in this project, too few options and ideas were covered in my sketchbook. Finally, I will seek out more feedback on my work throughout the project. Multiple critiques will keep me motivated as well as make sure I’m not straying off my main idea or losing a sense of reality or imagination.

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.
 

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.

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

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

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