Select Page

redesign for a real app

decormatters

 

Time duration:

 08/2018 – 09/2018 (8 weeks)

My role:

I collaborated with Yi Tian. I was responsible for Research, Frame user flow and Interaction Design.

Milestone:

We submitted our proposals to their stakeholders. They adopted some of them and made several changes in their latest version.

Recent update(2/11/2019): DecorMatters just reached three million users in their latest version. We would love to get more users’ feedback and make a second round iteration.

Preview

What is DecorMatters?

A home decorating app

DecorMatters is​ an ​interior design platform based in San Francisco. It launched in 2016. In the app, users can feel free to create and share their interior design ideas/projects, while social networking and shopping with ease & fun. It offers inspirations, design games, mood boards, AR camera and mobile shopping features to designers, shoppers, and players to create, share, shop and convert design concept into reality and have fun.

Why it needs redesign?

Improve conversion rate (measured by product page)

As a startup company, the business goal needs to be met after getting a large user base. Its stakeholder wanted us help them find user experience problems and improve conversion rate. The good news is Decormatters provides millions of home decor and furniture to choose from over 28+ top brands(Wayfair, Overstock, Ikea, etc.), from there users can find what they like and need.

Therefore, our redesign scope is to help DecorMatters improve the decor conversion rate by improving  furniture shopping experience from inspiration collection to make a payment and help more customers finish their room decoration

Redesign features overview

Help users achieve their goals efficiently by framing suitable user flows 

1. Optimized immersive E-commerce experience with improved purchasing flow.

2. Provide customized design styles recommendations and real user stories.

3. Improve the connection with users home by prioritizing taking home pictures .

How did we get there?

Analyze The App

Understanding main functions/IA

Because DecorMatters has so many functions and its product architecture is complicated. In order to fully understand what are the core features? What values it can provide with users? We first drew an information architecture of DecorMatters to figure out every specific functions and relevant pages.

We found although it has many functions, but there are only two core tasks:

 1. Playing design games (collage)                                                                                                                                                                                              

 2. Buying furniture

user research

Who Are The Users?

Found target users and match their needs to product features

After getting familiar with the product, I’d like to know the users more before we dive in. In 38 online survey and 8 in-depth interviews, we tried to know the demographics of the potential users, their interior design needsfrustrations, enjoyable moments, and decor shopping behavior

I knew from different dimensions, users could be divided into different categories. But here, considering the main functions of the product and attractions to different users, I found three main user groups. People who need decorate their home can browse pictures, get inspirations, search for certain rooms/furniture/decor styles. People who like designing can create and publish their works and browse/like others’ works

 

 

User Journey?

Focusing on the decor shopping experience, I listed out the touch points in the different phases of user journey collecting from the 3 main potential user segmentations above. 

Main problems:
  • Having a hard time choosing furniture/decorations from various styles
  • No place to find real feedbacks/pictures about the furniture
  • Hard to imagine how the room looks like after selecting several items

Cognitive Walkthrough

So how’s the user experience in DecorMatters?  To understand the whole process, I conducted 4 exploratory user testing and heuristic evaluation. 

Through our observation and the later chatting, we found users met several problems when using this app: 

COMPETITIVE ANALYSIS

Before diving into the redesign solution, we carried out a competitive analysis focusing on the differences in the decor shopping experience. After careful comparison and selection, here are three competitors that have similar functions as DecorMatters in the same or even larger scale.

Findings

  • Unlike Houzz and Wayfair, DecorMatters lacks the last step of shopping process, which makes it cannot form a “closed loop”, and this is may be one reason for low conversion rate.
  • DecorMatters would like to encourage users design, publish, and communicate to form a prosperous community, so its picture editing tool is powerful than other apps.
  • The two main competitors have their own strengths. Houzz can provide a relatively more complete decoration experience and more professional resources, while Wayfair is more focusd on shopping.

Competitive analysis made me think about the differences between each products and find our USP (unique selling point). It forced me to figure out the logic behind products, rather than just see the surface functions.

ideation

How Can We Help Users Solve Their Problems?

We began to analysis the problems users met and thinking about deep reasons behind them.

1. New users can get lost because they don’t know how they could use it. They don’t know in what aspect this app can help them achieve their goal. Only showing beautiful pictures can’t provide the real world situation. This means there is a gap between what they see and what they can do. So how might we let them see how others users using the app to collect ideas, design their room and buy furniture? The real user stories are vivid, can arise the resonance and call to action.

