Week 3: Future Scenarios & Artifacts

I am getting very excited for the development of this project now that I’m working with a topic I enjoy researching and exploring. I decided to study the future world where nobody sits, which is based on our growing current concern with our deadly sedentary lifestyles. From this broad idea, I narrowed it down to a very realistic future to a very unlikely, sort of wacky world, where everything is designed standing up.

Below are the slides I put together which include 10 prototype future scenarios based on this world, lifestyle, and artifacts.

screen-shot-2016-09-29-at-9-22-37-pm

screen-shot-2016-09-29-at-9-23-19-pm

screen-shot-2016-09-29-at-9-23-12-pm

screen-shot-2016-09-29-at-9-23-31-pm

screen-shot-2016-09-29-at-9-23-38-pm

screen-shot-2016-09-29-at-9-23-49-pm

screen-shot-2016-09-29-at-9-25-02-pm

screen-shot-2016-09-29-at-9-24-54-pm

screen-shot-2016-09-29-at-9-24-43-pm

screen-shot-2016-09-29-at-9-24-34-pm

screen-shot-2016-09-29-at-9-24-19-pm

screen-shot-2016-09-29-at-9-23-58-pm

screen-shot-2016-09-29-at-9-24-08-pm

Week 2: White Balance

Other than the actual assignment, my first challenge this week was actually getting to know the camera. I learned that I knew just about nothing about taking pictures. I had a mini learning session with Rebecca who gave me an overview about F-Stops, Aperture, and ISO settings. It took me some time to understand how to use them and I ended up taking a lot of pictures before even getting to the White Balance assignment.

Below are the first photos I took. The one of the left is with Tungsten White Balance and the one on the right is AWB. I then realized that every picture I have ever taken at ITP has been wrong–I thought the floor was really that orange.

1o3a7891 1o3a7892Custom White Balance

1o3a7999

Auto White Balance

1o3a7998

Experimenting with White Balance

Auto White balance

1o3a7978

Custom white balance: using brown as the “white”.

I wanted to experiment with using custom white balance to help understand what really happens. I adjusted the white balance by using this brown piece of cardboard.

1o3a7977

When I used custom white balance, the picture turned out very blue.

1o3a7979

I did the same with purple. Below I took a picture of something purple and then used that to adjust the white balance.

1o3a7964

Then I took a picture with the custom white balance, which showed the image as green.

1o3a7965

AWB vs Custom White Balance

I decided to take some photos of this flower I found on the floor. Since I don’t know much about cameras I did some research about aperture, F-Stops, and ISO. The floor was pretty dark, so I put the ISO=1600, aperture= 1/80, and F3.5.

F/8 (very dark)

1o3a8027

F/5.6 (dark)

1o3a8024

Auto White Balance:

1o3a8039

Custom White balance:

1o3a8034

1o3a8040

To make sure I was really understanding, I decided to take some other photos that had more going on in the photo.

Assignment

After getting more comfortable with setting custom white balance, I took the photos below. The one of the left is with AWB and the right is Custom. I noticed that with Custom WB there seem to be more blues in the photo, whereas the AWB has more yellows and oranges. I think I have gravitated toward the picture on the left because it’s brighter, which makes sense now knowing more about color temperature. However, I know now that I can achieve that in manual settings by using the right FStop and Aperture. What’s also interesting about these photos is comparing the white background. It makes it much easier to see that the right (custom) picture is more accurate, as the one on the left (AWB) looks more yellow.

1o3a8053        1o3a8054

Auto White Balance

1o3a8053

screen-shot-2016-09-24-at-2-28-48-pm

Custom White Balance

1o3a8054

screen-shot-2016-09-24-at-2-29-17-pm

Auto White Balance

1o3a8048

Custom White Balance

1o3a8047

I took the picture below with F10, 1/1000, and 3200 ISO. It took me about 40 tries to get the exposure right. By changing the ISO to 1600 the histogram changed dramatically–the image appeared darker. By changing the camera settings the images looked either too bright, sometimes even all white, or very dark. For example with F10, 1/3200, and 1600 ISO, the curtains in the photo are very dark with a vast contrast to the blue outside. All in all I found this to be difficult because it was very bright outside. I am curious to learn the best way to take pictures like this. It’s either that the blue sky is very clear or the curtain detail is too dark.

di_3

 

 

Week 3: Becoming Live

This week was pretty challenging for me. Understanding the difference between AJAX and WebSockets. Joining Digital Ocean. Connecting to the server. I ran into a few bumps in the process of setting things up, one of which being that I needed re-install Cyberduck on this computer, after having not used it since last spring. Eventually all of that was done and it was just a matter of getting the code from class to work. (Spoiler alert: this blog will mainly be asking a lot of questions).

When I start the node server and reload the page, it runs, but I get this error:

GET http://192.34.62.149:8080/favicon.ico 500 (Internal Server Error)

When I type in a message it works, but I couldn’t figure out how get each message to go to the next line. I tried adding a 100% margin in CSS and a few functions in Javascript, but nothing worked.

So this is what it looks like:

