twitter post of magic mirror demo Giancarlo Byrne demonstrating the Magic Mirror at Mage Titans

Mirror + Headless Magento

Several attendees have since quoted me as saying, "the browser is not always the front end" in my presentation at MageTitans, something of a headless Magento manifesto. That was one of several points I wanted to make with this very home-brew, proof-of-concept setup. My goal was to challenge Razoyo's developers to think of the customer experience: what should we do, not what can we do with Magento.

Customer Journey vs User Experience

We presented a use case where the merchant was a hat store in a mall. The customer chooses a hat and walks up to the mirror to look at themselves. Upon scanning the UPC code, the mirror pulls the name and price of the product from a Magento API. The user can take selfies with the built in camera and display them on the mirror to compare views.

The customer can also share the photos to their phone or purchase the product. When they select either of those options, the mirror prompts them to create a connection to their phone and provides a QR code for the link. Upon scanning, the mirror and the phone can communicate with each other via a mobile web app. The mirror sends the photos to the phone which can then be shared on social media. The mirror can also open a link in the phone to the product.

customer journey map Customer journey for Magic Mirror
phone pairing experience Phone pairing process. Mirror experience is in blue, phone is in purple.

Headless Magento Magic Mirror Github Repositories

While far from perfect, you can actually get this to work on your own machine if you want to experiment with it. Just download the various pieces from:

  • Magic Mirror Front End : razoyo/magic_mirror
  • Magic Mirror Server : amnotafraid/mm-server
  • Mobile Web App : razoyo/mm-web-app
  • Cloud Communications Server : amnotafraid/cloud-node
[embed]https://vimeo.com/235034673[/embed]