Typography, Wordmarks and My Name

My Name!

adobe-hewbrew

Font: Adobe Hewbrew

amatic-sc

Font: Amatic SC

bradley-hand

Font: Bradley Hand

colonna-mt

Font: Colonna MT

construthinvism

Font: Construthivism

dosis

Font: Dosis

 

fonts

 

Possible Logo??

screen-shot-2016-09-28-at-12-08-04-pm

 

Wordmarks

bass-wordmark

I wanted to capture the vibrations felt by bass when you’re sitting in a car or when you’re listening on your headphones. Move. That. Bass.

Font: PaintCans

 

 

plant-wordmark

Using an “organic”- looking font, I wanted to show growth of plants and leaves in the word.

Font: Indie Flower

 

 

carbon-wordmark

I used a serif font to give this word a modern, slightly futuristic feel, turning the ‘o’ into a replication of the carbon atom.

Font: Quicksand

Wawa: The Next Gen Sandwich Ordering System?

Image result for wawa
Wawa. It is the one of the places that brings me so much joy when I go back home to the Philly-area. For those who don’t know, Wawa is like a bodega on steroids, packed with snack and foods and a full-service deli, where you order all your items on a machine like this:
Over the weekend, I went to one of my best friend’s weddings and made a veteran decision to stop at a Wawa on the drive back into the city. With fresh eyes, I watched 15-20 people use this amazing little kiosk during my visit there and recorded my observations:
Assumptions
1) Customers want a faster, more accurate way of ordering food
2) Less labor intensive (less staff required)
3) ‘Quick serve’ food is prepared in front of you, giving customer transparency in their order
4) People don’t want to wait in a long line to give an order, they would prefer to wait in a shorter queue, place their order and then wait for their food
Customers who come to Wawa are looking for a delicious meal that they can get between 5-10 minutes. Popular around lunch, but open 24/7, Wawa’s flexibility to provide quality food at all times of the day cater to a wide range of customers.
There are certain aspect of this system that I want to call out. After placing their order, a small ticket is printed, which the customer then takes to the cashier to pay for. Once paid for, the ticket it then validated with a ‘PAID’ stamp. I believe this helps ‘take up time’ that would be otherwise be spent waiting for their food.
There are inherent simplifications and difficulties this brings to the experience at Wawa.
What’s Easy
1) Step up and order a sandwich within 30 seconds (if you know what you’re doing)
2) Margin for error is extremely low. If there is a mess-up, you have a record of everything you ordered on your sandwich as validation.
What’s Difficult
1) First time Wawa customers have to either observe other customers use the kiosks or ask their friends/family on how to order. Eventually they understand the flow.
2) Some options appear to be repetitive “Cold Hoagies” “Hot Hoagies” “Double Meat Cold Hoagies”, etc.., which led to the user having to press cancel and start again
3) The paper print out receipt actually ran out and a customer was left without an order number, leading to confusion and a breakdown of a solid, organized system.
Not only is this a waste of paper, but inefficient. Why shouldn’t the customer be allowed to pay for their food from the order screen without having to print paper and go to another line to pay for their goods?
Quickest observed transaction time (just ordering a sandwich): 0:20 seconds
Quickest observed transaction time (ordering and paying): 4:02 minutes
Slowest observed transaction time (just ordering a sandwich): 3:12 seconds
Slowest observed transaction time (ordering and paying): 6:32 seconds
As someone who has grown up with Wawa, this is the easiest system to order a sandwich with. With a big sign that says, “ORDER HERE” and ‘TOUCH THE SCREEN TO ORDER’ are straightforward indicators to new customers on what to do. From my perspective, and what I’v observed, there is quite a bit of affordance built into the copy and layout of the screens, guiding the user to eventually press, “Complete and print order”.
This system does not align well with Crawford’s definition of interactive, where the user inputs their selections, and the system basically compiles it all together, allows the user to review their selection and then prints out the result. In the backend, the system is sending that order to the sandwich maker, giving them the instructions to build the sandwich that was ordered. The only processing the computer is doing is making sure the queue numbers are sequential. That’s pretty much it, which is why, although the user can interact with the kiosk, it doesn’t fit too well in my opinion to a process-heavy interactive experience.
—-

Playing with Analog and Digital Ins and Outs

