head2.jpg

Redesign 'Style Quiz'

Redesign 'Style Quiz'

@ Collov.com

My role:

  • UI/UX Designer

  • UX Researcher

  • Illustrator

Type:

Work Project

(In progress)

Time:

12.2020-02.2021

Team:

  • Product Manager

  • Market Team (3)

  • Engineer Team (2)

Background

The style quiz is the main way for engaging users with our furniture & designs. It helps users find their style and now has a 1.6% conversion rate in this funnel. As part of the continuous work to improve conversion rate, this project was expected to contribute to the growth in the long term.

Research Discovery

Following graph shows the Style Quiz funnel (data from Mouseflow) :

Entry

100%

67.4%

20.9%

10.7%

8.7%

1.6%

Room Page

Project Inspiration Page

Sign Up

Project Personality Page

Project Payment Page

Payment Confirmed Page

32% 

48.8%

19% 

10.2%

7.1%

Drop off

Exit

 

What makes the 32% drop off?

From 30 effective feedback & 980 visits in this funnel observed from Mouseflow:

Not in mood:

80%

of visitors felt they were just looking around, rather than buy something.

Vague aim:

73%

of visitors started the quiz without a clear mind of an aimed space.  

Distraction:

13%

of visitors bounced to other exploration sections instead of finishing the test.

image 81.jpg

Visual Overload:

Actual scene pictures will cause more effort to recognize the image contents, especially in small-scale pictures.

Room Page

image 81.jpg

Distractive Sections:

Having extra exploration sections while taking the quiz will cause a bouncing fiction experience.

Other exploration options

Conclusion:

Most users tend to define the 'Style Quiz' as an exploration section rather than a pre-process of a serious purchase, they are still cognizing the website, thus not ready to go through a purchase phase or even have no idea about which space to improve. But they do have interests to explore around. We should spark them, help them make decisions, and encourage them to keep exploring.

Design Solution

01

Isolate quiz process, reduce distractions.

02

Minimize the visual elements.

03

Encourage users to finish the quiz process (Give not sure yet options).

Frame 1.jpg

What makes the 48% drop off?

From 283 visitors that willing to stay on this page yet still dropped, we found (observed on Mouseflow):

High Fiction Experience:

57%

of dropped visitors had experienced high fiction experience.

High Bouncing rate:

81%

of fiction experience involved Bouncing (Friction Event), which means users did too many repeat operation/navigation.

Low user engagement:

35%

of all visitors willing to finish scrolling down 1 design set.

Insight:

1. This page oberviously has a unsmooth operating experience which rises drop possibility. It wears down users interest of this website.

2. Users have limited interest on navigating the long content.

ezgif.com-gif-maker (4).gif

Room Page

Excessive operations

Users need to click too many times to navigate the menus.

(High fiction experience)

image 91.png

Side bar visual overload:​

The sidebar should have a lower visual weight compare with the dominant part. The visual focus need to be focus on one thing at a time.

Mandatory Selection:​

Users need to mandatorily select 10 pics cost to navigate 2 sets of designs on average, yet only 35% of total visitors willing to view 1 set of pictures. It wears down user patience.

image 91.png

Crowd view space:​

The UI elements are squeezing too much space of the major contents. 

Each time you select a picture, the sidebar pops out, covers the main contents.

Design Goals

01

Reorganize the screen view, maximize the main operation area.

02

Smooth the menu operation & navigation experience.

03

Give the view a hirearchy, to reduce visual load.

Design Solution

image 102.jpg

01

Reorganize the screen layout

 Maximize the main operation area, make the view fits the nature of horizontal navigation.

Layout

02
Reduce excessive clicks

Offer a full option view for users to reduce excessive navigational operations.

SBnavi

Old navigation

New navigation

menu

03
Smooth slide-bar interaction

Replace the trigger button with a slide element, fit the instinctive cognition, also give options to collapse the bar by clicking any space outside.

Old slide bar interaction

Triggle

New slide bar interaction

Triggle

04
Smooth 'Edit Selected Pic' operation

Reduce navigation length by reducing the thumbnails into small sizes; Give 'next' & 'back' to quickly edit every selected picture; highlight the panel when operating, avoid distractions.

Operation
Operation

05
Indicator Interactions​

Give users interactive feedback when they finish every selection.

Visual indicator
 
 

After Design

What I learn

Fiction events influence intermediate users the most.

Intermediate users have an intermediate interest in the website. They have the highest possibility to convert. 

Friction experiences will especially wear down this group of user's patience when they need to stay in an operation panel for a while. When we consider the fiction scores, we should focus more on intermediate users.

Define intermediate user group.

I define intermediate (user group divided by interest level) on this website is by filtering pages they visited. Like if we need 3-page visits to cognize the web product, then they had finished this stage, and they are still staying on this website and wanted to explore more on it. This group is what I called the Intermediate User Group.

Simulating the very instinctive behaviors can bring a nice experience.

Object affordances play an important fact when we cognize the use of a thing. Like buttons, slides, we instinctively know how to interact with them. Use proper affordance language can save visual information to the most important things.