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.

YUJIE, Parsons School of Design. New York, NY.
All rights reserved by Yujie Jiang