This week we had to apply digital and analog inputs/outputs to our circuits. Here is what I used:
– Arduino 101
– 1 light resistor
– 1 10 Kohm resistor
After connecting the circuits, and adding a bit of code, I was able to print out the range of light the photo resistor was picking up. I then mapped that to a particular range from 0-3, whose variables I assigned globally. I then mapped that range to either print ‘Dark’ if it read, “0” or “1”. It would print ‘Light’ if read ‘”2″ or “3”.
I have it set to delay a reading every 60 seconds.
My original goal was for it to send a notification to the rnF app via Bluetooth if it was ‘Light’ and to not send it if it was ‘Dark’, but as I could not figure out to configure the Bluetooth in time for class. I wanted to create a simple system that would notify you if you left the lights on in a room. I will figure it out and revisit this.
screen-shot-2016-09-27-at-8-46-50-pm
 screen-shot-2016-09-27-at-9-01-06-pm
screen-shot-2016-09-27-at-9-01-15-pm

Light Sensor Readings from Jesal Trivedi on Vimeo.

Animation in P5

This week we had to work on animation. I understand conceptually the Random, and Map functions, but could not get the rotate function to work.

I wanted to go along a these of animating a particular scene instead of making something abstract. This helps me see how things work linearly, in a step-by-step fashion.

Here is the link to my project.

screen-shot-2016-09-22-at-11-40-51-am

One element controlled by the mouse.

The sun turns into the moon

One element that changes over time, independently of the mouse.

The snowball.

One element that is different every time you run the sketch.

The snow appears randomly, but not in the way that I intended. I wanted a way for the snow to appear at the top (randomly) and “float” down.

 

 

The Good and the Bad of Signs in NYC

I found 3 signs that were particularly pretty bad around NYC.

 

1. Pandora Ad on Subway Turnstile

I found this ad in a particular spot on the subway toll on Canal Street. I believe they placed this here to appeal to women passing through the turnstiles as they run to catch the subway. The problem is this:

screen-shot-2016-09-21-at-12-01-02-am

The arrow is pointing to where I saw the ad placed. If this ad was intended for the women boarding the trains, then I think they failed. The average height for women in the US is 5’4”. This is much higher than eye level for most women.

screen-shot-2016-09-20-at-11-59-13-pm

If we analyze this from the male point of view, the average height for a male in the U.S. is 5’10”. At that vantage point, it would be easier to look at the ad. This very well could be the thinking behind their ad placement, in hope that the guys would get their significant other a gift from Pandora. If it’s the first case and that this ad was intended for women, then this failed…terribly.

 

2. Parking/No Parking

This doesn’t make sense, although now looking at it, I could have taken some better pictures. the parking sign says No Parking from 2am – 6am Monday- Thursday. Now I have no idea why it’s pointing down Centre Street (right) and pointing AT the intersection of Canal and Centre (left). It’s not like you can park in the intersection of even on the corner, which you would park over the crosswalk, which is not allowed.

 

3. Lucky Health =)

5. “Planned Service Changes”

I hate these. I really hate these. Not only are they an enormous waste of paper. There are so many delays and changes, people have to scrounge through these sheets of paper to find their train and how it affects their commute. So old school, reminds me of this.

 

The  Good Ones!

In the Converse store, I found this display of their new ‘Counter Climate’ shoes for the rain and any other adverse weather. The messaging is so clean and simple, highlights one style of show in their “Climate’ series and then hits the viewer with the Converse logo at the bottom. You can go up and spin the shoes too, which makes the water fall on the inside of the display glass. Love the reserve/upside down text for ‘Climate’ as it goes with the word, ‘counter’ before it.

Slice Pizza

Love the use of LIC in the logo.

 

Redoing one Bad One

I wanted to take a stab at redoing the ‘Planned Service Changes’ and in my research, I came across a great app that does exactly what I was thinking of in terms of layout and design. The app is called City Mapper and is essentially Google Maps on roids.

With the new interactive kiosks that the city has been slowly implementing, they should have lines listed like this. All the lines that have planned service changes should be listed here.

photo-sep-21-12-21-13-am

Opening them would expand their information and really give the reader a more detailed look at how the change will affect their commute.

photo-sep-21-12-21-20-am

This is pretty straightforward AND uses less paper.

 

NYC Parking Sign

Also I decided to take another crack at the NYC parking assignment we did last time in class. There are several issues with the ‘now’ model, which affects planning for the driver.

redesigning-nycs-parking-sign