screen-shot-2016-09-19-at-11-59-50-pm

The good thing is that it does work. I tested it out with some friends and they can send and receive my messages.

screencapture-192-34-62-149-8080-index-html-1474383822364

screencapture-192-34-62-149-8080-index-html-1474383678637

screencapture-192-34-62-149-8080-index-html-1474384057599

http://192.34.62.149:8080/index.html

Week 1

“The hurricane is coming, you have 20 minutes, get your stuff and go. You’re not going to be saying, ‘Well, that got an amazing write-up in this design blog’” –Objectified

Good design:

For this aspect of the assignment I decided to dissect the design of the BMW experience. This is more about how I feel, or my emotional journey of starting a BMW. This is a newer car, I believe a 2014 model, which means it has cool features like pushing a button to turn on the ignition, and controlling the temperate of heated seats.

I’m going to describe a few parts of the experience:

  • Opening the car door
  • Starting the ignition
  • Turning on/controlling the A/C and car temperature
  • Switching the gears from Park, Drive, Reverse, Park

The first part of the experience which is not pictured is opening the car door. There is no traditional key, I just need to have the key on my person. I actually had the key in a pocket in my backpack and all I need to do is pull the handle on the door. It typically unlocks the car right away. Sometimes I need to take the key out and put it closer to the car if the motion sensor in the car is not working properly (I’m guessing this is what happens).

img_5285

Next I turn on the car. This is super easy and kind of amazing. There is a button behind the steering wheel, in about the same place as where you would be keys in a traditionally designed car. If you press the button without your foot on the brake it will just turn the car battery on. Meaning you can listen to the radio, but cannot switch any gears. (Seen below)

img_5289

If you want to turn the ignition on, you must press down on the brake while pressing the button. As you can see in the image below, it gives the user more information– the indication that there are more features to use now that the ignition is on.

img_5293

Now that the car is on, let’s turn on the A/C and make the car comfortable.

First control the temperature by simply turning the knob that corresponds with your location of either passenger or driver.

Driver (left)

img_5299

Passenger (right)

img_5303

Now you can control the fan.

Increase air flow

img_5302

Decrease air flow

img_5300

The buttons indicate which air direction is selected. Below it shows that all three on selected, which means the air is flowing to your feet, to your legs/lower half, and upper body.

img_5304

Finally if you want to turn on the A/C simply press the A/C button.

What is nice about all of these buttons is that there is a light indicator letting the user know that that feature is on. This is a very familiar feedback loop and even though there are many selections to make, it is simple and fast to make them.

img_5301

Now to start the car. The joystick in the center is no different than any other joystick in a car I have seen. The unique difference is the interaction. What I really like about this is that because it is a familiar design, it invites a user to interact with it. It’s likely a user knows it must move back and forth in order to change gears. However, this is different because its location is always the same–meaning to change from Park to Drive, you simply tilt it backward and to go from Park to Rear, you tilt it forward.

img_5295

Tilt forward to Rear

img_5297

Tilt backward to Drive

img_5296

And to park, simply press the “P” button on the top of the stick.

img_5298

Another example of Interaction Design I have been thinking about lately is the flow of coffee shops and restaurants, more specifically how people order food or drinks. I tend to get slightly nervous when I go to stand in line and order something. Sometimes it’s not knowing how to pronounce something, or when you have to say slightly-embarrassing names, like “FAT BURNER” or “HANGOVER HELPER”. If I am not hungover, I feel weird to order the juice named that, as it implies I am ordering it while being hungover. But this is beside the point. I also think about how an establishment designed the experience of ordering; how do they welcome people to feel comfortable ordering, even ridiculously named items?

Bad Design

At the Bean coffee in Willaimsburg here is the ordering counter from left to right. The menu stretches from almost the entire counter starting from behind the dessert display. I am pretty near-sided and can barely read any of the menu all the way to the left. The interesting thing is that the items most visible are very standard coffee shop items, Hot: coffee, tea, espresso, americano, etc. Iced: Coffee, tea, latte, mocha, etc. Although people read this off the menu, typically these are items a user already knows they want or don’t want. The Bean has a variety of innovative Smoothies, Coffee Smoothies, Acai Smoothies, Juices, and Smoothie bowls. These are also the most pricey items, yet they are the hardest to read. I can’t help but wonder why they designed the menu like this.

I am especially curious about the “Smoothie Bowls” sign pictured in the picture on the left. Customers are standing from the center to the right of the counter. If there are more than two people in line, it moves a person back even further to the right, which means by the time a person gets to the counter they might not have any clue of what to order, as they hadn’t been able to distinguish anything on the menu. Why not move the free-standing menu all the way to the right? I would be curious to learn if this would increase sales on those items.

img_5306 img_5307

Bad/Good Design?

