Xiran Yang

Blind Date

iphone_x.png

 

iphone_x.png
 
 

Type - 3

Web Design | 2018

an interactive web experience for exploring new hip-hop album content

Type - 3 is a web application built on Spotify API and Lyric JSON files. This web application aims to provide a visually interesting way for users to experience random songs in a new album that they have not listened before.

Tool

Spotify API, Lyric JSON files, SVG, CSS Animation, JQuery, JavaScript, HTML

My Role

Web Development and Interface Design

 
 

Design Progress

Ideation

brainstorming and come up with a design plan

Interface Design

sketch out the interface and test with users

Web Development

define the web features and build the web

Presentation

publish the website and get user feedback

 

IDEATION

My original idea was to create a web experience that introduces the works of young Chinese rap artists to a larger audience.

I have always considered rap as a kind of art that uses language and beats as its medium. Many young Chinese rap artists nowadays deliver interesting opinions using rap as their medium.

Based on my personal experience, lyrics is the soul of a rap song and the hook is often the highlight of a rap song.

Therefore, to create an interesting experience, I decided that my web should have three features:

1. It will be able to have some engaging visual elements.

2. It should show the highlights of rap songs.

3. It should display the lyrics.

I chose Higher Brothers, one of the most representative Chinese hip-hop crews as my chosen rap artists and their new album Type - 3 as the my chosen album for this design practice.

artworks-000310908846-zjtx4b-t500x500.jpg
 

Interface Design

hand sketch

Since my main purpose of this web application is to both introduce the artist (with their songs) and provide an interactive song listening experience. I sketched out a simple wireframe for the application on my notebook.

I broke the web page into mainly two parts:

The header section is dedicated to provide extra information of the artists and their album. The larger body section is dedicated to user interaction, song preview and lyrics display.

IMG_6167.jpg

color palette & font choice

I mostly took inspiration from aesthetics of Type - 3 and decided to use a red and yellow palette with fonts that have similar vibes to the album.

1.jpg

I complete the full design later using illustrator and adobe XD

 

Web Development

1. Visual Programming

I used HTML, jQuery and CSS animation to program the visual of this website.

I create two cassette SVGs and use those as the “play triggers” on the website. I looked up a bunch of references to animate them and the texts. Every time the user clicks the cassette, the cassettes flips to the back side of it.

2. Get Different Songs

I used Spotify API to get the album and the songs. Luckily Spotify provides a 30-second highlight preview of each song, which matches with my original intention.

 
e5b18fe5b995e5bfabe785a7-2018-04-27-e4b88be58d885-29-07.png

3. Get Lyrics

My biggest challenge was to get the lyrics of the songs.

After asking around, I got two solutions:

  1. Use python to scrap lyrics from websites like Genius;

  2. Use some lyrics APIs

for solution 1, I was not able to figure out python in this amount of time;  and for solution 2, the best API I found, which is MusixMatch only provides with 30 percent of the lyrics.

Neither of these seems to be the best match for my need so I came up with a third solution, which is to build my own lyrics JSON file.

Therefore I limited my target to just one EP of the hip-hop group Higher Brothers, which only contains four songs. I use a pretty useful tool to called JSONlint to validate the JSON I write and I am able to use my own API.

 
 
type3.gif
 
 

Tubeman is happy!

an interactive web experience

Tubeman is happy! is an interactive web application. The users can use it to create, download and share gifs of themselves moving like a tubeman. By encouraging the users to imitate the tubeman and enabling them to create and share gifs of themselves moving, Tubeman is happy! is trying to create simple and sharable happiness.

Key Words

Interaction Design, Web Development

Time Frame

4 weeks

Progress

Ideation, User Testing, Prototyping, Iteration, Showcase

Toolkit

Adobe XD, Illustrator, WebRTC, WebSocket, Node.js, Javascript/HTML/CSS

My Role

Interaction Designer and Web Developer

Showcase

ITP Winter Show, 2018

 

How it Works?

1

When entering the web application, the users will see an image of the tubeman. They will also see themselves in a camera feed.

 

2

Following the instruction, they will then imitate the movements of tubeman (as shown in the picture), pose and take 18 pictures.

 

3

Users can add a word to describe their moods at the moment.

 

4

At the end of this experience, a gif will be generated.

 

5

The users can access to the gif by entering emails of themselves and then be able to share that “stupidity” and happiness with others.

gif1.gif
 
 
 

Project Setup For the Show

projectsetup_e794bbe69dbf-1.png
 

User FLow

userjourney-02.png

The user will first see and go to the gif booth. They will then look at the instruction computer and follow a series instructions which basically guide them to look at a frame by frame breakdown of a tubeman’s movements, take pictures one frame by one frame imitating the tubeman and at the end, get a gif made of the pictures taken previously. They will be able to download and share the gifs.

All the previous taken gifs, if allowed by the users, will all be displayed on a display page that everyone can see.

 

At the show

I developed this project on my MacBook and showed it during the ITP winter show in a larger scale as a “gif booth” installation. Hundreds of people have visited my project, moved, laughed and had fun.

Here is a glimpse of the HAPPINESS!


 

Why do I want to make it?

Tubeman always moves in a weird yet entertaining way. However, it shares some strong and magical happiness through its movements.

Happiness can be subtle and simple. I have noticed there are many simple things in life that easily makes people happy. Like a smile from a stranger on the street, a weird shape cloud in the sky, as well as the funny movement of a tubeman.

Technologies have made it simple for us to share moments in our lives with others much easier. Living in a social media era, it is natural for us to capture moments in our lives and share them. By sharing a photo of us in a certain time and space, we also share our emotions and connections to that physical space to people in another place.

Therefore I want to create an experience in which people can share a form of simple happiness easily to their families and friends through technologies. This idea leads me to create “Tubeman is happy!”.

By encouraging the users to imitate the tubeman and enabling them to create and share gifs of themselves moving, “Tubeman is happy!”is trying to make people happy while allowing them to share that happiness to others.

 


 
tubeman.gif