Beginning to Play with Switches

Switches on Switches

I create a simple switch control. There are three switches that each individually control their own LED (red, green, yellow). The schematic is shown below.

photo-sep-18-5-32-52-pm

Green LED

photo-sep-18-4-41-59-pm

Red LED

photo-sep-18-4-42-03-pm

Yellow LED

photo-sep-18-4-42-01-pm

 

All Three LEDs lit up

photo-sep-18-4-42-10-pm

Close up

photo-sep-18-4-42-55-pm

Video 

PComp Simple Switch Video from Jesal Trivedi on Vimeo.

 

Further Thoughts

I wanted to try to see if I could create just one switch that made the light jump from one LED to another, sort of like Christmas lights, but I couldn’t figure out the right amount of resistors and power needed to do something like this. This might be something to consider in the near future, possibly with some Arduino programming.

 

Thoughts on Reading

Don Norman’s The Design of Everyday Things has been one of my favorite books on design. I’m happy that I read the second article on emotions and attractiveness of designs, that Norman ALSO wrote, because that was a criticism of his work that I had previously. I thought Don had a utilitarian view of the world and how products should be designed, so after reading both, I definitely see more balance between his thinking.

I discussed affordance in my last blog post as something that is critical for good interactivity. Your product has to be designed in a way so that the user understands what needs to be done in order to use it. He used a door as a fantastic example to explain this and the concept of ‘visibility’, and how it can go wrong in design. The can also be seen shopping cart

Mapping was another interesting topic (especially since we are learning how to use this function in ICM!). I liked how he distinguished between additive dimensions (adding more of something to show incremental increases) versus substitute dimensions (replacing something of one particular value for another to make change). I kept thinking of color and how it can be both an additive and substitute dimensions. For example, if you are showing the prices and higher prices are indicated with yellow, orange and eventually red, and lower prices range from yellow, to green to blue, you can map color to prices and it can serve an additive utility.

It was fascinating seeing the other student’s projects. I recall seeing some of them when I visited during the Winter and Spring ITP shows over the past couple of years. I do agree that you can add your own spin to the projects. Motion, LEDs, and ‘FIELDS OF GRASS’ are particularly interesting, but I’m excited to see what we can come up with here in this class. I’m curious to see if any of the past projects have been based on actual product development rather than installation designs, which most of the projects that I noticed, are.

P.S. Now I want some teapots!

 

 

What is Physical Interaction?

What is physical interaction? What does it have to consist of to be considered ‘interactive’? Have we misinterpreted what interaction design is at it’s fundamental core?

In Crawford’s The Art of Interactive Design he states the definition as a conversation with two actors who “listen. think, and speak.”

In A Brief Rant on the Future of Interaction Design, Bret Victor uses this video to define physical interaction, not through tasks to complete (human need) or technology, but by our own natural capabilities as humans, such as using our senses of touch, balance, strength, etc. to navigate the world around us.

Using these sources, I would define physical interaction as natural actions that occur with two or more “actors” (as defined by Crawford), where there are clear and immediate feedback loops (responses) to various inputs (either analog or digital).We must be sure to contrast the difference in thought between the two authors. Crawford states that an interaction is the act of listening, thinking and speaking. Victor argues further, stating that physical interaction must emulate natural expressions with our body using all of our senses.

I believe physical interaction does not need to emulate these natural “expressions”, but some of the best examples of great physical interactive experiences have the human element ingrained in their design. Let’s take cars for example:

As we had been pretty nomadic people for a large part of our history, humans have moved around to various geographic locations, using either our own legs as locomotion or riding atop horses or in carriages. This was a fairly passive way to travel (unless the need called to gallop to a certain destination). Very little input needed to be given to the animal to guide them into a certain direction. With the advent of cars at the turn of the 20th century, we has a whole new set of “tools” to interact with to navigate the roadways (which resulted in an astonishing amount of crashes..surprise surprise). We shifted as a human race from passive riders to active drivers.

autonomous-cycle

As technology progresses, and the dawn of the autonomous vehicle is upon us, we will slowly transition back to what was most natural for us, returning as passive riders once again, stepping in only when intervention is needed.

 

What makes for good physical interaction?

I believe a good physical interaction incorporates three things:

  1. Affordance in the product’s design
  2. Using your senses to interact with an object, either physically or digitally
  3. Feedback from the product to the user

