DecorMatters

DecorMatters is a free home decorating game app built for your creativity hobby. Users are able to create DIY interior design projects on templates or camera photos and share their designs with the creative community. We were asked by the client to improve the browsing and shopping experience through HCD process and design thinking. I worked with three designers together to figure out the user research and testing part and reshape the UI part by myself. I am the team lead of this project.

MY ROLE :
Research
Ideation
UX Design

TIMELINE :
Oct. 17 - Jan. 18

TOOLS :
Figma /
Invision /
Principle

Design at a glance :

DISCOVER_

Users: build empathy with users

Journey: current user journey

Usability: evaluation of current APP

So we started with evaluating the current APP with a basic usability testing and heuristic evaluation. The three key pain points we identified are: disconnection between browsing and shopping ; limited shopping entrance; confused navigation in both shopping section and browsing section.

DEFINE_

Problem I : disconnection between browsing and shopping

After we observe user clicked through the App. We found some issues:

1.1 Dead end of browsing

In the current DecorMatters, there is a disconnection between browsing page and shopping page, browsing is browsing, shopping is shopping.

1.2 Limited entrance to shopping

There is no clear clue for users to know in the browsing experience that whether they can shop those furnitures on the images. The only entrance to shopping is through tapping the bottom navigation bar.

Problem II : uncleared navigation system

The current APP has two much information at home page, users have problem recognizing what images are relevant or important to them; In the shopping section, users have to choose brand or category to see furnitures lists, which is not necessary especially for the first-time user with no clue what they are buying. users have to take two steps to actually see the furniture lists.

Problem III missed user group - the amateur

After conducted the interviews with the existing users, I found the needs of one specific user group who usually casually browsing the App is under valued. They are having a hard time making purchase decisions because they don’t know what to choose, color, materials and sizes, all make it hard for them purchase anything from the App. And they mentioned it would be great to get some advice from professional interior designers.

Research insights summary

• Don’t know where to buy. Users don’t know where to buy the furniture especially when browsing, there is no hint that tell users you can shop furnitures on home page. (lack of entrance)

• Hard to buy. 80% of the users having problem navigating through the App, which makes the whole shopping / furniture purchasing experience extremely hard for users. This, we believe, is one of the reasons user wouldn’t stay longer and actually purchase any furnitures.

• No guidance. The Amateur user group specifically brought up the question that they don’t know what furnitures to buy or which to pick and having a lot of trouble making purchase decisions. This is where interior designers could jump in and help.

IDEATION_

Translate insights into design concepts

Prioritize design options

✔️Connection between browsing and shopping;

✔️More shopping entrances

✔️Clear information architecture

💡Adding more shopping entrances

💡Links in conversation? Links within browsing section?

💡Get rid of unnecessary sections and save steps for users

Solution overview

We proposed three main solutions: create a clear navigation; increase shopping entrances; professional designer’s profile and message function to provide user a better and more fluent flow. This new information architecture saved 10 more steps from the original for users to actually purchase any furniture within the App.

DELIVER_

Solution I - Link button as shopping entrances

Building the connection between browsing and shopping

we studied how other similar products did while approaching similar problems, and we got inspiration from those products, we found lots of them are using the link button or tags trying to build this connection. Below is the design options for introducing more shopping entrances.

Hi-fi mocks for link button

Step 1. Simplify multiple sections

Category tab option explore

As we move forward with the navigation system design, we thought about how to filtering out all the photos and pictures on the homepage. After tested out a few options(including classic filter button), we settled on this category tab option. The reason we decided on this is not only it’s easy to implement, but also more intuitive interaction for users whereas filter dropdown is more suitable for website. And all the category key words are coming from the search data from engineers.

Category tab - interaction design (design iteration)

We did another round of user testing of how users can interact with the category tabs. It turns out the user got confused wether the page is refreshed or not when they are looking at the first option, which current page would refresh automatically when you tab on one specific category. This is especially problematic when it comes to the first-time users, who knows nothing about interior design and have no idea the differences between simple and modern style. So we proposed the second solution, which is the styles would slide in from the right side, so that you can see a very clear transition between pages. Users react very positively about this iteration.

Hi-fi mockups for new browsing experience

Solution III - Designing for amateur

Introducing professional designers’ profile and message

So after we interviewed many current users, we found out there was one specific user group that is undervalued, we called them the amateurs. They are the people who are actively casually browsing the DM App and has the biggest chance to buy furnitures. They mentioned during the interview they are having difficulties making purchase decisions, if they can borrow some help from the “Experts”, it will make their purchase decision making process much easier and faster. The Expert group(professional designers) have already existed in the current user groups, we just need to connect those two groups through design proposals that under the current design system. So we brought up this idea - professional designer’s profile page and message function to help the amateur people find the right furniture they want.

Designer’s profile

Find a designer who helps you design

The main reason we are proposing this chat feature is to facilitate the Amateur better make decisions with the help of professional advice. Also, designer can send product link directly through their chat box. This would be another additional shopping entrance.

Message designer and chat about your choice

Talk to your designers, build trust together

Selected features

IMPACT_

Positive user feedback

Iterative design

Success metrics & measurement