A “SMART” Discussion

Individual Project

Role:  Animator, Charactor Design, Story Writer, 3D Modeling Development Tool: AfterEffects, Cinema4D, Maya
Timeline: 4 Weeks | Feb - April, 2019 Deliverables: Motion, Animated Short Film


Experimenting with using “Pseudocode” to tell a noir about relationship between human and smart home technology.
* Pseudocode - a notation resembling a simplified programming language, used in program design.

In this project, I used Maya and Cinema4D to 3D modeling the characters and use After Effect to animated the stories. This project is buit based on an speculation of problem caused by a increasingly closed relationhsip between human and smart home technology. It also encourages the viewers to think about how this technology might, in any shape of form, impact how we live and behave in the future.


01. Concept 

A “SMART” Discussion is a short film consisting of 3 animated stories/chapters. Each uses black humor and irony to depict a human life in the future SMART spaces. The 3 stories discuss issues of misinterpretation from SMART home technology, the sophistication of human identification, and urveillance & controversial behavior controls.

02. Methodology 

To simulate how machine thinks, I trained myself to think, speak, and write like a machine, where I got a lot of inspiration from work by Iohanna Nicenboim, a UX Designer & Researcher who is the inventor of Thing Centered Design (TCD).  

Having done research about SMART home technology, I get to know that all algorithm of machine learning and smart home technology are built based on a simple logic, “If then do, if else then don’t”.  However, writing stories using purly programming language might turn away certain group of audience.

To me, Pseudocode, simplified programming language, is the perfect in-between language that conveys the tone of machines but simple enough to be understandable by people without coding background. It also creates an original and fun reading experience for the viewers.


01. Mis-expectation

Mis-expectation describes a dilemma where in order to strictly enforce the commands of the host (who living in ths space) and to meet the analyzed expectations, smart home objects start to run a series of absurd upgrades, which forces the host to live in an illogical environment. This story aims at discussing the complexity of expectation and mis-interpretation between human and smart home objects. For the full written script of this chapter, please click here

02. Disputable Who

How do smart home objects define us? Who decided the criteria? What is the standard? Do they really know us? This story aims at discussing the sophistication of human identities, which lead to an unsolvable argument among smart home objects. For the full written script of this chapter, please click here.

03. Clues 

Clues illustrates a scenario in a sarcastic tone that smart home objects make a prediction about the host’s future activities based on their past observations and findings on the host. By doing so, each home object carries out a series of judgment that subtly controls the host’s life. So, the key question is that who’s in control now?

This chapter aims at discussing how each minor and unconscious behavior creates a discovery by smart home objects and generates a corresponding prediction, which ironically leads to a passive controlled life of humans in the private living space. For the full written script of this chapter, please click here

The “Prism” Exhibition

In the “Prism” exhibition at Parsons School of Design, over 100 people’ve watched A “SMART” Discussion. It was suprising that most of the audience can fully understand the “pseudocode lanuage” that I’ve invented to simulate the thinking of machines. There were laughters, silence, and applaud during the screening event. Be able to experimenting a new method of telling the story by inventing a new language and be able to make it clear and enjoyable to the audience is a huge success to me.

Daily Graphics

Individual Project

Role | Visual Design, 3D modeling
Tools |
Cinema4D, Photoshop, Maya, Illustration
Timeline | Jun - Sep 2018
Duration | Daily
Deliverable | 2D/3D Graphics

These projects aim at training myself, a designer, to be as productive, improvising, and creative on the daily basis. Some of them were posted on @y_u_jie at instagram as social media contents. Most of the time I create abstract ideas because I like experimenting with different shapes, visual language, media, and 2D/3D forms. Techniques in use including photoshop, Cinema 4D, and illustration.

Motion Graphics Collection

Individual Project

Roles | Motion & Visual Design, 3D Modeling
Development Tools | After Effects, Illustrator, Cinema4D
Timeline | Jan, 2019 - Present

Duration | 2 weeks per video

Deliverables | Short films & Videos

01. See Me Through Prism

Animated Logo Design
3D in After Effect,
Kinetic Typography

Music Credits
07 Cylob - Balzouf [Cylob Industries]