2. The current purchasing flow ended up at the outside websites. Users may feel unfamiliar and don’t trust it. What’s more, if users want to buy different products, they need to input all their information (name, credit card, address, etc) again and again, which is inefficient and frustrating. So how might we redesign the purchasing flow to help users collect all the furniture they want and buy them at once? 

3. When we first tries this app and its AR camera function, we had the same question as users asked. Why do I need this camera? We found the camera can help users see how furniture looks like in their real room. So we want to encourage users take photos of their room, and based on this, they can add furniture and create their design.

 

Prioritize main problems

I used “three questions” to think about which problem should be solved firstly and which can be iterated in the later version. Using this priority frame, I can define our design MVP, and leave extension for the future iteration. (Three questions are: Does this issue prevent users from achieving their main goals? Is it difficult for users to overcome this problem? Does this problem persist?)

 

Create & Evaluate Solutions

After a second round brainstorm, we came out with several solutions to solve these problems. But considering this is an existing app with tons of users. We cannot add all these features into it. Many aspects like development difficulty, cost, time should be considered. As a result, we chose to evaluate these solutions from two dimensions: Usability and Feasibility. But during this process, we still remembered our design goal is to help users turn browsing into buying and build a link between these pictures/furniture and their rooms.

Redesign Solutions:
  • On boarding and showing customized real user stories to new users.
  • Adding cart and redesign product detail page to improve purchasing efficiency.
  • Redesign camera using experience and help users see the effect.

User Flow Proposal

We defined the core tasks module as well as the results and triggering conditions to make a complete core task flow.

Task Module

Core User Flow

New Sitemap

 

According to the user flow, we redesigned information architecture of some modules.

Wireframe

When designing the wirefram, we went through several iterations in terms of the steps, structure and content. How to let users get involved in the DecorMatters easily is one of our major focuses. For example, we decided show them personalized stories and prioritize taking photos as templates.

Redesign

1. Screening – Getting Users On Board  

When users first get into DecorMatters, few simple questions regarding their design needs and style preference will help it provided more customized content in the home page and more personalized experience throughout the App.

2. Home Page – Integrated Content & Real User Story

In user testing, we found many users thought “Feed” is not very useful and don’t know what’s the difference between “Feed” and “Inspiration”. We integrated “Feed” and “Inspiration”, added “story” to give new users another format of inspirations.

Read the decoration story from other users and gain inspiration about how to use DecorMatters to really decorate their homes.

3. Browsing – Efficient Way to Find What They Need

We found that, the top banners have always been ignored in the user testing. Another problem we found is that DecorMatters used a “Springboard” as a secondary navigation. This makes searching inefficient. Users had to tap many times to see all the furniture they like. We proposed to use personalized recommendation based on the questions they answered at the beginning to give them an immersive browsing experience. 

 “visual search” is suitable for “emotional users”.

4. Shopping – More Flexible and Fluent Shopping Flow

The biggest obstacle that users met in their shopping flow is when they want to buy a piece of furniture, they will be directed to the outside website, which required them finish the payment at once. The unresponsive and strange website just scared users. Even in some cases, the page couldn’t be found. So that most users gave up at this step. The two buttons on the bottom of the page don’t look like “buttons”. Users didn’t tap them and just left the page, which led the furniture they are interested can hard to be found next time

We added a cart to let users finish payment in DecorMatters and have a seamless shopping experience.

However, considering current resources and the difficulties to achieve this function, the team set it as a long-term goal.

5. Creating – Build Connections With Users’ Home

Using templates or camera to create designs is one of the most important functions of DecorMatters. We noticed that people like taking many photos of their room, which can help them when they come across a piece of furniture they want to buy. The real image of their room can give them a sense of familiarity. Thus, we encourage user to take photos of their rooms as templates to make decoration.

reflection & Learning

Digging the “WHY” Behind Current Design

During this redesign project, I tried to understand current design from different perspectives (marketing, developer, stakeholder) and how to balance the business goal with the redesign goal especially when I was redesigning the product purchasing page. Sometimes user experience is the product under commercial and technology constraints, just like the art of advertisement. Users hate ads but it’s also a commercial goal, and it’s the designer’s job to find the optimal solution under the constraints. 

Thinking the “HOW” For Each User Problem

Design is a scientific methodology which requires a lot of logical thinking. Facing the same research result, different designers will probably have different user flow solutions which could eventually lead to different experience. So I prefer to spend a little more time on user flows before I start more specific interface design. Does the current user flow (within the product or just user behavior) make sense? Are there any pain points in the flow that I miss out? And how the redesign flow improves the experience? If we had more time, we would do some user testing to get feedback about main features and flows.