Reimagining the Landing Page UX & Increasing Turnover 3x Times

Challenges

We have already been working with the client for some time on the task of redesigning a custom store for the Ukrainian market.

After some time of our successful collaboration, the client came to us with the task of boosting sales of the flagship line of laptops targeted at the business segment of the audience.

As a result of a brief analysis, we came up with the idea of developing a separate landing page with the presentation of products with links to product details pages in the original store. The web page should be informational with elements of soft sell, which could later attract traffic from different sources with the help of marketing activities.

Next, we broke this project task into several subtasks and started working based on this approach:

• researching the target audience and developing user personas to better understand their pain points, needs, and preferences;
• analyzing the user experience of interacting with the product;
• brainstorming design concepts ​to make the final landing page conversion- and user-friendly;
• creating mobile and desktop prototypes of the landing page.

Solutions

Discovery Stage

First things first, working on the project began with a series of meetings with an expert team from the client’s side, who told us more about the product, its benefits, and its potential.

We also conducted a test drive of the laptop to form our own opinion about it as regular users.

Further, to understand what consumers expect from the laptop and receive a big picture, we decided to find exact queries in search engines. Our recommendation: Serpstat, which is a perfect tool for analyzing such a thing and one of the most popular services for SEO and PPC specialists.

We divided and categorized all received search queries related to laptop models, general specifications, as well as queries to buy a laptop of a specific model. It helped us build a user-friendly information architecture and landing page structure that include:

• details of this line of models, such as resistance to falls, sustainability, mobility, warranty terms;
• what makes a certain model good and how it differs from others;
• where to buy, and how much they cost.

In-depth customer data research

Additional research sources included forums, reviews, blogs, and tech videos, which helped us learn more about what these laptops are valued for, such as high performance and silent cooling mechanisms, beyond what we learned during the discovery phase.

Our UX/CRO team also had a series of meetings with the client’s sales team and engineers to get more insights into laptop functionality and user experience.

All this became the foundation for creating user personas, which is a general portrait highlighting the intentions, pain points, drivers, and expectations of the target audience.

Below you’ll find an example of one of the user personas we developed for this project, which is the target audience segment.

Planning

A list of artifacts from previous steps helped us build a basic user flow, which is as follows:

The client team also provided us with the communication strategy and brand tone of voice to make the landing page become an integral part of the whole customer journey.

Interface design with recommendations

Next, we faced the creative part of the project and delivered an engaging shopping experience to the target audience.

Structuring information and prototyping the web pages were our next steps. Artifacts from previous stages and data on what users searched, technical specifications, and features helped us in our storytelling and UX writing.

Our initial idea was to demonstrate the product at its finest at the very beginning of the landing page and further proceed with this concept in the prototyping of the whole page.

That’s the reason why we placed an eye-catching video with the demonstration of the product above the fold. As reported by Nielsen Norman Group, elements above the fold are viewed 102 percent more than those below the fold.

Other aspects our UX/CRO team wanted to highlight include:

• a whole range of laptop models, their specifications, and appearance;
• key features that are most valuable for customers;
• solutions the brand offers to eliminate main pain points.

Since every feature and block on the landing page should align with customer needs and pain points, we decided to explain each block in detail in the mockups. It allows explaining the importance of each element to the client and enables UI, content, and development teams to work quickly and easily on the further implementation.

One of the key ideas we’ve implemented was placing videos throughout the landing page to demonstrate products and their features.

According to Invesp research, almost 60 percent of consumers claim that they more trust brands that use product videos. Meanwhile, more than 40 percent of customers admitted they would purchase more products in the store that shows product videos.

As the flagman laptop series consists of a range of models with different specifications, we also faced the task of showcasing all of them, focusing user attention on main features, and enabling a quick selection of models for potential customers according to their needs.

We put together the available images, videos, and brief descriptions of the critical features to clarify which needs a specific model is suitable for.

During prototyping, we paid particular attention to the description of each feature appreciated by both ordinary users and technical experts.

In order to implement effective selling and subtle language, each feature is supported by facts and interesting details.

After receiving the sign-off from the client and their feedback, we handed over the finished prototypes for working on UI, content, and development.

When the prototypes were completed with UI and content, the webpage was laid out on the brand’s existing website.

We turned to Google Analytics, which was initially linked to the brand’s website, as well as to the online store.

Spoiler: the turnover of the flagman laptops increased 3 times since the launch of the landing page.