Having done a few interactive installation using prisms, I was fascinated by the idea that prism can project out multiple perspectives from a single object. This is the way how I want to approach to brand myself. The main visual style of this motion is based on self-reflected personalities, simple, colorful, and dynamic. I also got some good inspirations upon transformation of geometric shapes from Bauhaus design. In terms of the technical aspect of this motion, I manipulated 3D and 2D illusions in the After Effects, and I tried to play with as much as kinectic typography animation in this motion.

02. The Wandering Earth

Title Sequence 
Chinese 1st proud Sci-fi movie,
After Effects,
Kinetic Camera Interpolation
Original Movie Trailer link
The Wandering Earth

Inspired by the first Chinese proud Sci-Fi movie, The Wandering Earth, I made a 35-sec title sequence as a tribute. The idea is to proceed with the idea of “Wandering” around the universe by using kinetic camera interpolation technique to invite the viewers to navigate around the universe using first person perspective and search for Earth. I added visual elements from Chinese culture to classic sci-fi HUD effects.  In terms of the technicel aspect of this motion, I manipulated lighting and physical simulation in the After Effects, and I tried to play with kinectic typography animation in this motion.

03.  A “SMART” Discussion

Animation | Fiction Design  
Smart Home,

Cinema4D, After Effects,
Storytelling using Code,
3D Modeling,

Full project documentation Link: 
A “SMART” Discussion
A “Smart” Discussion is short film consisting with 4 animated stories to use black humor and irony to depict a human life in future smart spaces focusing on issues of mis-expectation, the sophistication of identification, privacy and surveillance, and conflict behavior controls. In this project, I used Maya and Cinema4D to 3D modeling the characters and use After Effect to animated the stories. To see full concept and documentation of this project please click the link on the left.

04. The Vision Machine

Art Installation & Short Film  

Behance Link 
The Vision Machine
A poetric documentary of an art interactive installation that I created in 2016. The installation invites people to create their own kaleidoscopic views through drawing.

05. The Best Light (Work-in-Progress)

Music Video 

Music Video Link Elliot Moss – "Best Light"
In this particular music video, I want to explore the possibility of using gestures and lighting in the 3D space as visual clues to express the emotions in the song and the lyrics. I explored rigging, irradiate texture and 3D lighting in this motion.

Roles: Front-end, UI/UX, Full-stack, Visual & Brand Identity, Market Research
Development Tools: HTML/CSS, Wordpress, AdobeXD, After Effects, Illustrator, Photoshop
Timeline: 1.5 Months | Jun-Jul, 2019

Deliverables: Information Website

Design an information & outreach website for a wearable bio-sensor module, EmotiBit, developed by Connected Future Labs to help EmotiBit reach its stakeholders before its launching on the Kickstarter. The website is now live with growing 400 subscribers and receiving 40-60 visits on the daily basis.

Check the live site at: 

1. Design Goals
  • Fast, low-cost, yet effective
  • Be informative
  • Easy to navigate
  • Build empathy 
  • Unleash users’ imagination & desire
2. Business Goals
  • Outreach
  • Introduce EmotiBit using right information 
  • Maintain connection
  • Maintain search traffics
3. Challenges

  • Individual project
  • Balance content among niche & broad types of audience
  • Complex & multi-functional product
  • Avoid boredom & frustration
  • No previous assets & documentation


Connected Future Labs (CFL) used this website as an informative PR page and a base to introduce EmotiBit to their clients, donors, and potential customers before they launch this product on the kickstarter campaign. I did this project when I worked as a Design Intern at CFL. I designed and developed the entire site (using Wordpress) including all visual assets and imagery with advice and technical support recieved from the founder of CFL.

*Part documentation process might be omitted for confidential purposes


Having considering the requests from the founder that the website should be easily navigate, progressively informative, and after discussion, the founder and I decided to make an one-page scroll PR website.

The benefits are:  

  • Single interaction: keep scrolling

  • More controllable browsing experience

  • Browsing without interruption and distraction e.g., jumping to other pages.

  • Full story at a glances

Content Structure

So, based on the research and user behavior analysis, I made this content hierarchy chart to differentiate the level of the importance of the information. The factors of importance are: Stay curious; Increase Clearity; Maintain Connection.

