PROJECT OVERVIEW

The purpose of this project is to provide a convenient and more effective solution for furniture shoppers to preview items at home.

PROBLEM SPACE

Furniture is big, clunky, and expensive - things that can't be bought and returned easily. Buyers need to be certain about a piece before they make a purchase. The daunting part of the decision is that something might look good on the showcase floor but give a different vibe at home. So, how might we design a convenient way for furniture shoppers to test out pieces of furniture at home?

DESIGN PATTERNS

• Augmented reality

• Swipe gesture (card style)

• Browse

• Shopping Cart

LINKS

Launch prototype in Axure

Scenario 1

Browse → View single item in AR

Alfred is browsing for coffee tables to put in his living room. Since Alfred is that paranoid type about purchasing items online, he is going to view the browsed items in an augmented reality (AR) room that overlays the item on top of a real-time camera view. Hopefully this will help Alfred make more informed purchasing decisions.

Scenario 2

View all favorite items in AR

While browsing, Alfred has saved a few items into his Favorites list. He now wants to view all of these items in the AR room and compare them before adding to the cart.

defining the user

I created an ad-hoc persona representing my target users. It helps me focus my design rationale and direction. Since I personally know a good handful of users represented by this persona, it was easy for me to understand needs without extensive user research.

The persona I crafted, Alfred Busyton, is representative of the young techies who work flexible jobs while attending grad school. Because Alfred is so busy, he would appreciate a convenient solution for the time-consuming task of purchasing new furniture. Alfred is also someone who is risk-adverse, usually planning ahead before making big decisions.

What's the Journey?

Sketching out a user journey helps build empathy for the target users. Storyboarding also reveals areas where the app provides the most value because it makes you think about each step from beginning to end. This method can be used to communicate ideas to the audience, allowing them to visualize the app's purpose - why there is a need for it.

In order to understand the full context of the scenario, I had to assume the role of Alfred to frame my story of decision making in purchasing new furniture for the home.  I thought about time of the day when Alfred would be researching furniture products.

QUESTIONS TO CONSIDER:

• Where would Alfred be sitting and doing when he decides to shop around?

• What mediums would Alfred use to shop?

• What does Alfred consider when purchasing furniture?

• What would be useful for Alfred to make a decision?

How will it work?

After framing the story of how Alfred would shop from beginning to end, I mapped the components needed to complete this furniture shopping task in a flow diagram. I started out with stickies and white board marker while creating the user flow. It makes each step of the user journey easily adjustable in the case that you change your mind and want to place one of the stickies in a different part of the journey. I originally only mapped how the user would browse items, test them in the AR room, and add to the cart. For a more delightful experience, I added nice-to-have pieces such as a place to bookmark items and quickly access them (a favorites list). This favorites list was also meant to allow the user to easily compare all bookmarked products in AR at once. The user is able to save time without having to switch in and out of AR mode.

MAKE IT SIMPLE

The flow was the hardest part for me to figure out because of the zigzag mobile structure and the heavy use of gestures. I ended up cutting out the check availability/pickup in store feature after a few flow iterations because my app started to get complicated, especially when I wanted to implement a heavy gesture navigational system. Alfred is a simple, no fuss kind of person so I wanted to steer away from adding too many features. I wanted to focus on the browsing-to-AR-to-cart flow. 

navigating the zigzag

Building a sitemap for a mobile app was actually much more difficult than I had imagined. This is because of all the extra hidden layers, and the workflow in mobile apps are not necessarily straight; many times it is circular or zig zagging. For my initial sitemap sketch, I looked at existing examples to frame how I would structure mine, taking note of what things most people would likely want to access first in a mobile app. It was quite helpful in visualizing what the app would look like and the user flow while being able to organize each piece.

Gestures and affordances

The biggest issue I ran into with wireframing is figuring out how to communicate gesture interactions. My app is heavy on the swiping back and forth between hidden lateral windows. Discoverability was also an issue because gestures are non-visual and not obvious.

Originally, my idea was to have thumbnails draggable to a target. After discussing with a colleague, we agreed that the drag and drop was more of a distraction. It didn’t add much value and would be more confusing if anything. So I decided to only use swiping back and forth to switch between windows while offering more obvious affordances in addition to the invisible gestures. Now, the user has options of how to use the app. It also allows the user to learn and evolve the more they use it. I included dot indicators fixed to the bottom of the screen to give the user a visual placeholder. If they get lost, they can also use the fly-out hamburger menu to navigate back to top level pages.

Results

The AR experience offers a convenient in-the-moment solution to shopping online at home . With the ability to virtually test a piece of furniture in its intended environment before purchase, buyers are now empowered to make better informed purchasing decisions that they can feel confident about.