NYU ITP Blog

For my final project, I decided to create a data visualization on beer statistics using Google Charts. I could not find any APIs that were related or that I wanted to work with, so I decided to search for the data online myself. 

After doing some research, I found some interesting statistics about beer:

From my research, I decided to display the world’s biggest beer drinkers as well as the world’s top beer consumption and production companies. I manually put in the data in liters per capita. 

Then I designed a background image for my website to match the beer theme:

After talking with Calli, I decided to put all my data into a JSON file so that it would be easier for the system to pull in the info. It would also be more organized code-wise. So I created a JSON file and called it using ajax:

Then I uploaded my website onto my local server.

Below is a screenshot of my final product:

This week I interviewed and tested my email app on five users while referring to the user script in my previous post. Although I had thought my app was overall easy, universal and pretty straightforward, users were confused by the interface and interaction more than I thought. Of course the platform I used was Invision, so there was not much the users could do, but I saw several problems with my design nonetheless.

For example, many users tried to swipe through the walkthrough page instead of just tapping on the arrow button.

So I changed the arrow button into text saying “Next” instead so users would know they can just tap on it.

Another finding I discovered was that 3 out of 5 users were confused where the reply button was. So I put in a text beside the reply button icon to indicate the button was for replying to messages. 

Then I put in a tag on the inbox that was more noticeable.

Although I still have not been able to figure out how to add value to my email app and make it distinct from other email apps, I enjoyed working on my project and conducting a lot of user researches that helped me get access to a lot of insights. I never realized how user testing can really change and improve your product and how the product interface and experience almost never goes according to how you had planned it. I feel like this experience with user testing will enhance my future personal projects as well, since now I know how I can make my work and my work’s interaction more successful. 

My final project idea was to create an interactive game where users can connect the dots, or the stars, of their zodiac sign. I first started off designing the interaction and animation of the game on p5, but I realized there were some limits that kept blocking my progress. It might be that I just don’t know p5 enough but there were very few resources I can refer to and not a lot of effects I can incorporate. So I switched from p5 to coding directly on the text editor Atom, and looked through a lot of existing codes online for references. 

As I mentioned in my previous post, I wanted the stars to react when clicked and when being connected to another star so that users can feel great satisfaction and pleasure from the interaction. I also wanted the dots to glow like real stars, which I was not able to accomplish with p5. 

For now I made the stars appear randomly across the canvas. As you can see below, I made it so that the states of the lines before and after being snapped to the next star are different in order to enhance the feeling of accomplishment.

I then moved my code to Glitch, where code can be uploaded and viewed by others live, like a real app or website. 

Visit here to play with the game demo: https://constellation-game.glitch.me/ 

Unfortunately, there are still a few things I have not been able to do yet but still hope to accomplish for my game:

Apply some kind of starburst effect when a star is selected

Enable both hand (app) and mouse (web) to be used to drag and draw lines 

Apply cool background effect where tiny shooting stars occasionally appear to make the overall design feel more like a nightsky

EiM Week 4: FINAL Game Test on p5

I decided to call my constellation mobile game Connect the Stars: Find Your Zodiac for now. started designing a basic UI design and color concept for mobile game. Although I’m not sure yet if I would be able to have it up and running, but my main focus is here to animate it. 

First I designed a few color concepts on Sketch before I started animating. I wanted the platform to be on mobile so I used dimensions for iphone.

Then I wanted to test out the interaction of my game, so I tried out a few things on p5. 

  My main of the interaction was to have users connect the dots, or the stars, in a certain order, in which completing the connections would reveal your zodiac sign. Similar to Two Dots, I wanted the users to feel a great sense of satisfaction and accomplishment when the stars connected, so I wanted the lines to snap into the star and have the stars glow or release some star burst animation when connected. It is my first time coding this year so to accomplish that on p5 was extremely challenging. 

Check out the test game demo on p5 here: http://alpha.editor.p5js.org/full/SyFRINn_f 

Unfortunately, the API I had found required signing up and paying for subscription. I signed up for their 14-day free trial subscription for now, but I found out after loggin in that the free trial subscription only allowed certain APIs to be used, not all. 

I did not want to pay to use their other APIs, so I decided to change my idea from finding horoscopes to finding gemstones. The concept is still the same; instead of typing in your birthdate to get a zodiac output, the user will get an output of their lucky gemstones instead. 

To see how the gemstone API works, I went into their documentation. The JSON request data were month, day, year, hour, and minute of your birthdate and the longitude and latitude of where you were born. The month, day, year, and time seemed to be the most easiest info users can put in so I decided to ignore the location of birthdate. According to the users’ input, they will receive the three gemstones associated with them: a life stone, benefic or beneficial stone, and lucky stone. 

