Designing the Porta Romana furniture AR app

Image for post
Image for post

In FX Digital, we explore emerging technology to solve our clients’ problems, understanding how to design and develop different technology in order to find innovative solutions. In this project, we exploring Augmented Reality to solve a furniture company’s biggest challenge in engaging users in online shopping. We hope to improve their customers’ experience with AR.

My role

While leading the R&D in FX Digital, we explored the use-cases of AR technology. One of the use cases of AR is the visualisation of products which helps users to pick and buy products. The application allows customers to visualise and placing furniture in their home environment.

I teamed with a developer while doing the research of the technology, user research, and also the designing and prototyping of the AR application.

Research

About the company

Porta Romana is a furniture company with a mission to create beautiful and inspiring furniture pieces that would be loved by its customers. Their furniture is unique and highlighted the craftsmanship of furniture makers. It gives us the insight into designing the AR app, the 3D models need to be rendered in high quality, and lighting and texture needed to be taking attention of in order to showcase the prestigious design of the furniture.

The problem

To identify the core problems that the customers faced could be solved with our solution, we communicate with clients to discover their pain-points. The customers find it difficult to pick furniture and engage in the buying process without seeing the real products, they need a way to imagine putting the furniture in their houses, decide on the dimensions of their furniture and the style of the furniture in order to make a better choice. We look into how we could help them to make decisions less stressful and more effortless.

Idea

There is a couple of AR furniture apps in the market and AR tech is catching up a lot for the last few years. Making an AR application for the customers of the furniture company to visualise their products and show estimated sizes, then place them in their real-world environment would be a viable solution looking into the successful case of IKEA Place, an AR catalogue to showcase products of the Swedish furniture company.

Persona

A scenario and persona help us to identify the customers and users needs throughout the process. Alice is a customer of the furniture company. She finds a lamp that she likes on the website. She would like to try the furniture in her house but not sure if it would fit into the interior of her house.

The sizes of the furniture matter as she doesn’t want a lamp to be too big or too small. She would need to find the right size for the furniture. Also, the colour and materials of the lamp details need to be matching with her current setting of the house.

She is feeling worried that she might pick the wrong furniture that doesn’t fit, and need to go through the process of returning and getting a refund from the shop.

Our goal is to help her pick a lamp that looks well and fits well in her living room. The application is intuitive to use and help her to engage in the process of picking furniture, like picking one in the real shop.

Competitor analysis

Image for post
Image for post
  1. IKEA place

The IKEA Place app lets customers see exactly how more than 2000 furniture items would look on their app. They put particular emphasis on the haptic feedback of placing the furniture which is a great touch on overall user experience.

Image for post
Image for post

2. Interior define AR

In this app, users can visualise Interior Define’s furniture in their home. One of the very useful features based on our interviews is the changing of the fabric of the furniture. Users can look at different styles of furniture with the app. The fabric scroll bar could be a great way of how it could be implemented.

Image for post
Image for post

3. Home story

In this app, it measures your environment’s size and suggests products. With our particular pain points with the customers around the size of the furniture, it gives us some insight on customers’ decision based on the sizing.

Ideation

The ideation part involves coming up with the user flows, mocking up the wireframes and doing user testing on the wireframes. We iterate the process to make sure the flows and the elements on the wireframes are intuitive.

User flow

Image for post
Image for post

Initial wireframe

The initial wireframe aims to test out all the basic features of an AR app. It future-proves the technical constraints related to the user's experience before we get into details of each part of the experience.

Image for post
Image for post
Image for post
Image for post

Prototyping

This part of the prototyping involves flow to complete an AR journey. It clearly demonstrates the process needed for an AR experience and allows us to do more testing with users.

Image for post
Image for post
Welcoming page, allowing camera access and adding furniture page
Image for post
Image for post
Picking a furniture, tracking plane and further instruction
Image for post
Image for post
Notification of a tracked plane, instruction of interaction

Testing

Challenges

In the first version. We need to simplify the flow to test out the technical side of user interactions. Users are not always familiar with using AR as we expected. So we need to make adjustments on the app to make instructions clearer. Users get frustrated when they don’t understand how to use AR.

Learnings

From the user interviews and testings, we learnt that we need to improve the ease of using the app, adding more instructions and clearer flow of AR for the users.

Also, adding haptic feedback will make better user experience and improve the enjoyment of users using the app. It would also help to add information about the size and details of the furniture.

Finally, we learnt that rendering of 3D models and performance of the app are some of the main reasons of users stop using the app.

Next steps

On the app

Based on our research and findings on version 1, I made a version 2 of the app to add in details of furniture, allowing users to choose a different colour of the furniture and add features of taking images, add to wish list and contact sales within the app.

Dashboard

The dashboard of the app would allow administrators of the shop to add furniture to catalogue and edit details of the furniture. Also for quickly reply to the enquiry of the users.

The second version of the app improves the instruction and the functionally of the app to fit the needs of the users.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Result

The application sparks the interests of the clients and other clients in AR technology. We have more requests on services around AR for different use cases. The agency started exploring different AR design and development tools and create demos. For example, we used SparkAR and Lens Studio to create AR experience and filters which is a great marketing tool for a lot of our clients.

I have put together some learnings around AR design.

Written by

Designer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store