Another design I’d like to briefly discuss is the UMBRELLA. I have always thought the umbrella was such a funny thing we have naturally adopted to our society. It’s used different for some cultures, typically based on climate, as in it’s usually used to protect from rain but some use it to protect from sun. For whatever reason I still feel more comfortable using it as a way to protect from sun, even though I don’t even use the umbrella for that. Similarly to the discussion in Objectified about the toothbrush, for umbrellas, it seems that cost and advancements to the umbrella are based on the grip and also the spring mechanism used to open and close the umbrella. We all know a cheap umbrella won’t last by either the spring breaking, or the metal rods bending and no longer supporting the top cover. It’s definitely fits the bill with being a simple design, as it essentially is just a cover we hold. What I find interesting is that no one has come out with a design where we don’t have to hold the umbrella. I mean, seriously, how many umbrellas are we going to lose before someone re-designs it?

Design evolution of cameras

Digital cameras vs. Film Cameras

 

Week 1: NYC Systems

Besides the beautiful arrangement of baked delights, the wood and glass case that holds them has a story. It came from a neighboring lingerie store that was going out of business and now, rather than panties, it offers something equally enticing.

Besides the beautiful arrangement of baked delights, the wood and glass case that holds them has a story. It came from a neighboring lingerie store that was going out of business and now, rather than panties, it offers something equally enticing.

It’s all about getting what you want, whenever you want. A bodega is located at most corners, where you can buy most of your groceries, and pet the store’s pet cat. In fancier neighborhoods, you can visit a Sunac or Khim’s, where you can buy sushi, a green juice, and toothpaste. And if none of that works, you can also order from any restaurant in the area from Seamless.

When I think of New York City, I can’t help but think of food. The food culture of NYC is undoubtedly strong and the system of ordering food is very unique. As a fast, ruthless city, we want our food fast, yet New Yorkers tend to not compromise certain ideals–We want our food fast and at least 9.0 rating on Foursquare.

Let’s consider all of the types places you can get food in New York: family-owned bodegas and restaurants, food trucks, coffee shops, franchised restaurants, etc. Not to mention delivery services, most popularly, Seamless.

When there are a thousand coffee shops in Brooklyn, how does one stand out?

Recently I met a few friends at a Bakery in Williamsburg, cleverly named, Bakeri. It has various types of coffee drinks, savory, and sweet pastries. I ordered a small iced coffee and a savory tart. After I ordered I was handed a metal stand with a beautifully designed card with the number “13”. At most places, like the many franchise restaurants surrounding the NYU campus, the user flow is typically:

  1. Stand in line
  2. Order standing up
  3. Pay for order
  4. Asked if you are staying or leaving (optional)
  5. Stay and sit at a table (regardless of previous answer)
  6. Leave with food

However, at Bakeri when I tried to pay, I was told that I will pay when I leave. This I believe, was designed to give patrons the feeling that this coffee shop was different than others. I sat down at a table in the garden backyard where I was brought my coffee and pastry. Upon leaving, my friends and I nearly walked out without paying. We were in no position to dine and dash on a Sunday morning; we merely forgot. A memorable experience, perhaps how the owners intended.

Get your bacon, egg, and cheese on a roll, with ketchup, from a food truck

New Yorkers love convenience. Who has time to wait in line at Starbucks? Especially when a food truck is parked right outside your work. When you order a coffee in the NYC iconic coffee cup, you’ll be given a napkin to prevent your hands from burning–who needs sleeves?! For a few dollars you can get a staple bacon, egg, and cheese sandwich, usually served on a roll. Food trucks don’t just serve breakfast, you can find a food truck for any type of restaurant, most commonly Halal food.

 

Week 1: portrait

For the first week’s assignment I was challenged to get back into coding after taking the summer off. I spent my entire summer heavily designing, and haven’t touched JavaScript since last spring. I wanted to keep my project simple, but meaningful and apply code that not only works, but that I understand.

My concept for my portrait is to show my “unusual” talent of lip-synching with songs that reflect my humor, passion, and love for simple design.

  1. Load the page. See a looped video of me dancing. Hover and click the “Sing with me” button to go to the next page.

loadscreen

2. The next page you see a title “Choose a lyric” with 6 lyrics/song titles to choose.

screen-shot-2016-09-11-at-7-45-49-pm

3. When you select a title the video associated with that song plays.

screen-shot-2016-09-11-at-7-38-31-pm

4. You can toggle between any of the 6 videos to sing along.

screen-shot-2016-09-11-at-7-38-41-pm

5. When a video ends, a new image appears.

screen-shot-2016-09-11-at-7-38-55-pm

Here is Week1 Portrait!

A live or synchronous site

It seems that live streaming opens a portal for anything you could possibly think of. The first live feed I will talk about is of stray cats in South Korea eating. Super interesting.

Why just watch cats when you can also spend your time watching other people’s dogs.

screen-shot-2016-09-13-at-11-48-26-am

http://livepuppycam.com/

———————————–

I need to revisit this question, but right now I would say a live site I find helpful and enjoy is Zenhub. Zenhub is a project management tool within Github. It’s very similar to many agile tools out there.

screen-shot-2016-09-13-at-9-16-03-am

What I like about Zenhub:

  1. Linked to Github
  2. Helps manage progress across an entire team
  3. Live updates seen instantly

It’s a nice way to keep everyone communicated about what work each member of the team is working on.

More to come!