According to Don Norman, author of The Design of Everyday Things, an affordance is the design aspect of an object which suggests how the object should be used. Essentially it’s a visual clue to its function and use. This is important for the user to understand how they should interact. Next, for a good physical interaction, the user must use their senses to interact with the object first. The most common initial action is usually tactile (grabbing, pressing, swiping, tapping, etc…). The product will be thinking (processing) a response, which will then give the user some information that their action is either complete or incomplete, thus completing the feedback loop. When these three things can work together, and learn from each other as they are used, this is what creates good physical interaction.

There are several examples of digital technology that are not interactive. If we follow Crawford’s definition to interaction, TVs, Podcasts, online blogs and media are fairly non-interactive. You can make the argument that online media sites are interactive in the comments section, but not to the extent that it can completely change a written/video/audio piece on content that is already published. TVs are not interactive as you can’t engage with a TV, you can only control it. Podcasts, although new, are not interactive unless they are recorded live with full audience participation.

Homework Assignment 1: Design Analysis – The Blueprint Album Cover

I analyzed the cover of Jay Z’s critically acclaimed album, The Blueprint pictured below:

jay-z_the_blueprint_album_cover1

I chose this artwork because it one of my personal favorite Hip Hop albums of all time, and has has universal acclaim, including being listed at one of the 500 greatest albums of all time by Rolling Stone magazine. The album is claimed to have been written in 2 days, with the final cut completed within 2 weeks, and is credited to launching the career of Kanye West.

“The Blueprint’s album art was shot by legendary photographer Jonathan Mannion (who’s shot most of Jay-Z’s album covers), but it was inspired by a British photographer named Jocelyn Bain Hogg. The image is from Hogg’s 2001 collection “The Firm,” which was created after Hogg spent 10 years following British gangsters in South London.” (Source)

rtif50uum6emp4fxjwv9-1

 

Underlying Grid

Using the Rule of Thirds, we can see how this image is composed. Jay Z is primary located on the left, the line going right through the middle of him. He commands the attention from the viewer in this position. The grid then neatly divides the remaining elements of the image into their respective quadrants.

jay-z_the_blueprint_album_cover1

We can see the tension in the overall balance of the composition below. I have colored Jay Z, the shoes and the ‘tools’ to try to show their respective visual ‘weight’. I also love how this image separates Jay Z from the group to the right, setting himself to be the boss, in a commanding position relative to the others, sitting next to his tools of the trade: a mic, cigars, an ashtray and a cigar cutter.

The visual hierarchy takes the user from the Jay Z’s figure to the actual words written above, followed by the shoes and the tools in the bottom right corner.

jay-z_the_blueprint_album_cover12

 

Fonts

There are two fonts in this composition:

ITC Machine STD (modified to look original) – Source

Social Gothic (most accurate estimate based on What The Font)

Jay Zs name commands presence (as that is the stronger ‘brand’ compared to the album name) that consumers would recognize first strolling through the album isles (back when that was the thing to do). The album name is tucked away neatly, justified to the left underneath Jay Z’s name.

 

Color Palette

The color palette is very simple. What started out as a most likely black and white photo, the piece has been overlaid with a shade of blue, thus producing a sea of various shades of grays, blues and blacks.

The Hex number of Jay Z’s specific shade of blue that he likes using is #2E56A4 (source) — which later became a shade for a SUV he did in collaboration with General Motors. This composition seems to be tinted in that shade, which I’ve broken down below.

jay-z_the_blueprint_album_cover13

 

Negative Space

There is a fair bit of negative space, some utilized for text, but for the most part, left alone. They allow separation between the main elements of the composition, explained in the first section of this review, and allow the viewer to concentrate on Jay Z himself, separate from the group to the right, next to his tools of his trade.

jay-z_the_blueprint_album_cover14

 

ICM Homework #1

