Immersive AR Experiences for Seamless
Home Decor
UX Design
Interface Design
Student Project
-min.jpg)
Project Overview
Heem is a new app designed to revolutionize the way users shop for furniture. By partnering with top furniture stores, Heem allows users to browse extensive catalogs and visualize furniture in their own spaces using augmented reality on their smartphones. The app aims to bridge the gap between online shopping and real-world home decor by giving users a lifelike preview of how items will look in their homes.
Challenges
The challenge was to design a user-friendly interface that enables shoppers to easily browse, select, and view furniture pieces in augmented reality. Ensuring the catalog remains up-to-date with new items and integrating accurate AR placement on various smartphones were key hurdles in delivering a seamless shopping experience.
Research Goals
• Understand how users go about purchasing furniture online
• Understand what factors go into adding a new furniture piece
• Understand what factors go into adding a new furniture piece
Competitive Analysis
I took a look at different furniture websites to understand the current market for furniture shopping apps.
Some common strengths in the competitive analysis were having a great UI, discovering products through photos, and sharing room fittings with friends. Another strength is the ability to filter products by room, style, type, and brand, and saving favorite items.
Some weaknesses of current furniture shopping apps include limited options of furniture, not being able to view an item in AR, no ability to change item attributes, and inaccurate dimensions.
Some common strengths in the competitive analysis were having a great UI, discovering products through photos, and sharing room fittings with friends. Another strength is the ability to filter products by room, style, type, and brand, and saving favorite items.
Some weaknesses of current furniture shopping apps include limited options of furniture, not being able to view an item in AR, no ability to change item attributes, and inaccurate dimensions.
Research Interviews
I conducted interviews with 5 participants to understand how users browse products, add an item to their room, and purchase furniture online. Understand what factors aid the process, as well as online shopping pain points.
Research Findings
When evaluating the 5 participants, the two popular places to purchase furniture were Wayfair and Amazon. 3 participants used Wayfair due to unique pieces, great options, and an easy to use app. 2 participants used Amazon and they liked Prime shipping, the ease of finding items, and an easy checkout.
The main difficulty when shopping online for furniture had to deal with sizing. Participants mentioned that it is hard for them to visualize how an item will look in their space, and were also frustrated with an item being the wrong size as well.
Participants determined what furniture to add to a room based on need and what can fit within their room's dimensions. Pinterest and Instagram are used to look at rooms, create boards, and search for item keywords.
A majority of participants have used an AR app before. 3 out of 4 participants that used AR did not have a good experience due to the app not being realistic, inaccurate dimensions, feeling cheap, and having long loading times.
For an AR furniture app participants would like the ability to be able to view an item in their space, have accurate dimensions when viewing, and be able to change the color of an item.
The main difficulty when shopping online for furniture had to deal with sizing. Participants mentioned that it is hard for them to visualize how an item will look in their space, and were also frustrated with an item being the wrong size as well.
Participants determined what furniture to add to a room based on need and what can fit within their room's dimensions. Pinterest and Instagram are used to look at rooms, create boards, and search for item keywords.
A majority of participants have used an AR app before. 3 out of 4 participants that used AR did not have a good experience due to the app not being realistic, inaccurate dimensions, feeling cheap, and having long loading times.
For an AR furniture app participants would like the ability to be able to view an item in their space, have accurate dimensions when viewing, and be able to change the color of an item.
Research Survey
Participants were asked to rank furniture features from most to least important in order to organize the information architecture of the app. The features ranked from most to least important are item dimensions, item photos, color options, customer reviews, product description, assembly information, shipping times, and related products.
Participants also agreed that AR is useful for viewing an item virtually in a space to see if it fits dimensionally and contextually. AR has helped people solve problems by being able to view colors, arrange items in a space, and make sure an item fits in a space.
Participants also agreed that AR is useful for viewing an item virtually in a space to see if it fits dimensionally and contextually. AR has helped people solve problems by being able to view colors, arrange items in a space, and make sure an item fits in a space.
Persona
The user research findings such as visualizing the furniture in space and previous difficulties with false dimensions provided a solid foundation when creating this persona.
Sitemap
When creating the sitemap, I organized it from the most used to the least. Ioriginally had favorites as the center tab, but switched it to search because users would use that more. By having the search at the bottom tab, it opened up more space at the top of the screen too.
Task Flow 1
Based on the user research, participants mentioned that it is hard to visualize how an item will look and fit in their space. Task Flow 1 allows the user to do that by selecting a chair and placing it in their room. The changes made along the way were adding an onboarding screen for the AR mode and removing changing the chair color to make the task simpler.
Task Flow 2
Based on the research, participants used the Amazon and Wayfair apps because of the great options and ease of use. In order make Heem easy to use and showcase great furniture options, Ihad the participants test the search and filters feature. Unlike Task Flow 1, there were no changes made to this task.
Sketches
I began sketching ideas for Heem based on the screens it needed to complete the tasks. These tasks included viewing a product in AR mode, purchasing a product, and using the search and filters to locate a product. I sketched two sketches for each screen for a variety of options.
Wireframes
For this project, I ended up using Whimsical to create the wireframes. This allowed me to create the screens in a lower fidelity and not worry about the wireframes being perfectly spaced or aligned.
Logo Design Iterations
I created the Heem wordmark logo in a corporate, luxury, and startup style to get a feel for some different ideas. I then tinkered with font weights and spacing for more options.
Final Logo and Style Tile
Iended up selecting one of the upstart style logos to give the product a fresh appearance. For the color palette, I selected a blue as my primary and a red as an accent. Iprovided 10 tints for each color, making sure they would both work well on the color white. Ichose Roboto as my font because it works well with the logo and it's easy to read.
UI Kit
The UI Kit was created in Figma and includes every element and state in the Heem app. This helped me keep the design within Heem consistent and organized throughout the project.
Applying the UI Kit
I began creating my high-fidelity screens by using the components, text styles, and color styles Ihad organized in the UIKit. The following images are the high-fidelity screens of the task flows I designed.
Prototype
In order to conduct a usability test, I created a prototype using Figma with the screens created from the previous step. The Heem prototype allows the user to place an item in AR mode, as well as use the search and filters.
Usability Testing
This usability test was conducted with a prototype in Figma over Zoom with 5 users who have purchased an item online within the last year. The usability test had follow up questions to gain greater insight, as well as comprehension based questions to see what the participants had retained during the testing.
Usability Testing Goal
1.Test the overall quality and ease of use of the design.
2.Test how easily users can use AR to place an item in a room.
3.Test how easily users can add an item to their cart and use the checkout process.
4.Test how easily users can search for an item and use filters to narrow down their search.
2.Test how easily users can use AR to place an item in a room.
3.Test how easily users can add an item to their cart and use the checkout process.
4.Test how easily users can search for an item and use filters to narrow down their search.
Usability Testing Results
• Participants felt the mobile app was well organized, easy to use, and consistent with other mobile shopping apps.
• 5 out of 5 were able to place the chair in the room
• 5 out of 5 were able to add the chair to the cart and complete a purchase
• 5 out of 5 were able to use the search and narrow down the search using filters
• 5 out of 5 were able to place the chair in the room
• 5 out of 5 were able to add the chair to the cart and complete a purchase
• 5 out of 5 were able to use the search and narrow down the search using filters
Affinity Map
Big takeaways from the participants include not remembering the width, being unsure how to use AR mode, and being able to locate the search feature. Other takeaways include list items being repetitive, the homepage being overwhelming, and the product being well organized.
Revisions
Based on the usability testing results, to improve the AR mode I created an onboarding card that instructs the user how to use AR mode.
Reflection
This project was challenging because it was the first time I ever worked on a project with AR. I learned how important it is for the user to understand how AR works within an app, as well as being able to visualize a product in a space. With more time, I'd like to have the ability to add multiple items to a room and perform more testing on AR mode to see what users understand, as well as keep the design minimal.