Augmented Reality App for Window Treatment Shopping
My Role: Research, UX Strategy, UI Design, Prototyping, Testing
Beautiful curtains are an excellent way of both decorating a home and adjusting the mood. Sometimes choosing window treatments that meet customers' needs can be a time-consuming and challenging process.
On the other extreme, augmented reality is getting popular. Windowear intends to apply this technology not just for fun or to attract people. Their goal is to help customers find a perfect fit for curtains by making the online searching process more illustrative.
In order to facilitate customers to find window treatments that is the best fit for their room style and color, I performed:
to understand what customers' challenges were while looking for window treatments
to better apply the findings
to design ideas and validate them via users' feedback
where the high-fidelity design was fleshed out
"The role of augmented reality (AR) is set to be transformative, and that’s particularly the case when it’s applied to retail," Greg Jones, director of VR and AR at Google, said. *
Insights from Google show that:
34% of users say they would use AR while shopping
61% say they would prefer to shop stores that offer AR
I conducted three 1:1 interviews and a survey which 12 participants took part in. My goal was to understand how people do window treatment shopping, what their needs and how they make a decision to buy curtains. I discovered two basic problems customers encountered during window treatment shopping:
How to find curtains of the right size (especially the length) and style
How to visualize the way curtains would look in a room
There are two things that frustrate me the most, the quality and length of the curtains.
It is hard to coordinate curtains color with the rest of the room.
I always say, changing the curtains is like changing the whole apartment!
Using the data collected from my research, I created an empathy map to understand users’ feelings, pain points, and motivations. It would give me insight into what my strategy should be in designing the AR app.
Based on the empathy map I synthesized the following persona that enabled me to better define the users by reflecting on their behavior, goals, needs and pain points. As a businesswoman, Melissa doesn’t have time for going to stores, so she makes purchases online. She loves her home and wants it to be cozy and beautiful.
In order to bring my design solutions to life and explore user experiences in the design process, I created a storyboard to visualize Melissa's story with the Windowear AR app.
Direct Windowear competitors such as Houzz, Wayfair, and Overstock use a traditional e-commerce approach with embedded AR elements. Initially, I adhered to it to create a user flow and key mid-fidelity wireframes.
After doing that I decided to explore the more challenging option to make the app stand out from its competitors and expand the use of AR.
I attempted to create an experience focused entirely on AR. I played around with the concept that most of what this app would do should happen through the camera and the interface above the camera.
Using my imagination I made some paper sketches of how a user could search for curtains through AR.
When creating a new variant of the user flow, I experimented with a different technique. Flows are made of individual interactions. A screen offers some possibilities and a user chooses one. So, instead of drawing a box for each screen title, I depicted a screen like a fraction. Above the line was what a user saw. Below the line was what they did. An arrow pointed out what a user saw next.
This approach worked well to get me an awareness of what I needed to do.
I decided to proceed with creating high-fidelity wireframes directly bypassing the low-fi wireframe stage. I wanted to show the actual interaction with the "window in my room." I couldn't do that with black-and-white wireframes.
At this stage, my goal was to create high-fidelity wireframes so that they were embedded well and seamlessly with the rest of the application. I followed the Citibank brand style to create the mobile app UI Kit.
The AR journey starts with measurements of window width and ceiling height. Based on the first dimension the app gives you a tip on how many panels you should buy to provide the proper fullness in appearance. The second dimension serves as the filter by a certain length.
Your phone is in camera mode and displays your room with the window. By clicking on the Plus-button and using the cursor you set a point at the first outside edge of the window, then move the phone along the window to the other edge and click on the Plus-button to complete.
Assume you have no preferences and don't know what type of curtains you want to buy. So, you don't use numerous filters to narrow down the search and browse by "trying on" curtains on your window. However, you can choose between two main types of curtains right away.
Staying in the AR environment, the app displays curtains according to the measurements. It means that you can see curtains hanging on the rod that extends about 15 inches beyond your window frame and hangs 6 inches above it.
You click on curtains that you think might be a good fit. In this case, you have a few options:
The About-icon brings you to the product page to learn more details and make a purchase if you like the curtains selected
You can take a photo of the window with the curtains
If you are not happy with the curtains, you can continue searching and filter it by color or header-type according to the curtains selected, or by both options
The Add-button and the Cart-button are inactive at this stage.
A new round of "trying on" curtains begins. The app shows only the items which match your choice.
Finally, you select the curtains you like. Here you can play around with the different lengths by clicking on the buttons. Also, you can move the curtains on the rod up and down to choose the right length.
The app allows you to add other items such as sheers or scarves, and see them all together in the AR environment.
You can see your shopping cart by clicking on the Cart-button.
Here is the video of how the prototype works.
I conducted usability testing with three participants. They are working professionals but at the same time, they take time to take care of their homes.
All the participants successfully completed tasks by following this scenario:
You are looking for window treatments for your living room with yellow-beige walls. But you don't know what type of curtains you want to buy. So, you browse the array of the proposed curtains and find out that curtains in yellow shades could be a nice choice. Then, you narrow down the search to find the right fit.
As people who care about their homes, participants know their preferences regarding window treatment such as curtains color and fabric. They didn't agree with the initial idea that a user didn't know what they wanted when starting to use the app. So, participants would like to have a bunch of filters at the beginning of the app in order to not waste time browsing an array of curtains. However, all the participants noted that the app was illustrative, very useful and user-oriented.
They were excited about the ability to see curtains with different colors and styles on the window.
They found highly useful feature a tip about how many panels a user can buy to achieve a look of proper fullness. So, there is no need to count.
For me, it's always an issue to imagine how curtains will look in my room. And this app can help me with it.
The interface design was like a good framing rather than distracting. I didn't really think about it and I was focused on the product.
The app is very helpful in choosing a product based on the projected view. Would recommend this app.
Designing the AR app was a fun and challenging experience. AR has huge potential for e-commerce and this technology will be developed. But for now, it isn't widespread yet. Therefore, it took me a lot of time to find relevant information about AR and I needed to put additional effort and imagination into the prototype. That was a challenge.
When the participants were doing the usability test, I was watching their shining eyes when they were changing types and lengths of curtains. This process fully captured their attention and I was happy.
The next steps would be developing a concept with numerous filters at the beginning of the app, as users requested, creating a prototype and testing it.