Project Spyglass: 4 Weeks to a Working Augmented Reality Prototype

Contentstack and Valtech built a working Augmented Reality showcase in less than 4 weeks of development. Here you’ll find the resources to the full story: how we built it, what we’ve learned, and of course, how you can try it for yourself.

The brief was to build a production-ready (or as close as possible), open-sourced, mobile-web-based (for maximum accessibility) augmented reality demo that leveraged Contentstack’s content experience platform and headless CMS.

Spoiler alert: We did it.

Here’s another spoiler: You can view the demo video below, and try it for yourself here: spyglass.valtech.engineering

Read the full story of how we built Project Spyglass at the links below:

Week Zero: From brief to concept

Week One: From concept to game plan

Week Two: Content modeling and interaction building

Week Three: Integration!

See the evolution of the project in th video:

Check out the full video playlist here

What Did We Learn?

1. Start with “Why?”

Augmented reality applications should not just be built out because they are “cool”. Any new customer-facing touchpoint needs to respond to user needs. We learned that AR is useful for distilling large volumes of potentially complex information, and coupled with personalization technology, can provide a customized retail experience that helps filter through potentially confusing purchasing options. This was our starting point and our anchor throughout the entire project.

2. Use tools that simplify

Technology can help. After extensive research on Augmented Reality frameworks and methodologies, we selected the following technology stack:

• A-frame, which is a way to describe a 3D scene in an HTML-like markup
• AR.js, which layers that 3D scene on top of camera pixels
• Parcel, a low-configuration bundling tool
• Contentstack, to provide the content to the application in real time via its headless GraphQL API.
  

3. Work in parallel

A very small team (4 people) built this demo in 4 weeks. The trick was having all parts of the project being developed simultaneously, and iterating throughout the course of the project. 

• Content: Mapping content properly is essential, so start early and continue to iterate.
• Design: Keeping with our “why”, the goal was making the application easy to interact with, so our designer iterated on sketches and concepts and designs right until the very last day.
• Engineering: Work out individual scenarios, then put them all together later.

4. MACH is Essential

Having an API-first headless CMS made it possible to quickly upload content and pull it into the application. MACH (microservices, API-first, cloud-native and headless) technologies make it quick and easy to build out new touchpoints, whereas with a more traditional system it would have taken much longer to create an environment where this innovation could be built.

Want to Learn More?

Watch lead architect Jason Alderman and Contentstack Head of Product Marketing Sonja Kotrotsos delve deeper into all the lessons that we learned from building Project Spyglass in this session from TNW Conference.