The Project

Create a Landing Page for Freeletics.com to test how the users will react to combining the Training Products (BodyWeight, Running and Gym) with a single subscription. This Project is called All Access Training.

The Solution

Since the goal here is to reach our current free users who were already requesting this possibility to pay a one time fee for access to All Products. The answer to this was to build a small page with less content than our Main Page, focusing more on the emotional aspect and later perform an A/B test with this page, to compare the results of both pages.

We started putting a Video in our "Hero" area instead of an image, giving more information to our users about all the products since it would be difficult in just one image to explain all the different app features. The new page will include:

  • Instead of a large page of text explaining all the features, we’ve decided to put images of our apps with icons with smaller descriptions. Through this, we will test if we can achieve the same results more efficiently.
  • The most important part of this page was the "Community" area. The goal here was to measure if putting more emphasis on the emotional aspect (i.e. testimonials) we could achieve a better conversion rate to our subscriptions.
  • To not have a dead end on the page we decided to add a numbered animation showing an estimate of the number of users working out at that moment.

The Challenge

With the new All Access Training Page we also needed to create a new Checkout Page, making it possible for our users to pay for all products with just a one time paid subscription.

My Role

Product Designer Lead from the Monetization Team

Tools

  • Paper and pen
  • Google Analytics
  • Sketch
  • Invision
  • Optmizely

Link

https://www.freeletics.com/en/training

Flow

 Flow and Analyses of the Data to discover the most clicked areas in the Main Page and also to understand better the whole flow.

Flow and Analyses of the Data to discover the most clicked areas in the Main Page and also to understand better the whole flow.

Wireframe

  Sketching ideas to generate many ways of solving the problem (Web and Mobile Version)

Sketching ideas to generate many ways of solving the problem (Web and Mobile Version)

Grid Study

The Idea of this grid was to show a live community with not only Video Transformation but different kinds of social media with the real users from our Freeletics Community and Social Medias. 

Grid Interaction

  • Change Social Media Post to each 10 seconds. (not implemented yet)
  • Show Social Media Posts according to the user language and country. 
  • Add JS Animation SlideinUp Eg.: (https://daneden.github.io/animate.css/(not implemented yet)

Final Layout

 Final Responsive Layout Web 

Final Responsive Layout Web 

Invision

Invision to test the first flow
ttps://projects.invisionapp.com/share/E58RTJ5QM#/screens/192713198_Registration_Desktop

Opmizely 

A/B test All Access Training (50%) vs Main Page (50%)

Goal: User Registration
Time: 2 weeks
Result: 51.4% (AAT) vc 48.6% (Main Page)

CrazyEgg 

Heatmap FREELETICS - functional high intensity bodyweight training, 11-28-2016.jpg

New Checkout Page

 

Results and Learning

  • With the new Checkout Page, we increased ten times more conversions
  • With the Optimizely A/B test it was possible to conclude that we don't need a big amount of content, but rather, let the results speak for themselves through users’ testimonials.  
  • With Crazyegg we saw that users clicked on the icons and numbers expecting some interactions, so we need to think of something for this in the next version.
  • We got a very good results with the static community grid. Now we need to implement the interactions and measure the new results (The interaction was not implemented on the first version, we tried to think of a way to decrease time and test our ideas faster).