Case Study

Landing Page

optimized for conversions

Creating a landing page is one of the best and easiest way to promote your product or service on multiple platforms to get more customers.

If you only have an idea for a potential product or service, you can use a landing page to measure interest even before building and acting on it.

Key Pain Points

Since landing pages are usually built for specific business purposes like getting more users, subscribers or more product purchases, their effectiveness hugely relies on design decisions.

Most important elements of a successful landing page:

  • Have only one and clear conversion goal (e.g. getting a new user)
  • Make sure every element of your page supports this conversion goal.
  • There is one CTA (call-to-action) button always visible, so the user can decide any time to use it.
  • Provide social validation in the form of testimonials or customer stories.
  • Break up long content with subheading, bullets and formatting to make it easier to read.

The Challenge

During the last couple of weeks, I set myself a challenge to design a landing page, with the following points in mind:

  • It has to follow the points mentioned in the previous section (points in the most important elements of a successful landing page part).
  • It has to use common landing page design elements such as the 3-feature-section and testimonials.
  • It has to be in line with the latest design trends on Dribbble (e.g. bold typography, use of subtle shadows, gradients, rounded corners on cards)
  • Only use elements, which are easy-to-create during the development part and it’s possible to code within a couple of hours.

For the topic of the landing page, I come up with a fictional company called ShowTrackr. ShowTrackr is specialized for automatic TV show tracking and uses machine learning for giving recommendations truly customized for users’ tastes.

Design

During the design execution, I started with the Hero section first, since this is the part, which the users will see first after the page loaded.
The layout I chose for the hero section is a two column layout, because this way the user can immediately connect mentally the main message with the visuals. I placed the text group on the left side of the layout because the F-shaped reading pattern the users will start with the main message first.
Using the big gradient rectangles has double purposes. One of them is that it draws attention to the visuals (in our case the iOS app within the iPhone X mockup). The other one is that it makes the overall look & feel of the hero section visually more appealing and more modern.
The purpose of the third, blue gradient rectangle in the bottom left corner is to subtly show the possibility of scrolling and balance the left and right side of the design.

About the placement of the CTA buttons, I used them to provide a frame for the structure of the landing page.

The most important CTA part is in the hero section, so the user can immediately act on it. Placing logos of partners below it can also reinforce the decision of the user.

In case the user is not convinced right away and need more information before using the CTA button, there is a permanent ‘Get started’ CTA button visible in the fixed positioned navigation bar. This way a CTA option is always visible during scrolling and discovering the content of the landing page.

After the user became familiar with the brand and its services as well as the testimonials, there is one final CTA section at the end of the page. Using a center aligned approach here ensures that there are no distractions that can get in the way of using the last call-to-action option.

Prototype

During the prototyping process, my goal was to showcase the connection between the mobile and desktop version of the landing page.

Takeaways

This challenge was an excellent opportunity to think more deeply about landing pages and experiment with different decisions that go into such details as the placement of the CTA buttons.
At this point, the landing page is far from complete, since, in case of a real project, this would be the starting point to develop and launch the page to measure the reactions and interactions of the users. Then use the numbers to further improve and optimize the design.

get in touch

Let's Work Together

If you have a website or mobile app idea in mind or you need some advice about product design, feel free to contact me
hello@sarabjitsingh.ml
Behance Instagram

© 2021 All rights reserved.