head.jpg

Redesign mobile landing page

@ Collov.com

My role:

  • UI/UX Designer

  • UX Researcher

  • Illustrator

Type:

Work Project

Time:

10.2020-03.2021

Team:

  • Product Manager

  • Market Team (3)

  • Engineer Team (2)

Background

This project aims to improve user engagement and increase the conversion rate while keeping their origin web style. I'm leading to diagnose problems by observing the data and make whole updates including UX flow and content mapping.

This case study is listed in the sequence of "locate problem", "solution", and "impact". 

Locate Problems

Aimed Users Group

For all visitors:

90% of them are first-time visitors.

77% of first-time visitors via mobile device.

25% of first-time visitors registered.

10% of new registers purchased.

To prioritize and narrow down this update, we should locate which user group's experience we are intended to improve the most. Analysis of our current users' purchase proportion, we found there is still a huge space to develop the mobile experience of first-time visitors.

Research Discovery

From 17.7k screen records, and collected 100 pieces of feedback via Mouseflow, and analyze their attentions and sentiments on the page.

From 100 effective feedback, I observed some prominent problems:

Navigation:

67%

of first-time users give up reading the introduction section at the very beginning.

Information:

32%

 

of first-time users found it too much effort to learn about the website from the introduction section.

cognition:

38%

 

of first-time users have no idea about the 3D Home Design feature (one of the core features).

Major Problem

For first-time visitors, it's quite important to help them quickly cognize the product. But the research indicates this page is failed to effectively convey information to users.

home-shortcut.png

View Rate

Attention

Interaction

Inadequate head info

99.9% of users view,

27.6s average view time,

5.8s average engagement time is given in the head section. 

The head section should contain more information and gives a general cognition of the website.

Confusing cognitive logic

67% view rate dropped here,

64% of attention lost in this section.

The introduction rushes to tell users about "how it works," it skipped the most important information"what it is." Users have limited interest on details about how the website actually runs before they know what the website about.

Excessive reading​ load

40s are spent on average if a user wants to go over the whole cognition section.

Feature introductions are too long to read. Without intuitive media, it will take too much effort to learn the information.

Low discoverability

55% of users who navigated to this section have interests to interact with this section.

However, information like design cases was tested that drives user engagement is hidden like an uninteractable picture at the middle of the page.

Redundant navigation loads

35% of page contents are supplement contents (e.g. partners, footer, policy, etc.) should take less space and be distinct from the main contents so that users can get a clear signal to stop reading when reaching the unimportant contents.

If a user navigates to the bottom and finds the contents are not that helpful, he will feel frustrated.

 
 

Improvement Process

Define Design Goals

To improve the education section for a first-time visitor. I divided the user journey into 3 stages.  Each stage has its own design goals and content strategy respectively.

Cognition Stage

What's this?

User's mental model

INTRODUCE

ATRACT

SPECIFIC

Tell users who we are, how we can make difference. Define the most valuable thing of our product. Make sure users can easily comprehend the contents.

Design Goals

Exploration Stage

What I can do?

SET TASK

GUIDE

 

INTERACT

Set a flow to lead users to experience the product, Ensure users can operate the process as smoothly as possible, and avoid excise works.

Action Stage

There we go!

CONNECT

ADVERTISE

 

SELL

Establish relationships with users, encourage activities like subscribe, register, purchase, etc.

Reorg Info Display

The average engagement time that users spend on different types of information are:

40s on cognitive info, 7s on exploration info, 3.5s on CTA info, and only 0.2s on supplement info.

However, based on the proportion of the information type,  we can easily find that

Information type proportion:

Info type ranged by engagement time:

Cognitive Info

Exploration Info

CTA Info

Suplement Info

Overall, the cognitive info took too long to read, the supplement info took too much space and had little attraction. Users have more interest in engaging with the exploration info while it only takes a small proportion of the whole page.

 

Thus I will adjust the info components as below:

I prioritize the information type that attracts users' attention the most. Increase this type of information to encourage users to engage with those contents they have more interest in.

Old Design
old head.jpg
New Design
ezgif.com-gif-maker (19).gif

Exploit head info board​

99.9% of users view,

27.6s average view time,

5.8s average engagement time is given in the head section. 

The head section occupies the most attention.

To utilize this attention weight, I put more info in the head section. Introducing important features to it, to help users quickly scan the contents.

Old Design
instruction.jpg
Sup Info.jpg
New Design
New Design Sup Info.jpg

Emphasis the main point

reading length was reduced. Expend info with "+" only when viewers want to read.

Scrolling brands info

Brand info will be horizontally scrolled. So that viewers can navigate the whole brand info and avoid reading that long.

Compress info display

70% of reading length was reduced. Expend info with "+" only when viewers want to read.

 

Redesign Medias & contents

illustration diagram.jpg

Design the new illustrations 

Since it's a solo update project, I was asked to design the new illustrations too. I design the new set of illustrations according to existing styles in Corel Draw.

Abstracting the whole story and display in a narrative way is the easiest and quickest way to tell a product story. 

Old Design
Inspiration Photo.jpg
New Design
New Design.jpg

Shorten the instruction length

30% of the reading length was cut. Use higher stage-based description instead of introducing technical terms, make user easier cognize the process. 

Optional extensive info

For users that need more introduction info or prefer video media, offer optional tutorials while not occupying too much space. 

Redraw the illustrations

The original illustration was reported as too abstract. Users need extra efforts to cognize the visual contents. So I draw a new set of illustrations to clarify the process.

Encourage Exploration

Old Design
previous design.jpg
New Design
New Exploration.jpg

Set core features to three different explorable sections

Encourage users to explore abound functions, help them cognize more about our core features.

A proper section name

For each section, always give a word from the users’ perspective to understand the purpose of this section.

Give direct access to awesome features!

Add some direct “try space” to encourage users to play around the space, so they can pick up & purchase furniture directly. (No need to purchase the design first)

 
 

After Design

Design Impact

From two weeks after launching the new page, we found user's satisfaction and engagement have successfully increased.

From 18 effective feedback & 2.1k new visits:

Navigation:

17%

of first-time users give up reading the introduction section at the very beginning, drop from 67%

Information:

5%

 

of first-time users found it too much effort to learn about the website from introduction section, drop from 32%

cognition:

8%

 

of old users have no idea about the 3D Home Design feature (one of the core features),

drop from 38%

Conversion Rate Increase:

37% of first-time visitors registered.

15% of new register purchased.

+12%
+5%

What I learnt

The information structure and storytelling experience of a web product play an important role in first-time visits. An easy-cognizable flow is especially crucial in this experience.

 

Analytic tool (GA4) only tracks data on pageviews and purchase behaviors. However, it gives limited info that shows users' activities on the web product interface to optimize product design. 

I learned how to use heat map tracking tools to observe direct user reactions on the website. I found my interest in this type of research & design project because it allowed me to take a closer look at real user reactions. Compared with in-person interviews & questionnaires that contain lots of subjective perspectives, the data we collected from usability testing tools allowed me to see the most straightforward feedback.

I would really like to work more on  this type of project in the future.