Author: jeff
Protected: Poly Conferencing
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
Vixus
PROJECT DESCRIPTION
Vixus is a gesture-operated sight sharing system designed for a augmented reality device. It makes sharing sight between friends easy and seamless. The essential idea of this project is to discover a new way to interact with augmented reality devices like using a touch screen, therefore eliminate the learning curve. This is not a functional prototype. I created this video with After Effects.
THE VIDEO
Garde RC Hovercraft
RC Hovercraft
PROJECT DESCRIPTION
This is a fully functional remote-controlled hovercraft. I designed it in Solidworks, 3D printed its shell in an FDM machine, then painted it with spray cans. I purchased some RC plane parts on an online hobby store and put them together to drive the vehicle. The chassis was carved out of a blue foam block. The hovercraft has a fan in the center to lift it off the ground, and two more in the rear for propulsion. The fans are driven by 3 brushless motors, with a total power of more than 900 watts.
DEMO
RENDERING
GALLERY
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
Axon
AXON
