Website / DesigningMultiplicity Logo Generator

This was a web app I built for the MFADT thesis show: an interactive logo generator using HTML5 / CSS3 / jQuery, with a GUI for students to design their own thesis project logo.

I was invited by the MFADT thesis show’s preparatory team; they designed the graphics and concept and I implemented the functionality.

Website / New School Logo Generator

> View Website <

This was a web app I designed and implemented as a parody of the new identity design of The New School, which is a logo generator using the New School font (i.e. "Neue"). The generator was published on one day following the highly debated new branding system was released. The page created a lot of buzz immediately, and everybody was discussing about it.

The new font of the new branding system (the "Random-Display" variant of it, specifically) was said to be the first algorithmic font in the world, meaning that the width of every character changes along with the position of the character in a word or sentence, in a specific way. I extracted the fonts-alternating algorithm from Neue, created the generator and replicated the algorithm using HTML5 & JavaScript for users to design their own New-School-style logo. I am currently working on it and trying to expand this project.

Interaction Design / Parsons × NWS

This was a project we collaborated with New World Symphony at Miami as a team for a course project. I created an interactive animation using openFramworks, which synchronizes with a live-performed music piece “Beauties on Parade” within a suite “Hollywood Carnival”. The animation was projected to five big screens in a concert hall behind the symphony.

App / NYC Subway Prewalk

About

How can New Yorkers reach their destination in the fastest way? What are those critical use cases that are often missing from Google maps but with which subway route apps can excel? How can we survive from the complex and confusing NYC subway system?

Objective

I tried to understand the current problems regarding moving around in NYC via the subway system, and proposed a solution that aids in making route connections and time saving for New Yorkers.

What I found out

There’s no clear subway exit map, and so that it’s hard to find the nearest exit to one’s destination. Also, the exit navigations are very unintuitive and the structure of subway stations could be very complex and makes it difficult to find the right way to the desired exit.

What I planned to do

To create a user-friendly and informative app for NYC subway system, which shows the in-station and out-station exit maps with navigation through exit route. Then do a user experience-improving approach for iOS.

Features

Route planning with travel time between origin and destination stations:
- List all the possible routes and the travel time they may take.
Street Entrance/Exit map:
- Mark the train direction and name of each entrance and exit.
Route planning between car door and the desired exit:
- Show the shortest path from the car door to the desired exit.
- Mark the correct car door (nearest to the path) and stairs/escalators/elevators on the path. So the user can move to this door when they are waiting for the train in order to save time.

Demo

UI Design Process

First Version:

Designed an exit list with an exit map beneath.
When the exit is clicked, show the diagram of train cars.

Second Version:

Replaced the exit list with exit name tags on the exit map.
Added map/navigation for train car and exit route.
Edited the street exit map to clarify street names and to mark the orientation of exits.

Third Version:

Edited the palette to match exit colors and ground colors to different train line colors. Removed the design that uses colors to represent directions.
Changed the color of subway cars to pink, which doesn’t belong to any color of train lines.
Cleaned up the street map to avoid distraction due to unimportant information.

Final Version:

Cleaned up the subway map to avoid distraction of unimportant information.
Change the color of pins on subway map to pink and cyan which doesn’t belong to any color of train line.
Change the design of exit name tags into solid circle, bolder font and shorter text to make them more readable.

Edited the exit route navigation map to put stair signs in actual position in the station, to better navigate users to correct stairs.
Added the step by step route table to the exit route navigation map. If any step is clicked, the relevant part of route path will mbe arked by a different color and other route paths will be dimmed.

Interaction Design / Palette

This was a game I designed for the final project of Parsons MFADT Physical Computing class. The goal of this game is to control and mix R/G/B color values to match the background color within 10 seconds each level. I used three photoresistors connected to Arduino Uno to sense the color value controlled by 1 to 3 players, and use openFrameworks to build the user interface of this game.

Website / Good? Good. Good!

> View Website <

This was a website I designed and implemented for a project of Parsons MFADT Major Studio 1 class. It is created to inspire people in the morning and let them have a good mood to start a new day.

