AR Product Visualization

Mission

One of my clients was a marketing agency based in Atlanta Ga called Digital Yalo. While they did an excellent job working with businesses to reinvent their brand, they often needed support on some of their more technical ventures. 

One of their largest clients was an interior furnishings company that manufactured and installed window blinds, countertops, and cabinets. They often needed help convincing customers to execute the decision to renovate their homes because the customer often struggled to visualize what the final product would look like after the installation was complete. Considering how much money it costs to renovate your home, there are a lot of risks involved when you aren’t entirely confident about what you are paying for until it is completed.

To solve this, Yalo’s client wanted an AR application that their contractors could have on their iPads’ which could help customers design, decorate, and customize their renovations before work even began. This would ideally improve the customer’s confidence in making the purchase and help them decide on what look felt the best to them. 

Challenge

Being able to preview interior renovations on an iPad had several challenges that would need to be resolved. To prototype the concept, we started with just one of their products: the window blinds. To be able to render accurate window blinds in Augmented Reality, there were a couple of solutions that needed to be developed. 

First, we needed to be able to take measurements with the iPad. For our AR application to be able to render an accurately sized model in front of a window, we first needed to know the size and dimensions of the window itself. 

Second, we needed to be able to scale our 3D model representation of the blinds to fit the dimension of the window. The main issue with this problem is that there are no standard dimensions or aspect ratios for windows. They can vary in all shapes and sizes. This prevents us from being able to simply scale a 3D model to match the window without the model itself appearing skewed and distorted. 

Third, we need to be able to support a wide range of products. Between sheers, shutters, wood blinds, roller blinds, and more, they all have their unique properties that impact the way products must appear and be customized. To be able to meet this challenge, we didn’t just need a solution that worked. We needed a solution that could scale. 

Solution

Fortunately, the installation contractors were already equipped with iPad Pros, which meant we could take advantage of the extra capabilities that come with them. iPad Pro comes with LIDAR technology built into it. By integrating this functionality into our application, we could take accurate measurements of a window within the application by simply pointing the iPad’s camera at the window and tapping the top left and bottom right corners of the window. The application could then calculate the dimensions of the window and give us the measurements for its width and height. 

To scale the models, we implemented a “nine-slice” solution. We would take the original 3D model of the product we are trying to visualize and slice it into nine segments on a 3×3 grid. This way, instead of stretching the model, we can duplicate the middle segments to scale the model up to the desired dimensions. To repeat this process for several products, we developed an editor tool directly into Unity (our game engine of choice) that could import the 3D models and automatically set them up for nine-slice scaling.

Once we started scaling the solution to support a wide variety of window blinds, we needed to be able to account for the more specific details of each type. For example, shutters had handles you would use to pull them open or closed, while roller blinds had a wand tilt you would use to raise or lower them. The placement of these accessories needed to be accurate to the exact specifications the contractors use when installing the final product. Once all of the the core scaling frameworks were developed, we were able to build on top of it to support extensions that allow different products to contain unique behaviors even though they are running within the same system. 

Finally, these solutions were packaged into an ingestion engine that allowed future products to be added quickly and even future product categories to be supported without much development work. 

Result

Digital Yalo’s client was very excited by our early demos for this concept. At the time, none of their competitors had any applications like this one, and even at the time of writing, we aren’t aware of any furnishing companies that offer an AR visualization app that provides the level of customization and scaling as the one that we developed. 

By the time my contract had come to an end, the client was ready to call the existing prototype an early Beta and begin rolling it out to several of their franchises. Since then, they have ordered the continuation of this project to have variations for all of their other products, such as countertops and cabinets. 

You can learn more about this project on Digital Yalo’s website: https://digitalyalo.com/home-franchise-concepts-case-study/


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s