Nebulockr

Nebulockr

Nebulockr is a connected locker system. With Nebulockr, users can checkout and return items without limitations of time, location or manpower.

CONTENT

Concept Development

Product Design

Front-end Development

Electronics

UI Design

Solid Modeling

Back-end Development

User Testing

TECHNOLOGY

Solidworks

Photoshop

Node.js

HTML/CSS/JavaScript

jQuery Mobile

Bootstrap

Illustrator

Keyshot

MongoDB

Particle.io

Twitter.js

Nebulockr

FULL-STACK INTERACTIVE DESIGN & DEVELOPMENT

 

Nebulockr is a connected locker system. With Nebulockr, users can checkout and return items without limitations of time, location or man-power.

 

Nebulockr can be implemented in various kinds of contexts regarding inventory management, logistic services and sharing economy. For demonstration, I created three scenarios and built one fully-functional prototype for ArtCenter Modelshop. Students can checkout a tool from one Nebulockr and return it to another, using Nebulockr’s mobile app.

 

This project was created individually in 14 weeks. I designed, built and developed the physical product, the database (MongoDB), the server (Node.JS), the mobile interface (HTML/CSS/JavaScript/jqueryMobile), as well as the electronics (Particle Photon). With the feedback of several rounds of user tests, the UI/UX or Nebulockr has fundamentally evolved.

POSTERS

SCENARIO & SCHEMATIC

SCENARIO I : ARTCENTER MODELSHOP

INVENTORY MANAGEMENT

 

– Liberate manpower from mechanical/repetitive work

– Checkout tools on your phone

– Fetch/return tools from/to Nebulockr close by

– Individual past-due notification system

– Public log system for transparency

SCENARIO II : APARTMENT HALLWAY

CONNECTED MAILBOX

 

– Safer than leaving packages on the doorstep

– Various sizes of containers for all kinds of goods

– Fewer boxes are needed since they are all shared

– Enabling “Online to Offline” services and businesses

SCENARIO III : NEIGHBORHOOD SHARING SPACE

NEIGHBORHOOD STREET

 

– Share things you don’t use often with your neighbors

– Earn credits if someone uses your stuff

– Empowering sharing economy and O2O services

WIREFRAME & UI

PROTOTYPE & USER TEST

NEBULOCKR IN THE GRADSHOW

AR Product Demo

Augmented Reality

AR Product Demo

• Created for an online new products release conference.

• Used Solidworks, Keyshot, and Blender to process existing 3D models.

• Created QR Codes that linked to the models.

• Hosted the models on Poly’s AWS. 

• Built, tested, and deployed in 6 days.

• iOS + Android compatibility. (different QR codes)

BACKGROUND

 

Poly was going to hold an online product-release conference in early 2020. Questions were raised within the company about what would be the best way to showcase Poly’s work-from-home products on a Zoom call. My manager informed the company leadership that there might be a few things in my bag of tricks.

CONTENT

Augmented Reality

3D model processing

QR Code creation

Server management

TECHNOLOGY

Keyshot

Solidworks

Blender

Bitly

QRCodeMonkey

AR Kit (iOS)

AR Core (Android)

AWS

Bluehost

Cyberduck

Augment Reality Product Demo

Rapid Augmented Reality Solution Deployment

 

This project sounded simple at first – grab a few existing product models, make them AR ready, put them on a public server, generate some QR codes that link to the server – until I was told I had only 6 days. I ran into a ton of unforeseeable issues, such as some models being humongous in size and complexity with thousands of parts, some surfaces having wrong normals (you can see through it from one side, the wrong side), the cloth material looking horrendous on iPhones, the link shortener’s algorithm insisting that our links contain malware and blocked our server…

Poly P21

PROCESSING THE 3D MODEL

 

The 6 models I received from Industrial Designers were extremely complex with thousands of subitems, including internal parts such as PCBs, batteries, antennas etc. I cleaned up all the unnecessary parts in Keyshot, rebuilt the surfaces that had wrong normals in Solidworks, reduced polygon counts in Blender, then reapplied the material with performance-friendly ones in Keyshot to reduce size.

Generated from the original link

Generated from the shortened link

LINK SHORTENING

 

A direct link from the server is usually very long. Long links will lead to complicated QR codes. In this case, I used bitly.com to do the trick.

iOS/ANDROID

 

An Android version was requested 3 days before launch. I created a different set of QR codes in green to simplify distribution on the launch day.

iOS verion

Android version

RESULTS

 

This project was used as a presentation tool by the CEO and VP of product development on the launch day and turned out to be a success.

Pelescope

pelescope

PERISCOPE X TELESCOPE = PELESCOPE

Pelescope is a playful interactive installation designed to remotely evoke people’s interest of a place. This project has proven that a simple interaction can bring a lot of fun.

 

PROJECT DESCRIPTION

Pelescope is an interactive installation playing with the notion of “tele-presence”. Users can play with it like using a periscope in a submarine, the only difference is that pelescope has the eyepiece and the object lens installed in two different locations. There are also microphones and speakers installed on both sides, enabling players talking through the installation.

THE VIDEO

WORKING DIAGRAM

GALLERY

PELESCOPE IN THE GRADSHOW

Magic Mirror

A mighty ghost has been sealed in a magic mirror for over a thousand years. It promises to teach you casting magic spells in return if you have it unshackled. 

PROJECT DESCRIPTION

Magic Mirror is an interactive installation featuring motion sensing, voice interface, generative visual effects and projection mapping. Players can “cast” gesture-tracking “magic spells” in the mirror. The entire experience is guided by an integrated voice interface.

 

From this exploration, I gained several user experience insights, such as how to attract people to interact with a project installed in a corridor, how to create a smooth and intuitive guided voice interaction, and how to design an engaging experience based on user research and user tests.

 

In the video, you will see a fully functional installation I designed and built in 14 weeks. I learned and used Google’s open source voice interaction API, open NI (a Kinect library), Processing and many other technologies to develop this prototype. Everything you see in the video is taken from the actual experience.

THE VIDEO

WORKING DIAGRAM

PROCESS AND USER TEST

ArtCenter IxD Website

Web Design & Development

ArtCenter IxD

• ArtCenter Interaction Design Department official website

• Using WordPress as the content management system

• Fully responsive, optimized for multiple platforms and browsers

• Collaborative work. I did 20% of the design and most of the programming.

BACKGROUND

 

This website is designed and developed for ArtCenter’s Interaction Design Department, collaborating with one of my peers. I was in charge of the preliminary design and most of the coding. In general, this version is about 25 hours of design and 90 hours of development on my part, including post-maintenance. WordPress is only used as the content management system, the theme was developed from scratch(underscoreS).

HOME

PROJECT GALLERY

NEWS & UPDATE

CHAIR & FACULTY

CURRICULUM

SINGLE PAGE