Competitive Analysis & Moodboard

Wireframe & Interviews

So, based on the information architecture, I sketched out some first-version low-fidelity prototypes. The main purpose of this exercise is to decide the basic information flow on the final webpage and have an initial idea of the overall layout of the page. After conducting interviews with scientists at NYU Neuroscience Lab, I made below chart to summarize their feedback to the website.

                   * We added operational guide and project demo page later in the process.

Visual Identity & Assets Creation

Keywords:  unlocked, revealing, empowered, eye-opening, informative, freedom, plug & play

1. Color Guide

2. Typography 

3. Iconography & Infographics

So, based on the features of EmotiBit, I created these icons to visualize the ideas.

Flexible Connection


Raw Data 

Plug & Play

Wearable (anywhere on the body)

I drew illustrations to demonstrate the 3 easy steps of using EmotiBit.

4. Assets Creation

These are some examples of product pictures & videos that I took for the website.

* All image rights reserved by Connected Future Labs


01. Inner-page Jumps/Navigation

- Simple and convenient navgation

- Avoiding viewers from jumping to other pages then getting distracted away from the main page 


02. Sticky “Sign-up Form” & Navigation Bar

- Sign up at any time, no need to finish the reading

- Let viewers have the option skipping to the most important sections based on their preferences

03. Blog Post Carousel

- Read blogs without opening a new page.

- Full story at a glance

- Speed reading on blog topics and summaries

04. “Hint” Separators between sections

- Re-emphasize strengths and key sentences

- Use separators as a “hint”

- Give audience an idea of how they can achieve with EmotiBit

Responsiveness & Fluid Grid

To work around with the limitation and to create a Fluid Grid system for the wbesite, I used a Wordpress Plug-in, called Elementor. This plug-ins allows me to easily create content using a responsive grid system, and also I can manipulate the CSS (media queries) to define each breakpoint range. Now, the website can be running on any sizes of browsers including Chrome, Safari, Firefox, tablets, and Mobile Device.

Launch Version


Insider Through AR

Group Project - Hackathon

Product Design, AR, 3D Modeling

Development Tools
Unity, Vuforia, Maya, Photoshop, Adobe Xd

4 Days | Jan 2019

Project Devpost

Try it out
GitHub Repo

Client Companies: WayRay, Vuforia
Hackathon Website:


Jungu Guo / AR Developer
C# coding

Bohan Chen / UI Interface Developer
UI Interface Design, C# coding

Yujie Jiang / 3D Artist
3D modeling, 3D Animation

Ta Kai Shueh / Special Effect Developer
User interaction effect design, C# coding    

Yi Lu / Developer
Debug, Integration

How can we use AR to unveil the unseen features of a product?

Insider through AR is an application that aims at using AR to unveil the hidden features of electronic products in order to bring back the awareness of environmental issues, poor working condition, and e-waste problem brought by electronic products. Our team believes that AR could be a powerful storytelling tool for revealling hard-to-perceived phenomena that worth sharing and educating, and our team was to reveal these problems with our AR application.

Identifying Problem

Lack of awareness Electronic products have significantly improved our lives by increasing tons amount of convenience for us. While we enjoy the convenience they provides, most of us rarely think about the amount of efforts put into the production and the issues raised behind the process of us getting the products. A lack of these awareness and knowledge causes problem such as e-waste and continuation of poor worker condition in certain countries.

Electronic product 
We picked smartphone as our target because people spend a huge amount of time on it everyday; however, the components inside it are so complicated that only the professional engineers understand it. This asymetry of information  not only creates the blindness on how much the product actually costs but also how much efforts that the global manufacturers spend on it.

“We use smartphone everyday but do we really know it?”

Environmental issuesThough high technology products usually be associated with clean and eco-friendly, it is still as harmful as those products made by the heavy industry. The mining of rare metal may pollute lands and rivers. The waste of these electronic devices is also a big problem. In the US, approximately 150 million mobile phones are discarded annually. This is as serious as global warming; however, only a few people have noticed this issue.

Design Goals 

Through the project, we want to promote an awareness of these issues, discussing the negative influences which these high technology products brought out using AR as a storytelling tool. In our project, we choose to specifically mobile phone as our first product of scanning, as everyone uses it.

