Building Brand Engagement with AR

Driving business value by designing an AR mobile service application for a product oriented company 

Image from Tolleson

COMPANY
Nanawall, Carnegie Mellon University project
TEAM
Mohan Bai, Alexis China, Zohaib Khan
ROLE
Wireframing and Micro-interactions 
TOOLS
Balsamiq, Sketch, Principle 
DURATION
2 Weeks
THE OPPORTUNITY

As a product focused company, Nanawall is leaving business on the table due to inefficient processes related to customer management.

THE OUTCOME

We designed an AR application that would streamline this disjointed process, provide a delightful user experience and drive business value for Nanawall. 

SKILLS

Collaborative Sketching 

Wireframing

High Fidelity Prototyping &

Microinteraction Animations

Nanawall is an innovative product focused company, creating elegant folding glass walls and doors for affluent home owners and commercial projects.  

Nanawall’s premium products are not available through retailers such as Lowes and Home Depot, so Nanawall markets to customers through relationships with architects, interior designers, builders and directly to property owners through the internet. Service and relationships with partners are critically important to NanaWall’s success.

Their products are known for their high quality and reliability, however, customers must go through a complex, disjointed process before purchasing one. More importantly, Nanawall only interacts with their customers after purchase and when it’s time to install the product. This hurts the customer experience. NanaWall has no interaction with customers until all information has been sent in and implementation begins!

This is a huge opportunity for Nanawall to provide value. Customer reviews revealed that although the product itself is of great quality, the the process of getting to installment was troublesome. Nanawall also has to deal with a significant number of 'tirekickers' - people who are interested in the product but never intend to move past the quote stage. 

OUR CONCEPT

Our concept focuses on bridging the gap between customers and Nanawall by allowing customers to easily get the information they need to send to representatives early in the process. This allows them to get an immediate quote

and time estimate so as not to waste both their time as well as Nanawall's, and to make the entire process more efficient.

It also allows customers to engage with Nanawall from the beginning, in a creative way, strengthening brand engagement. Customers can create a profile, then scan whichever room they want to add a NanaWall to. They would then be able to test out different types and styles of walls to envision what it would look like in their home or business. The app would also prompt the user to contact a designer to move forward with the process and implement their designs.

Apple-iPhone-8-Plus-Space-Grey2.gif

1

The user selects the space for which they'd like to install a Nanawall. The app provides a brief tutorial before scanning begins. 

Diagram_dark2.jpg
Apple-iPhone-8-Plus-Space-Grey3.gif

After a brief tutorial, the app utilizes computer vision edge detection to measure customers’ rooms. Apps such as Roomscan and PLNAR utilize similar technology. 

2

Apple-iPhone-8-Plus-Space-Grey4.gif

3

A 3D model of the wall options are rendered and displayed to the customer via Augmented Reality. There's a sense of play as a user scrolls through options and compares them. Once a specific model is selected, an estimated quote is provided and customers can contact a NW rep if they want to move forward with the purchase.

OUTCOMES
Data collection 
Value to Nanawall
  • How long do users spend on the app?

  • How many sessions do users spend visualizing walls?

  • Where is the application being used?

  • What types of houses?

  • What types of neighborhoods? What location?

  • What styles lead customers to “Find a Rep” most often?

  • Which reps are getting the most attention via the app?

  • Idle user / presence detection to inform user engagement and activity

  • Learn about the longevity of decision process

  • Determine which areas are actively engaged and which are not so that growth can be expanded in lower performing areas

  • Evaluate most and least popular styles

  • Discover potential trends in geography, experience, company association, etc.

  • Increased brand engagement

  • Reps do not have to deal with 'tirekickers'

THE PROCESS
Low Fidelity
Collab Sketching.jpeg

Collaborative sketching

Paper prototyping.jpeg

Paper prototypes

Wireframes.png
Wireframes.png
Wireframes 2 .png

Wireframes

Higher Fidelity
Chatbot
CUI.png
CUI 2.png

Earlier on, we thought a chatbot, or Conversational User Interface (CUI) would help users unfamiliar with AR, but decided against it when we realized the CUI wasn’t adding enough value to the user experience and the tutorial was sufficient. 

Tutorial
Tutorial -1.png
Tutorial -2.png

Started our prototype design in portrait, but decided to switch completely to landscape. It made the most sense for this application since users view wide walls and rooms. 

Tutorial -3.png
Tutorial -4.png
Room Scanning
Scan -2.png
Scan -1.png
Scan -3.png
AR Visualization
AR Viz -1.png
AR Viz -1b.png
AR VIz -2.png
Estimated Quote
Est -1b.png
Est -1.png
Quote -1.png
Quote -2.png
Quote -3.png
Contact Page
Find Rep -1.png

Microinteraction Design

 

Well designed microinteractions are the difference between a pleasurable user experience, and a tolerable one. The overall experience of a product relies heavily on its microinteractions. They are the “feel” in look-and-feel. (Dan Saffer, 2013) 

 

For Nanawall, we wanted to design interactions that communicated the luxury feel of the brand, and even the motion of the doors they make, with smooth, gliding screen transitions. 

 

Notable interactions included:

 

1. Animated computer vision “measuring lines” when user captures their room dimensions

 

2. Capture button turning into a magic wand once measurements have been captured in order to get to the augmented reality style viewing screen

 

3. The home screen gracefully sliding to the right, and the ‘plus’ sign turning to indicate the screen locking into place, as Nanawall’s walls do. 

NEXT STEPS
Roadmap.png

With more time: 

Further needs validation would be required with Nanawall representatives, interior design firms, and customers. Speed Dating could provide a lot of information within a short period of time. 

We would have liked to conduct thorough usability testing with the application, including 'Think Alouds' and A/B Testing to make sure the interaction patterns are intuitive for NanaWall customers.

 

We also would have also liked to start exploring some of the revisions that were mentioned in the road map, such as a portrait mode setting, the ability to communicate in-app with representatives, and a conversational user interface as a source of input.