CLIENT: Personal Project

TIMELINE: March - May 2018

ROLE: UX/UI

TOOLS: Sketch, Invision, Photoshop, Illustrator

Case Study

What makes it a good Augmented Reality app?

As someone who appreciates interior design and is excited about the possibilities of mobile AR design, I started asking myself this question. Researching different AR furniture apps and trying them out, I became interested in evaluating design of the 3D Room View app by Pottery Barn. For this personal project, I discovered a number of usability problems, came up with a brand new design system, created high-fidelity mockups in Sketch and Invision, and conducted user research.

User Research

Because apps incorporating augmented reality are relatively new, it was crucial to use user testing methods that are both behavioral and attitudinal, as well as quantitative and qualitative. I kicked off user research by using behavioral methods - heuristic evaluation, remote usability testing, and desirability testing. Heuristic evaluation done on the App Store build helped me compare the design of major flows to Jakob Nielsen's ten general principles for interaction design and to see possible room for improvement. I identified five major problems with the current design, and proceeded to design a usability testing session where users would be asked to perform series of tasks involving these problematic flows.

The main research question was:

Can users successfully complete core tasks such as adding and manipulating a furniture item, taking a picture, and going through the purchasing flow?

Remote usability testing and desirability testing involved three users, and it was followed by three in-person interviews. The findings not only confirmed the problems found during the heuristics violations but added more issues to the bucket of imperfections.

Problems and Improvements

After user research, I was ready to summarize the findings. There were 6 important usability problems and 5 design improvement suggestions.

PROBLEM 1

When selecting a room set-up, user is presented with two very similar screens about the process of adding furniture to a room.

PROBLEM 2

The “size” functionality doesn’t match user’s mental model: instead of being able to see the dimensions of the item, user sees similar furniture items of different sizing.

PROBLEM 3

The app doesn’t provide a user with the most important information about a furniture item that can guide a purchasing decision. Dimensions, color, finish and price are likely the most important information.

PROBLEM 4

Users would like to have some feedback after they take a picture of the room. Currently, app doesn’t display any status of the picture upload.

PROBLEM 6

Users wanted to search for an item in the Store but couldn’t find this functionality - it doesn’t exist. Users also would like to filter the results of the search.

IMPROVEMENT 1

Users want to see sharing options as well as collaboration options (ex. overlay feature), as well as sharing to the Feed. 

IMPROVEMENT 2

Users would like to have a light setting feature that will allow them to see how the item will look in their room during different lighting conditions.

IMPROVEMENT 3

Users would like to see a Live chat option that is available from all main screens.

IMPROVEMENT 4

Users would like to be offered a “style guide” feature that will make design suggestions based on the color palettes, styles and spacing options they select.

IMPROVEMENT 5

Users would like to have sizing alerts.

Persona Creation

During the in-person interviews and based on the online research, two personas emerged. One, the primary persona, is someone who loves furnitures and curious enough to explore an augmented reality app. She appreciates sizing alerts, live chat, and a style guide. A secondary persona is a professional interior designer who uses the app for work and appreciates collaboration option, light setting feature and a variety of picture saving options. The redesigned app should meet the needs of both of them.

Sketching

After diving into the needs and the goals of the target users, I started researching other AR furniture apps on the market. This step was very important bacause I wanted to know how other designers approach some of the problems I observed during the usability testing. Apps like IKEA Place, Houzz, Wayfair, DecorMatters, Homestyler, Hutch, roOomy and others helped me develop initial user flows and helped with sketching the initial flows. My initial flow had a limited scope and didn’t include all ten problems. It’d grown a lot since then.

Low-Fidelity Mockups

After initial sketching was done, it was time to start designing the low-fidelity mockups that will incorporate some of the solutions to the ten identified problems, while keeping our personas in mind. Below are some of the core redesigned low fidelity screens. They were tested with four users, and after this some iterations were made before proceeding to the medium and high-fidelity mockups.

Design System

Following the low fidelity mocks and testing were multiple rounds of iterations until the high fidelity mocks emerged. At that point the design system and wireframe flows were finalized. I developed the design system from scratch because the old one, as it was discovered during user testing, was not working very well, and, as one of the users noted, “reminded of a furniture catalog from twenty years ago.” Design system informed my future UI decisions and helped speed up the design process.

For the colors, I chose different shades of blue and grey because, per my research, it follows users’ mental models about the color palette of the expensive furniture brand. I added some bright colors as accent because users wanted to combine shopping with entertainment. The font is Avenir because I appreciate its simple and doesn’t take attention away from the furniture or from the Room View screen.

Wireframe Flow

The final user flow expressed through the wireframes is below. It was an important step before translating the final designs into the Invision prototype because I caught some minor problems in the user flow, and had to fix couple screens.

High-Fidelity Mockups

Here are the solutions to the identified problems and suggestions, as well some other design touches.

PERSONALIZATION

Now after opening the app user sees a welcome screen where she is prompted to enter a username. While this is not as pushy as the login flow, it gives an opportunity to customize the experience in the app and keep the user engaged.

GUIDANCE

Users are guided through the app via tool tips and feedback pop-ups to facilitate fast mastery of the app and stay in control of the application.

LIVE CHAT

A 24/7 Live Chat is available for the users to help them make purchasing decisions, guide through the app, place orders, or give information.

CHANGED WORDING

The copy of the mode selection buttons now have a clear indication what exactly a user is selecting. The copy was changed from “Start from scratch” to “Choose individual items”, and other text was tweaked as well.

SEARCH AND FILTER

Meeting users’ needs for search and filter, they were incorporated into the flow. User can filter by style, color, price and dimensions.

ITEM INFORMATION

Now user can look up item information such as price, dimensions, finish, material at any point from the Room View screen. Tapping on the Info button takes user to the Item Info screen.

SIZING ALERT

If the size of the item doesn’t match with the user’s room dimensions, a sizing alert is displayed. User can dismiss it and resume the flow.

LIGHT SETTING

Based on users’ needs, a Light Settings feature was added that helps view the item under certain light conditions, such as task lighting or a day light.

STYLE GUIDE

To help users like the Jennifer persona to select the furniture, a style guide could prove to be useful. A user can select a style, color palette and finish, and they are presented with the Pottery Barn furniture collections that match his selections. A progress bar helps users get oriented in the scope of the questionnaire.

SHARING & COLLABORATIONS

Addressing the request for collaboration feature, the share screen not only contains a variety of sharing options but also an overlay feature. Users can send their designs to the in-app collaborators, and they can add their own design elements to the received image. These elements will be displayed as an overlay.

FEEDBACK

After doing some actions in the app, user is always getting a feedback about the status of things, such as a modal confirming that a picture was saved to the Camera roll, or a successful purchase.

PURCHASE FLOW

Now a purchase flow is incorporated into the app and avoids repetitive screens. It breaks down the flow into Shipping, Billing, and Review, and added a progress bar that tracks user’s progress through the purchase flow.

Click to play a walk though video of the redesign.

Final Notes

This project made me think about how long it takes for the design to catch up with the latest technological trends. While the ability to add a furniture item in AR from the technological stand point has been a solved problem for a while, it seems like UX and UI paradigms have not been developed fully. The most challenging part of this project was researching similar products, finding problems in the current design and trying to come up with more efficient and simpler solutions. The most enjoyable part for me was to analyze the results of the user research and seeing my heuristic evaluation findings being validated.

View my other projects on Behance!