Awareness Interviews

To have more understanding of our observation, we conducted short interviews in the hackathon, 2 design students, 1 senior programmer, and 2 developers. The interviewees in the hackathon are all tech savvys and, on average, have more understandings about electronic device than the general public. So, it could be a good comparison group for us to have more idea about the general users.

1. From 1-5, how much do you think you know about your phone?

2. Have you ever curious about the process of making your phone or getting it?
3. Do you care about the potential hazadous impact or issues raised by your phone?
4. How many components can you name in your phone? 
5. What do you do with your broken phone or your old phone when you have a new one?  

Interview Results 


Based on the interviews, we find out that most interviees were confident at their knowledge of the phone whereas only 1 person among them could accuractely name over 6 components in their phone. Most of the people showed care to the raised environment issues but with less curiousity about their phones. Interviewess tend to returned phones to the original stores but most of them do not know how to correctly recycle their phones.

Target Audience

#1. Consumers

  • Consumers who concern environmental issues.
  • Consumers who don’t know anything about electronic products.
  • Consumers who care about the components inside the phone.

#2. Teachers & Students

  • Teachers who need educational tools.
  • Students or researchers who are  in the field of e-waste
  • Kids who are interested in electronic products

#3. Marketing Strategist

  • Advertisement suppliers who want to promote the powerful components of their products
  • Companies that care about environment and sustainability

Information Architecture

User Experience Workflow

User Interface Design

Based on the content map, we created a higher fidelity digital prototype. Due to time constraints, at this stage, we mainly focused on whether these visual elements and layouts could fulfill the basic functions and expectation for users' interactions with the app.

Core Features 

By using the application, users can scan device, such as phone, laptop, watches, etc, to receive a 3D architectural map of inner components with detailed information about the price, origins, materials etc., The application also uses intuitive 3D animations to emphasize the problem of producing and manufacturing the device that people had not paid enough attention to. The app includes three main features.

1. Entry Interface - Easy Scan

To better instruct users to scan in a correct way (the back of their phones), we added an explanation page before scanning with an instructional scan animation.

2. Main Page - Explosive Check

By tapping anywhere in this page, a explosion map of inner components appears, and users can check tap each parts to check information. Information includes price, materials, origins, ways to recycle

3. Intuitive Animation

By clicking buttons at the buttom AR animation representing problems inside the production, manufacturing, after life appear. Our team believe not only this attracts users attentions and allow users to interact 360 degree with the images to get a better idea about the issues.

3D Modelings

The 3D model of inner components were built based on iPhone 6 Plus, and all components were done by Maya and Unity. I built these 3D models and texture based on this reference:


Final Demo to Sponsors and Critics

To Vuforia, WayRay, MIT Hackathon Committee

Hackathon Committee

Vuforia, WayRay

Demo at MIT Expo - Jan 21, 2019

Feedback and Improvements

1. Eye-catching AR
Users became very focused on the content displayed by AR.
The peak moments were:
  • The first time the animation jumped out from their phones
  • The time when 3D explosion map pumped out.

2. Interface was easy-to-use 
Overall, the interface was easy to use and follow, but because we did not have instructional page due to time constraints, the users could not know where to tap to trigger the explosion.

3. Unstable Images
Sometimes, the AR images were unstable. When the AR images disappeared, users had to scan the phone again and started over from the beginning. This caused interruption to the user flow.

4. Unnoticed Buttons
Because the AR images in the center were too large or too eye-catching, sometimes the buttons at the bottom were getting unnoticed. Our team thinks this could be solved by adding special effects upon the clickable buttons and shrink the size of AR images a little.

Hi, it’s Yujie. 

A Digital Experience Designer at NYC with a hybridized background in marketing and logistics. Graduated from Parsons (MFA).

Skilled at 2D/3D motion, animation, web, and UI/UX designs. Love experimenting with different media to tell good stories.

Currently at Squint/Opera.
Welcome contract and freelance opportunities.

Take my  Resume :)

Follow me on:
︎  |  ︎  |  ︎

Click ︎ to Say Hi
YUJIE, Parsons School of Design. New York, NY.
All rights reserved by Yujie Jiang