Redesign mobile landing page

@ Collov.com

My role:

  • UI/UX Designer

  • UX Researcher

  • Illustrator

Type:

Work Project

(In progress)

Time:

10.2020-Recent

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 observating the data and make whole updates including UX flow enhancement and content strategies.

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

Locate Problems

Aimed Users Group

To 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.

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.

Research Discovery

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

From 100 effective feedback:

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 introduction section.

cognition:

38%

 

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

Major Problem

The research indicates the educational section is failed to effectively convey information to users. Especially for first-time visitors, it's important to help them quickly cognize the product. Abstracting the whole story and display in a narrative way is the easiest and quickest way to tell a product story. 

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

69% view rate dropped,

64% 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 runs before they know what the website about.

Excessive reading​ load

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

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 correspondently.

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

To reduce the total reading load, 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.

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 section. Thus we will adjust the info components as below:

Design Solution

Keep the original design style, design intuitive media, narrative the whole experience in a narrative way.

 
 
test1.jpg
test2.jpg

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 learn

The information structure and storytelling experience of a web product plays an important role in first-time visitor experiences. A 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 learnt how to install heat map tracking and worked closely with the market team on defining the correct data categories for the valuable analytical results.

 

© 2021 Yi Liu's Portfolio