ShowTrackr — UI/UX case study of a landing page optimized for conversions
ShowTrackr — UI/UX case study of a landing page optimized for conversions

ShowTrackr — UI/UX case study of a landing page optimized for conversions

ShowTrackr — UI/UX case study of a 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.

Defining the 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.

Execution: 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.

 

Hero section of the landing page

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.

 

3-features section (benefits section) of the page

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.

 

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

 

Footer section of the landing page with the final CTA

If you would like to download the original Sketch source file and have a look at the full landing page design, you can find everything here.


Execution: Prototyping

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

 

https://dribbble.com/shots/4458284-Responsive-Landing-Page-Animation

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.

Thanks for the 50 clap ???????? if you enjoyed this article. This will tell me to write more of it! :)

Follow me on Dribbble or Twitter to get notified when I publish something new. ????

 
 

 


Click Here To See More