Mark

A “SMART” Discussion


Individual Project

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


 

Experimenting in using Pseudocode to tell stories 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.





Overview 


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.




Workthrough



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 Series | Fiction Design  
-
Smart Home,

Cinema4D, After Effects,
Maya
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 Best Light (Work-in-Progress)


Music Video 
-
Cinema4D,

Rigging
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 3D character rigging, irradiate texture and 3D lighting in this motion.










EmotiBit.com



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: http://emotibit.com 







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






Overview



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







Ideation


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







Contact 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

Open-source

Raw Data 

Plug & Play

User-owned
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











Interactions




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





Mark

Insider Through AR


Group Project - Hackathon



Role
Product Design, AR, 3D Modeling

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

Timeline
4 Days | Jan 2019


Project Devpost https://devpost.com/software/behind-the-product

Try it out
GitHub Repo

Client Companies: WayRay, Vuforia
Hackathon Website: https://realityvirtuallyhack.com/

CREDITS   

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.

Questions: 
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:  https://www.bloomberg.com/features/apple-iphone-guts/










Prototypes 








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 UX & Motion Designer at NYC with a hybridized background in marketing and logistics.

I take my focus on Motion and User Experience design. Passionate about experimenting with different media to tell good stories and create original interaction experience. Media include motion graphics, web design, AR/VR, art installation, etc.


Currently at Squint/Opera. Welcome part-time contractor/freelance opportunities.
Take my  Resume :)

Follow me on:
Instagram | Behance | LinkedIn

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