Heem

Designing an end-to-end mobile app for a fictional interior design company featuring Augmented Reality.

Project Background

Heem is a brand new app for interior design. They have partnerships with a number of top 10 furniture stores in the U.S. Heem is currently scanning all the catalog items featured by these stores, as well as setting up processes to keep their catalogs updated.

Heem believes that offering a truly big catalog makes a significant difference to the user experience and furniture, they believe, shouldn’t come necessarily from only the same store. They aim to solve the problem of a customer agonizing over a piece of furniture in a store by seeing it in their own home and taking the furniture shopping experience to the next level.

The goal of this project was to design a new mobile app that allows users to view a catalog of furniture and place it in their home via Augmented Reality.

*Heem is a fictional company

Project Details

Client: Heem
Role: UX/UI Designer
Team: Solo, with mentor guidance
Deliverables: An end-to-end new mobile app, updated branding
Duration: 80 hours
Tools: Sketch, Illustrator, Photoshop, InVision

Objectives

Design an app in the iOS platform that allows users to view a catalog of furniture and place it in their home via Augmented Reality

Design Process

1. Discovery & Research

Process: Market Research / Competitive Analysis / Contextual Interviews

Market Research

To understand the world that Heem was looking to compete in, I began my market research by looking into Augmented Reality technology.

Summary of Findings

Augmented Reality (AR) is poised to further transform the interior design industry. In 2018, a number of new AR apps hit Apple’s App Store and the Google Play Store, letting users do everything from measure distance without a tape measure to preview an entirely new living room set right in their own home.

Some experts predict that AR and VR will become the most popular choice for interior designers and drive 75%+ of consumer purchase behavior in-store and at home. Research shows nearly 80% of Generation Z are more likely to visit stores that offer interactive experiences and try products in virtual environments.

Investment in AR is rapidly growing. Forecasts for growth in AR are typically higher than those for Virtual Reality (VR), with some estimates predicting overall spending on AR/VR products and services to reach $215 billion by 2021.

Revenue growth of home furnishings websites continues into the double digits at 11.3%. By 2021, it is projected that 27% of the total revenue will come from online sales. Leading retailers introduced apps that enabled customers to visualize a product in their homes, hitting on their desire for new tech-driven experiences, but also solving a real challenge.

Agnieszka Wilk, co-founder and CEO of Decorilla says, “I’m seeing most major retailers now launching or developing their own AR apps. I think in 2 to 3 years if a retailer doesn’t have an AR app they will be at a disadvantage because customers are going to come to expect it."

Competitive Analysis

I needed to better understand the competition Heem would be up against so I decided to study other interior design apps that offered AR tools to identify their strengths and weaknesses. I then performed an app analysis by downloading each of the 5 competitor's apps and going through the process of adding and viewing a piece of furniture in AR mode to get a grasp on how other retailers utilized AR technology.

Contextual Interviews

I also wanted to have a better understanding of what consumer's needs and pain points were when they purchased furniture online, and to determine if they had any prior experience using Augmented Reality. I compiled an interview guide of 8 questions and conducted four interviews with female participants, ages 30-62. All 4 of the participants had purchased furniture online within the past 12 months or were planning on purchasing furniture online in the next 12 months. A couple of participants had experimented with using AR technology in the past - one for designing a room layout and another trying a specific interior design app that offered AR.

An interesting insight and pain point around using AR I noted during my interviews was the fact that even though an AR feature was available, it didn’t mean a consumer trusted the way an item was portrayed. Having an image depicted that is as similar as possible to the real product, and not too 3D looking will be key for a consumer trusting the feature and ultimately making a purchase.

“I like the concept of AR but think it is sometimes executed poorly. What is pictured in the app is not

always an accurate representation of the product.”

- Emily, Research Participant

After our conversations, I synthesized my findings into potential customers Needs, Wants and Desires for Heem’s app. Based on my findings, it will be imperative that Heem has accurate information on the products in their catalog, as well as multiple photos of each product offered. Reviews play a heavy role in gaining consumers trust when purchasing online so they will need to be made a priority on gathering from other customers who have previously made a purchase.

Needs:

Need to have reviews
Need to have accurate dimensions
Need to have a detailed description of the item (colors, materials, etc.)
Need to have multiple photos of the product

Wants:

Want an easy way to visualize the furniture in their room
Want a more realistic photo of the piece of furniture, rather than a 3D rendering
Want to get a more accurate representation of what the piece of furniture or item will look like in their room (correct sizing, color, dimensions)