Interaction Design / Kids on The Rainbow

This was a piano piece I composed for a project of Parsons MFADT Major Studio 1 class. It has a music structure inspired by Mozart. I’d like to create some animations for it in the future.

Interaction Design / Run New Yorker Run!

This was a game I designed for the final project of Parsons MFADT Bootcamp. It’s a simple story that a New-Yorker Totoro is running on the street to catch his favorite acorns. I built it with Processing. It has some interesting feature such as the Totoro can move and jump and even double jump. The acorns and obstacles are randomly generated. In addition, the height of the buildings in the background is correlated to the music amplitude.

Interaction Design / Hide & Seek

> View Website <

This was a correlated work of “Poke and Peek”, exploring an online version possibility. Player starts from the top-left paper scroll and his adventure unfolds. Player can choose to “experience” some sensory element or do some action throughout the navigation to explore the story and enjoy the surprising ending.

Interaction Design / Poke & Peek

This was a poke-poke box game designed for the craft fair of Parsons MFADT Bootcamp. Player starts from top-left corner or top-right corner, read the story fragments and follow the navigations inside to go to the next cell. A fabulous journey of imagination blossoms inside this little box.

Graphic Design / Picnic

About

This poster was designed for the Parsons MFADT Bootcamp picnic event. I came up an idea from the eyedropper tool of Adobe Photoshop. In bootcamp, we always use this tool to pick color from pictures, and busy working in front computer. After Bootcamp, we should stand up and go out to nature. So, as a reminder, the eyedropper tool picks the color from your computer and shows a nature grass, and we use the natural noun 'Grassgreen' instead the processing program color code. All these are saying: Go picnic!

Graphic Design / Gift

About

This was a poster designed for my classmate YU in Parsons MFADT Bootcamp class. The color and concept was inspired by her doll which bought in California and brought to New York. The world is brought to her (and all of us) as a gift through traveling and learning, just like the doll being a graduate gift from her family.

Website / Brand Website Design

> View Website (Local Backup) <

This was a website built by my design studio for a jewelry design and metalworking brand. I designed a neat and elegant style for this brand due to the feeling of her creations and herself. My fellow teammates and I also applied the full-canvas presentation, which used different image sizes to fit varied screen sizes for best image quality and bandwidth usage.

App / Plurkran

> View Website <

This was a product of my design studio. It was one of the most popular Plurk (an online social networking service) client apps for iPad and earns average 4.5/5-star rating. I developed the wireframes and designed the user interface and graphics for the app.

Website / Personal Website Design

> View Website (Local Backup) <

This was a website I designed and implemented as a personal website for a graduate student of Carnegie Mellon University. Because the website owner is both a researcher and a writer, I designed a formal and precise style for the page "as a researcher", and a decorated and delicate style for the page "as a writer".The background of old paper and tape expresses what he love and live for.

Graphic Design / Journal Inside Cover

About

This was a cover designed for a research paper by Cytolumina Technologies Corp Inc. It was selected to be the inside cover of the Advanced Materials journal in 2013.

Graphic Design / Music Lives Forever

About

This poster was one of the visual presentation of the series concerts held by the Chinyun Chorus in National Concert Hall in 2013, in celebration for the 40th anniversary. The topic of the series signified "music grows continually and lasts forever", and thus I used elements such as fermatas and blue ocean waves to interpret the concept.

Graphic Design / Heaven & Earth

About

This poster was designed for an annual choral concert held by Chinyun Chorus in 2011. The topic of the concert was "heaven and earth", and I let varied colors and strokes float to a high and faraway place.

Graphic Design / Walk With God

About

This poster was designed for a choral concert held by the Holy Family Catholic Church in 2010. I arranged the words to fit the shape of a crucifix, and used a pure golden light to express the unconditional love from God.

About

Objective

What I found out

What I planned to do

Features

Demo

UI Design Process

First Version:

Second Version:

Third Version:

Final Version:

About

About

About

About

About

About