Web UX/UI Design

Web UX/UI Design

A landing page is important as it is the first point where users get to on your product. A well-planned one can show users that we have their best interests in mind and answers all questions they might have, leading them to convert.

Our current co-branded landing page has recorded a high bounce rate with a low conversion rate. Therefore, our main objective is to decrease the bounce rate by redesigning the page.

Starting with problems and questions

Starting with problems and questions

"How might We…"

"How might We…"

As the traffic source is from the affiliate, we could assume that users who land on this landing page are somewhat interested in VPNs and want to learn more. To start, we created a list of ‘How Might We…’ questions based on the problems we found out from our user research to help us better align our users’ goals and brainstorm some potential changes.

PROBLEM A

We are uncertain if users are just looking to compare the various VPNs or if they are ready to purchase & commit. Additionally, some users might not actually know what a VPN is either.

We are uncertain if users are just looking to compare the various VPNs or if they are ready to purchase & commit. Additionally, some users might not actually know what a VPN is either.

HOW MIGHT WE…

Demonstrate to users – what a VPN is, why a VPN is crucial for them & how we are the “right choice”

HOW MIGHT WE…

Demonstrate to users – what a VPN is, why a VPN is crucial for them & how we are the “right choice”

HOW MIGHT WE…

Demonstrate to users – what a VPN is, why a VPN is crucial for them & how we are the “right choice”

PROBLEM B

Our streaming users are not tech savvy and are actively trying to understand if the VPN will help unlock the content they want to view but trust Techradar’s review.

Our streaming users are not tech savvy and are actively trying to understand if the VPN will help unlock the content they want to view but trust Techradar’s review.

HOW MIGHT WE…

Demonstrate to users - how VPN helps improve their streaming experience and educate them about how ExpressVPN is the right choice.

HOW MIGHT WE…

Demonstrate to users - how VPN helps improve their streaming experience and educate them about how ExpressVPN is the right choice.

HOW MIGHT WE…

Demonstrate to users - how VPN helps improve their streaming experience and educate them about how ExpressVPN is the right choice.

PROBLEM C

Our privacy/security users are a combination of tech savvy users and users who might not

understand what a VPN has to offer. They have a high intent to purchase, IF we can convince them.

Our privacy/security users are a combination of tech savvy users and users who might not

understand what a VPN has to offer. They have a high intent to purchase, IF we can convince them.

HOW MIGHT WE…

Demonstrate to users – what a VPN is, why a VPN is crucial for them & how we are the “right choice”

HOW MIGHT WE…

Demonstrate to users – what a VPN is, why a VPN is crucial for them & how we are the “right choice”

HOW MIGHT WE…

Demonstrate to users – what a VPN is, why a VPN is crucial for them & how we are the “right choice”

Design Process

Design Process

Competitor analysis

Competitor analysis

I then looked at other competitors’ landing pages to research on elements their landings are comprised of and how they present information to help users to make efficient decisions.

Design – Creating hi-fidelity mockup

Design –
Creating hi-fidelity mockup

Then I jumped in to creating hi-fidelity mockups as we have a well-established design system.

01

Create a meaningful hero section

I walked through the user journey and realized some mismatches. This landing page is usually linked after the offer mentioned in the affiliate, hence, I believe that users are expecting to see reaffirmation on the deal when they land here. However, what they see on the landing page is not the same as what they see on the affiliate article – which is very confusing. Therefore, if we update the hero section to emphasize the accurate offer, the bounce rate can be reduced.

02

Increase authority and trust

The current version uses logos of the affiliate. While this can help extend users’ connection from the affiliate site to the landing page, I believe using the author's profile image can gain trust from users more easily. Profile picture, along with his title, helps users to verify the authority quickly. It also can build a connection with users and look less spammy. I proposed to include other ratings, like AppStore rating as another trust signal.

03

Solve problem A & B

Based on our research, we should try educating users about benefits of using a VPN and empathizing how to use ExpressVPN and why it is the right choice.

The current version gives very generic information with abstract illustrations. Hence, I worked with our content strategist on content ideation and made twists on images so users can catch more meaning at a glance.

04

Solve problem C

To further educate users and empathize why ExpressVPN is a better choice, I included a comparison table where users can see why ExpressVPN stands out from other competitors and additional features that we have.

Challenges

Challenges

Adding a comparison table

Adding a comparison table

Proposing the idea of adding a comparison table was the biggest challenge I faced in this project as some of the stakeholders think that naming competitors’ names is not a good practice (that’s why we do not use it on our organic webpage). However, from a user point of view, a comparison table like this can convince them that ExpressVPN is a better option.


To get their buy-in, I quoted the use journey – most traffic comes from a webpage where different brands are compared. I also researched and showed them that our competitors are doing it too. Lastly, I created another version without naming competitors as an alternative if they really do not prefer that.

Let's Connect!

Always down for collaborations. I love to make products even more meaningful.
Let's get in touch :)

© 2024. By Mandy Tam

Let's Connect!

Always down for collaborations. I love to make products even more meaningful.
Let's get in touch :)

© 2024. By Mandy Tam

Let's Connect!

Always down for collaborations. I love to make products even more meaningful. Let's get in touch :)

© 2024. By Mandy Tam