Background

Made.com is a British e-commerce furniture and homeware brand based in London, France, and the Netherlands. Their mission is to offer affordable, responsibly-made furniture by collaborating with over 150 designers.

I was a Senior Product Designer at MADE between September 2017 and September 2019. In regard to this particular project, I led the UX, UI, and visual design.

Challenge

Furniture shopping online is a challenge because of an inability to accurately estimate size of an items leading to around 40% of purchases ending in returns.

We wanted to create an augmented reality feature to allow customers to visualise a piece of furniture without ever leaving their home. The feature should make the furniture visualisation intuitive, effective and fun, ultimately boosting MADE’s online sales.

“As a user I want to accurately visualise the furniture’s size and design so I can make a more informed purchasing decision”

We decide to measure success by measuring the rate of returns on AR generated items alone, as well as the revenue of the app pre and post launch of the feature.

The Discovery

Although there have been many AR apps that emerged on the market over the past years the research pool is still relatively small.

Before I began sketching, I took the initiative to study some existing AR products. This allowed me to identify the main pain points and challenges that users faced when using AR applications.

Querrilla testing IKEA Place

One of the AR application I tested was IKEA Place.

After conducting my own audit of the app, I created a document outlining some areas that could be improved from a visual standpoint as well as a usability point. By doing this, I can frame questions around these assumptions and validate them when testing with users.

I conducted 5 guerrilla usability tests in the MADE.COM showroom, where I gave 5 MADE customers (two of which had previous experienced AR technology) theee scenario-based tasks to complete within IKEA place.

Scenario example: “You are planning to buy a sofa. Open up the IKEA Place app on your phone, try to find a sofa you like and arrange it in your room.”

The plan

“There are no instructions on how to use it and the ways to manipulate objects is not clear”

“Using pinch a gesture turns the object around despite being conditioned that pinch gestures are for resizing”

“When I load an object, my phone freezes and it’s impossible to exit unless I delete the app”

I grouped insights from the testing into clustered to identify frustrations users had while using the app. These clusters were mapped in a diagram to display their importance in relation to the users and business and to prioritise design direction. 

The analysis

I created a task flow detailing the steps the users went through and highlighted the three areas where users showed most frustrations and grouped them into three themes: Place, Position, Modify.

What we learned

1 Place

Users struggled to exit the feature if there was a problem. This often resulted them to exit the app entirely

2. Position

Users struggled to get the item at a precise position and size with finger gestures

3. Modify

To modify an item, users had to exit, search for an item and then load the feature again

Define

Before getting into any designs I wanted to get an abstract view of this feature so I sketched out a story-board of the user’s potential journey using the AR feature. This allowed me to visualise the top-level user stories and add them to Jira as epics.

  • As a user, I want to know if a specific item can be viewed in my home setting

  • As a user, I want to place an item in my home setting

  • As a user, I want to position an item in my home setting

  • As user, I want to modify an item by type, colour, and material

Task flow

I began by creating a simple task flow outlining the steps users would take when using the MADE AR feature and I brainstormed multiple options to address the pain points found in usability test of Ikea place.

Place

For the placing flow I added a 'Help’ button where users can tap and have the option to refresh or exit. This would allow users to regain control incase the feature froze.

For the pain point surrounding the furniture positioning, I introduced an additional navigation feature so that users can move an item by using buttons a well as their fingers.

Position

When it came to modifying the item, users would be able to undo their changes, saving their item’s position or view alternative products.

Modify

Wireframes

I created early sketches followed by wireframes to piece together the anatomy of the app and to explore different navigation patterns and interactions. This helped facilitate discussions around functionality with the engineers earlier on in the process.

Lastly, I began applying the MADE branding and identity to the app interface and created a hi-fi prototype, so that in stakeholder meetings, kick-offs, and development mapping/QA, people can see the overall flow of the user experience.

High-fidelity designs

The AR app features instructions throughout to help users understand how to operate the interface. Icons are coupled with text to eliminate any possibility for second guessing. Each design decision ensures that users with any level of technical ability are being considered.

The interface design does not contain visual bling or unnecessary elements. We went for clear, readable typography — choosing colours with high contrast to increase legibility in outdoor, low light conditions. The design is uncluttered, clean, large and well spaced.

Users can reposition the item using a finger gestures as well as buttons. The interface includes elements that are common to other existing apps to avoid the need to reinvent the wheel and reduce friction.

Findings

Task 1: Place an item

Users had no issues with placing an item in the room resulting in a 5/5 task complete rate

Task 2: Position item

Users like the ability to move an item with the use of buttons. This allowed for accurate positioning.

Task 3: Modify item

The time it took for users to replace an item improved significantly in the prototype.

Outcome

The AR feature has received both positive and negative feedback. Users have responded well to the simplistic design. Unfortunately, negative feedback largely relates to colour accuracy of 3D-rendered products — an issue beyond our control and subject to ongoing improvements.

“The AR feature is really useful and easy to use. It helps me visualize how the room is going to look with the product!”

TrustPilot

“The items look a bit faded. They really need to work on getting them the same”

Apple store

15% less returns

AR generated items were 15% less likely to be returned

>100k sales

Since the launch of the AR feature the app saw an increase in sales.

Want to learn more?

If you'd like to explore the challenges I faced and gain deeper insights into the details of my design explorations for this project, feel free to reach out for the full case study.