Desires:

Desire an easy way to gather interior design inspiration
Desire a way to have a photo of their room created in 3D so they can arrange multiple pieces of furniture and adjust the pieces as they wish

Contextual Interviews

I also wanted to have a better understanding of what consumers needs and pain points were when they purchased furniture online, and to determine if they had any prior experience using Augmented Reality. I compiled an interview guide of 8 questions and conducted four interviews with female participants, ages 30-62. All 4 of the participants had purchased furniture online within the past 12 months or were planning on purchasing furniture online in the next 12 months. A couple of participants had experimented with using AR technology in the past - one for designing a room layout and another trying a specific interior design app that offered AR.

An interesting insight and pain point around using AR I noted during my interviews was the fact that even though a AR feature was available, it didn’t mean a consumer trusted the way an item was portrayed. Having an image depicted that is as similar as possible to the real product, and not too 3D looking, will be key for a consumer trusting the feature and ultimately making a purchase.

“I like the concept of AR but think it is sometimes executed poorly. What is pictured in the app is not always an accurate representation of the product.”

- Interview feedback

After our conversations, I synthesized my findings into a potential customers Needs, Wants and Desires for Heem’s app. Based on my findings, it will be imperative that Heem has accurate information on the products in their catalog, as well as multiple photos of each product offered. Reviews play a heavy role in gaining a consumers trust when purchasing online so they will need to be made a priority on gathering from other customers who have previously made a purchase.

Needs:

Need to have reviews
Need to have accurate dimensions
Need to have detailed description of item (colors, materials, etc.)
Need to have multiple photos of the product

Wants:

Want an easy way to visualize the furniture in their room
Want a more realistic photo of the piece of furniture, rather than a 3D rendering
Want to get a more accurate representation of what the piece of furniture or item will look like in their room (correct sizing, color, dimensions)

Desires:

Desire an easy way to gather interior design inspiration
Desire a way to have a photo of their room created in 3D so they can arrange multiple pieces of furniture and adjust the pieces as they wish

2. Define

Process: Develop Persona / Sitemap / User Flow / Wireframes / Mid-Fidelity Prototype

I developed my user persona, Erin, based on my market and user research. Erin is a mom of two young children and enjoys decorating her home that is comfortable but practical. When shopping for furniture online she relies heavily on reviews by others and wants to see lots of photos of different angles of the product.

One of her pain points is her limited time to deal with a lengthy return process if the item she purchases is poorer quality than expected or doesn’t appear in-person as she anticipated.

One of my goals when designing this app was to keep sections organized neatly and intuitive for a user. Observing how other interior design apps were structured, I created the main navigation in four sections - Home, Shop, My Designs (where users can store saved designs and screenshots of items they’ve made through the app), and a User Profile.

A sample user flow that a potential customer would take through the app involves browsing for a product, viewing the product's details, then choose whether or not they'd like to view the item in Augmented Reality in their own space. They'd have an option to add an additional item in AR mode then could decide to take a screenshot of the piece(s) of furniture in their room, which would automatically be saved to the "My Designs" section within the app. After saving a screenshot, the user could choose to add the products to their cart and checkout or continue to browse the app.

I then sketched some initial ideas for the screens layouts. It was apparent during my user testing that the target users enjoy purchasing items at a good price, at times even purchasing an item on sale without having a certain product in mind so I included a sale promo as well as new arrivals and additional sales on the first screens a user would see when opening the app.

I followed a simple grid-like design for the Shop section so it would be easy to browse. For the AR feature, it was important to provide some type of brief onboarding to familiarize users with the tool as not everyone will know how to navigate through AR.

After sketching the low fidelity screens, I created mid-fidelity wireframes in Sketch. During research interviews, users mentioned that gathering design inspiration was important to them so I included a tab on the home screen where users can browse home decor inspiration, even filtering by a certain style they’re looking for.

In the “Shop” section, users will be able to browse to shop by Brand, by Department, or by Style, or use the filter to search for a particular item independent of brand if they desire.

The product detail page includes multiple photos of the product so online shoppers can see every detail before purchasing. The reviews will be under an expandable section beneath the item description. Also on the product detail page are suggested decor items that would fit with the design and style of the piece a consumer is currently looking at, providing a user with more design inspiration during their shopping experience.

3. Design

Process: Brand Logo / Style Guide / UI Kit / High-Fidelity Prototype

