ShowTrackr – a case study for creating a landing page optimized for conversions

Building a landing page is one of the best and easiest ways to market your product or service across multiple platforms to attract more new customers.

Even if you only have an idea for a potential product or service, you can use a landing page to measure interest before you start working on it.

Identifying key issues

Since landing pages are usually created for specific business purposes, such as getting more users, subscribers, or more product purchases, their effectiveness depends a lot on design decisions.

The most important elements of a successful landing page are:

• Have only one clear conversion goal (like getting a new user)
• Make sure every element on your page supports this conversion goal
• Only one call-to-action button is always displayed, so the user can decide to use it at any time.
• Provide social validation in the form of testimonials or customer stories.
• Break up long content into subheadings, bullets, and format to make it easier to read.

Challenge

Over the past few weeks, I have made it my mission to design a landing page with the following points in mind:

• It should follow the points mentioned in the previous section (have the most important elements of a successful landing page).
• It should use common landing page design elements such as a 3-function section and testimonials.
• It should be consistent with the latest Dribbble design trends (e.g. bold typography, subtle shadows, gradients, rounded corners on cards)
• It should only use elements that are easy to create at design time and can be coded in hours.

For the landing page theme, I came up with a fictional company called ShowTrackr. ShowTrackr specializes in the automated tracking of TV series and uses machine learning to provide recommendations tailored to users tastes.

Implementation: Design

During the project, I started with the “Hero” section, as this is the part that users will see first after loading the page.

I chose a two-column layout because this way the user can mentally associate the main message with the visuals. I placed the text group on the left side of the layout because with the F-shaped reading pattern, users will start with the main message.

Using large gradient rectangles has a dual purpose. First, they draw attention to visual elements (in our case, this is an iOS app in an iPhone X layout). Secondly, they make the section look more attractive and modern.

The purpose of the third, blue gradient rectangle in the lower left corner is to subtly show the scrollability and balance the left and right sides of the design.

As for the placement of the call to action (CTA) buttons, I used them to create a frame for the structure of the landing page.

The most important part of the call to action is in this section so that the user can immediately act on it. Placing partner logos under a call to action can strengthen the user s decision.

In case you did not immediately convince the user and he needs additional information before using the CTA, the “Get started” call-to-action button is constantly displayed in the navigation bar. Thus, the call to action is always visible while scrolling and exploring the content of the landing page.

After the user has become familiar with the brand and its services, as well as with user reviews, at the end of the page is the final section of the call to action. Center alignment ensures that you eliminate any distractions that might interfere with your call to action.

If you d like to download the Sketch source file and have a look at the complete landing page design, you ll find it all here.

Implementation: Prototyping

During the prototyping process, my goal was to demonstrate the relationship between the mobile and desktop versions of the landing page.

conclusions

This challenge was a great opportunity to think deeply about landing pages and experiment with different solutions that touch on nuances such as the placement of call-to-action buttons.

At this stage, the landing page is far from complete, as in the case of a real project, this will be the starting point for developing and launching the page to measure user reactions and interactions. You then use the numbers to further improve and optimize the design.

Thanks for reading

Subscribe to Dribbble or Twitter author to keep abreast of his new publications. ?