PROMPT: Write a blog post about how computation applies to your interests. This could be a subject you’ve studied, a job you’ve worked, a personal hobby, or a cause you care about. What projects do you imagine making this term? What projects do you love? (Review and contribute to the ICM Inspiration Wiki page. In the same post (or a new one), document the process of creating your sketches. What pitfalls did you run into? What could you not figure out how to do? How was the experience of using the web editor? Did you post any issues to github?

 

Computation applies to my interest in 3 ways:

  1. A desire for a deeper technical understanding of coding
  2. A desire to not rely on others for this specialized skill set for prototyping and experimenting with ideas & to have a solid baseline for technical conversations
  3. A way to reinterpret the world with a new medium and to see what can be done

I have always been obsessed with technology from when I was a kid, which led to a great opportunity to working at an Authorized Apple reseller while in college, repairing computers and selling products to customers. For the past 6 years, have been fascinated with the world of innovation, tech startups, design and entrepreneurship. The three reasons mentioned above hit on my interests on a deeper, more fundamental level of learning, experimenting, and changing how we perceive and interact with the world around us.

A couple of the most interesting things that I’m most excited about are the ability to draw and interact with sounds and to create interactive data visualization. I love how complex information can be simplified into beautiful illustrations, and to a further expect, if it can be portrayed in a way that the user can interact and manipulate the data. Cool visual animations are neat too! I’ve always been into dreams and lucid dreaming, so if there is a way visualize in a cool way, your dreams, that would be pretty extraordinary.

I took a dive into the ICM Wiki and I have pulled out a few of my favorites out of there:

1. hamoid/aBe Pazos

Some of my favorite works from his are:

Textcurve

Space Subdivision

2. Deep Dream

3. Urban Layers

4. NYC Street Trees by Species

5. Wind Map

6. Subway Deserts

 

Sketch and Breakdown

screen-shot-2016-09-12-at-10-21-09-am

Here is the link to my code!

What started out as a simple background color change turned into an sea for my fish, Wanda, here, who is enamored by these bubbles that seem to have risen from below. Using ellipses and triangles exclusively, I was able to create this fish and the bubbles. I used a repetitive layering technique to create patterns in the fins.

Some of the issues I ran into was layers an the placements of the “fill()” functionality. In order to made this word, all the constraints relating to a particular shape must go above the said shape. I then ran into a few complications of using arcs and curves and decided it was better to use ellipses and cover portions of it up to emulate the ‘curved’ look. A hack, but I need to figure out how to use curves properly. I really wanted to play around with gradients, but even with that, I could not figure out yet how to implement it without it messing up my current sketch.

 

Favorite Tools and Fantasy Devices

Class 1 – Wednesday Sep 7, 2016

I know it. This is going to be one of my favorite classes here at ITP. Melding the two worlds, one physical and one digital, is something that I always was allured to. The course description is perfect for my interests and I hope I can bring 100% to it.

I loved the first question that Tom, our professor, asked us, “What is your favorite tool and why?”. A tool, by definition aids in accomplishing a task, often times much more easily than if you did not have said tool. The answers everyone gave were varied and unique. I said my Uniball .7mm Jetstream pen and my Moleskine notebook, as that’s where I develop ideas, sketch, reflect, and think about the world around me. That physical connection I have with my notebook is something that can never replaced by the computer.

After the break, Tom split us into groups gave us an assignment to build a fantasy device. Paired with two bright, creative students, Alex and Shaun, we decided to build a prototype for an ocean vacuum, to suck up all the trash that has unfortunately collected in our oceans.

We went to the shop and started to collect various pieces of items from the junk shelves in the shop to begin building our fantasy device. We had no idea what it was going to look like, but we let the items help inspire the design and quickly, we began to see a vision for our “creation”. We drew a quick sketch of this design and began to pull parts out. We found a stool, some fabric, some light fixtures and began taping and stapling away. Everyone was so eager to pitch in and just work on this, that it felt so automatic and seamless.

We began to think about some of the questions believed would be asked of us in class:

  1. How do we prevent animals from getting sucked in?
  2. How is the trash disposed of?
  3. Where does the robot go after it’s full of trash?
  4. how do we prevent clogging the system from algae?
  5. Is it completely automated or can their be a manual override?

We developed answers to all these questions (or at least our best attempt at a solution) and once time was called we piled into class, ready to talk about our “creation” and to hear from other teams.

14191971_10103788376934078_5584525232293324675_n 14224895_10103788377143658_4990980240094918145_n

Some of our classmates has some excellent ideas around teleportation, air cleaning, translating dog barks into English, and realtime translation devices. Our device, Tom said, was already being developed by a former ITP student. That’s good that we were on the right track in terms of our thinking, but maybe we could have thought of something even more impractical to design around. I’m not sure, but it was a great exercise in getting our minds to think in this creative, yet very practical way.

If the rest of class is going to be like this, I’m going to be in for a treat.