After successfully hooking up my API, I tweaked a few things on my web design to match with the new concept. Below is the final result:

1. You want to categorize an email into a group. How would you do it?

2. Check your inbox like you would normally do. Try deleting/composing email, etc. 

3. Are there any additional features you would like to see on this new email app? 

For my final project, I finalized my idea to create a new email app that would have more categorization features and feature more attributes of an email beyond just recipient, sender, subject, time, date and attachment. I first looked for some references to get inspiration:

From these references I decided I wanted to create my own icons for my app so that users can tell the length of an email, how long it would take to read it, how urgent it is, and most importantly, rather or not it is an acceptance email or rejection email job-wise or for any application types. 

For my prototype, I first created a wireframe and tried out a temporarily color palette for my Mail app. I could not come up with a name yet so I decided to \ call it the “Mail App” for now. I still have a long way to go, such as with finalizing color, how to make each message show more than the attributes of recipient, sender, subject, time, date, and preview lines of the message, and designing more icons. I used Sketch to create my app design.

Below are some screens of my app:

 Loading Screen:

Walkthrough:

Adding to group:

Search:

Message:

Replying:

Composing Message:

Message Sent:

Menu:

Settings:

Please visit here for a full shot view of all my screens: https://projects.invisionapp.com/freehand/document/hg9tKB7lV 

Inspired by the Sweatshop Workers tour at the Tenement Museum, for my project I created a house of my own where I could enjoy personal space. From the tour, looking at how the employees had to spend hours and hours in the cramped and crowded workshop made me respect my personal boundaries and how I did not have to force myself to work in such an area at a young age. So I wanted to design a place that would be my ideal workspace. 

Using 3d Studio Max, I modeled the exterior of my space. I love houses with a huge roof and windows, with Asian style roof tiles, so I incorporated them to my design. I also tested out few different textures to see how the overall atmosphere would be like. 

The last set of textures gave me the most comfortable, homely feel so I decided to go with them. 

Next I designed and modeled the interior of the space. I wanted to create a library similar to the one in Disney’s Beauty and the Beast:

I love books and narratives, so I created a huge amount of bookshelves with books. The floor is a wood flooring (with a little too much reflection) because I feel like wood flooring makes the space cozy. 

Below are the final renders, using V-ray:

Today I visited the Tenement Museum for the Sweatshop Workers tour. Like Marianne had said, I did not regret it. The tour was fascinating, educating and realistic because I got to take a look at the actual building where history took place. The Sweatshop Workers tour was about the Levine family's garment workshop and the Rogarshevskys' Sabbath table at the turn of the 20th century, when the Lower East Side was the most densely populated place in the world. I was able to explore how immigrants balanced work, family and religion at a time of great change. I was able to experience the physical space of where laborers worked and under what conditions.

The Levine family's garment workshop was very cramped, dark and old. The tour guide did not forget to mention that light bulbs did not exist during that time, which tells us how dark the hallway above would have been at night during those days. 

It was intriguing to hear the narratives associated with every surrounding. The building was found with 22 layers of wallpaper, as well as a library card with an overdue book. There was also a fireplace that had not work during those times because the building did not have a chimney. For the heating system, the workers had to rely on coal. It made me think about how many people would have died from carbon monoxide poisoning.   

The workers overall worked in very cramped rooms, with barely any leisure for personal space. It was interesting as well how in the photos the tour guide showed of the place back at the time, there was a dog sitting under a chair and a girl with the tip of the scissors in her mouth. The tour guide went on to add how the workshop was questioned for its hygiene. 

For my midterm project, I finally decided to mashup two apis from this website: https://www.astrologyapi.com/docs/

Inspired from tarot card reading, I wanted to mashup the Horoscope API and the API so that when users type in their name and birth date on my web page, they will be able to find their zodiac sign and the horoscope of the day associated with their zodiac. A lot of people enjoy horoscope readings and personal information associated with birthdays and zodiacs so I thought it would be fun to create a platform like that. 

First I researched for references for design inspiration. Below are some great references I found:

I loved the gradient so I illustrated a background of my own on Illustrator and imported it to my CSS. I also thought it would be fun to design my own zodiac icons and have them appear after the user inputs their information.

After setting the background and basic HTML and CSS, I needed a form on my web page for users to input their information. I’m still pretty new to HTML, CSS and Javascript so I looked for websites that had a form design I was looking for. 

I found a template that used an input box that I wanted, so I took a look at its Javascript console and followed it. 

I also wanted to build a basic interaction in which users will be taken to a new page after inputing their information and clicking the button. Although I would need to hook up my APIs and design the results page, I linked the button to a blank page for now. Clicking the button will take users here:

To ornament my web page more, I wanted to try putting in an icon right above the text box, but I have not been able to figure out why the icon would not appear.

