INTERACTION DESIGN NEW MEDIA ART
PORT FOLIO SHUANGSHUANG HUO
2
SHUANGSHUANG HUO http://shuangshuanghuo.net
W E L C O M E Hi I am Shuangshuang Huo. I’m an interaction designer and new media artist. My passion lies in the intersection of technology, art and design, and how information and messages can be communicated through an engaging experience. I have skills in web and mobile UI/UX design, motion graphics, interactive installations, photography and video making.
3
UI/UX DESIGN 4
donateNYC Android App (Released in Google Play Store) Made for Year
DSNY (NYC Department of Sanitation) 2015-2016
donateNYC is a public service app that helps NYC citizens to find local spots to donate and find second-hand goods. I designed the Android app and also participated in the UI development of iOS app.
5
6
DSNY Employee Android App Made for Year
DSNY (NYC Department of Sanitation) 2016
DSNY Employee App is designed to help NYC sanitation workers and administrators to search for the contact information of the DSNY employees who work in different garages.
7
DSNY Intranet Dashboard Made for Year
DSNY (NYC Department of Sanitation) 2015-2016
This is a dashboard designed for DSNY employees to release information about DSNY events, news, snow alerts, collecting time, weather, maintenance time, open positions etc., to DSNY official website.
8
This is a DSNY garage office in downtown Manhattan. Everyday, sanitation workers come to this window to check their upcoming shifts. In 2015, DSNY released the digital task management system “SMART 1.0“. Due to the usability issues, the sanitation employees are still used to their traditional way to manage personnels, equipments and tasks, as showed in the pictures. Therefore, we re-designed SMART.
SMART 2.0 Made for Year
DSNY (NYC Department of Sanitation) 2015-2016
I re-designed the Personnel Panel, Equipment Panel, Task Panel and Task Building Board, from the user’s work flow to the visual interface based on users’ habits. These panels are the core of the whole system.
9
NEW MEDIA INSTALLATION 10
All in Pieces Year Software Material
2015 OpenFramworks, Max/MSP, VPT 7, Syphon Wood, Iron Wire, Acrylic Front Surface Mirror
“All in Pieces” is an installation, which can grab Tweets from Twitter in real time and project them onto a set of mirror pieces. At the same time, the computer program turns every letter of the Tweets into a sound frequency.
11
The installation creates an immersive environment for audiences to resonate from their daily experience of information fragmentation, which is a social issue caused by the explosion of information on the Internet and the expanding of new media. As a primary information source, social media is gradually but deeply influencing people’s life by its “short”, “quick” and “inconsistent” characteristics. For more info, please visit :
We are drowned in this ocean of information fragments. It’s getting harder to integrate pieces of information to construct meanings from the ocean of scattered information. This is the pain of people in the digital age. “All in Pieces” reflects the issue and refines the related daily experience.
http://hss12103.x10host.com/all-in-pieces/
12
13
14
Visualization Principle
NYC Soundscape Visualization Year Software
2013 Processing
It is a computer program to visualize the soundscape environment of several spots in New York City such as Bryant Park, NYU Library, the Union Square subway station etc. From each piece of graphics that the program generated, people can clearly tell the differences of the audio environment between each place. Those differences also marked out the audio features, so they can be regarded as the audio identities of the certain places.
15
For more info, please visit : http://hss12103.x10host.com/soundscape-visualization/
16
The Chaotic Storyline Year Software
2014 OpenFrameworks, Neurosky Mindwave Sensor
It is an interactive video installation. I used a brainwave sensor to detect the concentration level of movie watchers. Only if the watcher is focused, the movie can display normally, otherwise, the playhead of the movie player will jump to a dramatic point of the story based on the calculation of the brainwave data of the watcher. People usually think they can use their mind freely and at will, but actually brain is a chaotic system that has its own way to function. By participating in this project, people can realize the twist that they have to make efforts and fight hard to control their own mind. For more info, please visit : http://hss12103.x10host.com/the-chaotic-timeline/
17
The Celebrity’s Lifetime (Web Art) Year Software
VISUAL DESIGN 18
2014 Adobe Photoshop, After Effects, Illustrator
This is a personal web art project. When scrolling down the webpage, the animations of the different celebrity’s epic moments display with the parallax visual effects, and their classical audio documents automatically play at the same time. Ask ourselves some simple questions. What do we know about Armstrong, Monroe, Martin Luther King or Edison except for the epic moments in their lives? Do we know where they came from, what they had been through and what experiences made them who they ended up as? Mass media keep mentioning them, but it turned out, it alienated them by abstracting them to be iconic idols from their real lives , and locking their lives on their epic moments. To the public, it is like they had only lived for several hours, several minutes or even several seconds. For more info, please visit : http://hss12103.x10host.com/a-celebritys-lifetime/
19
Internet Addiction (Infographics) Made for Year Software
PBS-POV 2015 Adobe Illustrator, Photoshop
POV (Point of View) is a PBS documentary series which features independent nonfiction films.
20
This infographics project is about the social issue of internet addiction. It is also a visual presentation of the background information for the independent documentary film, Web Junkie, which was broadcasted in PBS. For more info, please visit : http://hss12103.x10host .com/ pov-infographic/