After creating the mid-fidelity prototype, I needed to define Heem's brand. Their brand values were not determined beforehand so I wanted to characterize their brand as a company that their audience would look to for design inspiration and a reputable shopping experience. Inspiring, Appealing, Trustworthy, Modern and Sophisticated were the adjectives I decided on for Heem’s brand.

For their logo, I was looking to create something that was a bit modern and provided a little bit of context for the industry Heem was in. I played around with house shapes, furniture and geometric shapes for a logo idea before doing some research on iconic chair designs. One chair I landed on was the Barcelona chair - originally designed for Spanish royalty by Ludwig Mies van der Rohe (who famously coined the phrase “Less is More”). The Barcelona chair is seen as an icon of modern and classic design and can be incorporated into so many interior styles, adding a bit of timelessness with a modern edge.

I also wanted to incorporate a neutral color pallet with a few earthy shades to create a pleasing pallet for users browsing. I knew the imagery used in the app would add plenty of color and interest so I aimed to create a pallet that would complement almost any image.

I settled on a muted sage green as an accent, paired with a dark brown, tan, and off-white. For the final logo, I chose a sans serif font that was crisp and modern and would play nicely with the Barcelona chair icon. I chose a few different fonts to incorporate throughout the app, 2 sans serifs for a clean look and one serif font to add a little contrast.

For Heem's UI, I wanted to keep incorporate a light and airy feeling, but still grounded with some darker accents. Incorporating the simplicity from my style guide, I aimed to keep the elements used in the UI straightforward so their use would be implied and help create an enjoyable browsing experience.

4. Test & Iterate

Process: High-Fidelity Prototype / Usability Testing / Affinity Map

I then applied the new UI to Heem's app to create the high-fidelity screens in Sketch and finally the prototype in InVision.

The first two screens on the bottom left are the tabs under the Home section. Under the inspiration tab, users would be able to click on a white dot within the photo to learn more information about the product and could purchase a similar item shown in the photo.

When in AR mode, a user will be able to position the item to their liking and view detailed dimensions by double-tapping on the product. Users will also have an option to add an additional product in AR mode after clicking the “plus” icon in the bottom right of the screen. The pop-up tab will also suggest items that could complete their look, with the goal of helping users decorate their space in a similar style and purchase more products through Heem.

After finalizing the high-fidelity prototype, I performed usability testing with 17 participants, both males and females, between the ages of 24 to 62. I asked them to navigate through the app and complete 6 missions, which were:

Login to the Heem app and navigate to the "Shop by Brand" section
Navigate to Crate and Barrel's accent chair selection and view the Audra Rattan Back Chair
View the Audra Rattan Back Chair in your space via AR mode
Take a screenshot of the chair in your space
View the dimensions of the chair while in AR mode
Navigate back to the home screen from the product detail screen

VIEW PROTOTYPE

Usability Testing Feedback & Iterations

After the first round of usability testing, positive feedback overall was received about the look and feel of the app with testers remarking it felt clean and simple. 94% of testers were able to successfully navigate straight to the "Audra Rattan Back Chair" and 81% of testers successfully got to the AR onboarding screens. Participants mentioned they liked it was possible to add multiple pieces in AR and that the app offered suggestions on other products that would look best to complete their decor look. Others said they thought the AR feature was unique and enjoyed how it was possible to view an item within your own space.

There were a few interesting patterns that emerged during testing: 15% of users clicked on the illustrations during the AR onboarding screens; when asked to view the chair dimensions in AR, over 64% of users clicked on the "info" icon within AR mode rather than double-tapping the chair itself; and 33% of users were unsure of how to take a screenshot of the product in their space while in AR mode.

To improve the prototype, I enhanced the screenshot button slightly, following the design similar to that of Apple's screenshot button in camera mode to hopefully help users better recognize the function.

I also built out the filter to improve the search experience as well as added a few more screens to make moving the chair more interactive while in AR mode.

Challenges Faced and Next Steps

The two main challenges I faced during this project were designing and prototyping for Augmented Reality. The technology is still relatively in its infant stages with so much more for developers, designers, and consumers to learn.

Prototyping for AR was difficult due to the limitations of the InVision. It was tough to simulate scanning a room and include animations that indicated how to move the device to utilize the AR feature. However, I'm certain with more time and perhaps by utilizing additional programs such as After Effects or InVision Studio, a better simulated AR environment could be achieved to improve the prototyping experience.

The next steps involve completing an additional round of usability testing, finalizing further iterations, then preparing for developer hand-off.

LINKEDIN | MEDIUM | PINTEREST