I decided to focus on my third idea of creating an email tag system for my persona Justin. Below is the persona I had created last week :

In my user story, I featured my cousin Justin in it and wanted to communicate his pain points of interacting with his email inbox. I wanted to emphasize his emotional needs of wanting to check his email quickly and efficiently with as little emotional rollercoaster ride as possible. 

For my final assignment, I want to design an interactive mobile game in which users can interact with star constellations. Inspired by David Hohusen’s presentation on “Dots,” I want to create a similar interaction in which users connect the dots, but in my case, the stars. I love stars and for some reason watching them glimmer at night always made me feel so emotional, which is why I want to create an interaction centered on stars and constellations. 

Below are some design references I would like to incorporate into my project, including the Dots game:

I think the most enjoyable interactions are those that are simple, easy and the most basic. That may be is why games such as Dots and Tetris are so popular and successful. By incorporating such elemental interaction, I want to be able to present an emotional, enjoyable and valuable experience to the users. 

Since designing a whole game might be too challenging, I am thinking about creating one screen on a mobile platform in which users can connect the stars to complete a constellation. After the user completes it, maybe I can have some kind of hopeful message associated with the constellation pop up. 

Below are some rough sketches of how the user interaction would be like:

For my final project ideas, I first thought about people I most care about. Of course, the first few faces that came up in my mind were my family, then my most closest friends. I thought about making something for my parents, but although I love them very much, it felt a bit too cliche for me. So I picked three other people that I care about: my sister Julia, my sister from another mother Mobo, and my cousin Justin. 

I interviewed them briefly over the phone and created personas out of them. Below are some meaningful interaction designs I roughly came up with for each of their personas:

IDEA 1: Tea Bag Design

After interviewing my sister Julia, who loves tea, I wanted to design a tea bag for her that would help her brew her tea perfectly. My tea bag will help her decide how long to brew her so that it did not end up too dark or too light. Also I wanted to make the design make her feel relaxed and pleasant so that she can enjoy a proper a break from all her studies. So I thought about designing a tea bag that has a simple ring with the color of brewed tea, and the color of the ring can serve as a reference for her. When her tea turns lighter than the color of the ring, the drink will be light, and when her tea turns darker than that of the ring, the drink will be on the more bitter side. 

Below are some reference images and sketches:

IDEA 2: Hair roller/Cutter design

For my friend Mobo, who finds taking care of her bangs troublesome and too time consuming, I wanted to design a hair roller that helped her not only set her hair quickly and easily but also cut her bangs perfectly straight. So I thought of a scissor that has a hair roller attached on one side, and the hair roller would be detachable. I have not yet thought about how this hair roller could be different from the other ones, but by using the hair roller she would be able to cut her quickly whenever they grew too long. Here are some sketches and reference image:

IDEA 3: Gmail Plugin design

Justin was the most difficult to create a design for because his stress came mostly from job hunting and honestly I believe it is a part of life. There is not much choice but to go through rejections and constant hunting for jobs. However in order to ease his pain a bit, I thought of designing some kind of plugin that you can install on Gmail that will help organize your job offer messages by giving it a tag: red for rejection, blue/green for acceptance. These tags will not only let you know instantly what these messages are, but also relieve you of the pain of opening the email without knowing rather or not it is a job offer or rejection. Below is a brief sketch:

Here is also a link to the personas with higher image quality: https://docs.google.com/presentation/d/1v-vN7Nq1hWkQzVUD0OzyLQtLgFvYSvNmVg6ewCYTwzk/edit?usp=sharing

EiM Week 2: SAD Button

Our main objective for this week was to create a button that expressed a specific emotion of our choice. 

I thought about what emotions to express and came up with three rough ideas. Below are some initial sketches:

However as I thought more about it, I wanted to express an emotion that was simpler, more universal and easier to understand. I made some research on button animations for inspiration. Here are some great references I found on Dribble:

After looking through a ton of references, I finally decided on an emotion: SADNESS. Ironically I wanted to choose a brighter, more cheerful emotion such as love, bubbly (if that counts as an emotion), or excitement. However, maybe it has something to do with my current state, but the liquidy and fluid-like animation not only inspired me but kept pulling me into the idea of expressing a sad emotion with my button. 

So I came up with the idea of an eyeball button where in its default state, it will look like it will almost burst into tears, and in hover state it will wiggle or waver more intensely, and when finally clicked, it would start crying by producing tear droplets all over the place. Below is a short storyboard:

For the desired effect, I had to get an effect called Trapcode Particular from Red Giant. To my relief there was a trial version, so I downloaded that one.  

      Here is the final button simulation on vimeo: https://vimeo.com/255688086 

I also uploaded the link under a separate post.  

Below is a gif version: