Fantasy Football Hub is a Fantasy Premier League assistant, using AI to help users field better teams to win their leagues. They wanted to turn more article readers into paying customers, so I’ve designed a new conversion funnel and used landing page best practices to help them do so.
Team
I worked with FFH as a freelancer and, as the only designer, I worked closely with the founder and a front-end engineer.
Would rather watch a video instead?
Let me narrate the project for you, take you on a trip inside Figma, show you iterations, and give you extra context.
Goals
The company has grown organically for years, but due to a change in strategy and more recent competition, they wanted to maximise the potential of their conversion funnel. Most people subscribe to FFH just before the Premier League season starts, so the aim was to launch a new pricing page and a new onboarding funnel in time for that.
Discovery
I started with an audit of their onboarding. FFH is a content-heavy machine, so they were relying on CTAs in their blog posts to lead prospects towards a rudimentary pricing page.
Old FFH Pricing page including the three plans, reviews, and FAQs.
Time was not on our side, and there was no opportunity to talk to users or do any research deep-dive. This is an example of a project where I had to find alternative ways to forward. I’ve relied heavily on my experience working on conversion funnels and on industry best practices.
The reality was that their funnel wasn’t optimised. I’ve spotted lots of opportunities to improve it by employing best practices. My early work pointed me to three main opportunities:
#1: Small top of the funnel
→ HMW capture more people into the acquisition flow?
#2: No proof of the product
→ HMW tease visitors with our most popular feature(s)?
#3: Outdated pricing page
→ HMW make the the plans page more informative and enticing?
Opportunity #1: Small top of the funnel
I saw an opportunity for us to enlarge the top of the funnel by redesigning our homepage. The old homepage was just a list of the latest articles. Best practices tell us that the expectation of a homepage, above the fold, is to relay the main selling point, show social proof, and guide with a clear CTA. This is exactly what I’ve done here.
I’ve turned the homepage into a typical landing page leading with the main offer, showing reviews and number of members, an explanation of the benefits users can get by subscribing, and a video teaser.
Enticing one-liner to capture attention.
Different ways of showing social proof, with an image of Micah Richards (well-known footballer) in the centre.
Accordions highlighting the most important features of FFH.
Opportunity #2: Teasing users
Once we got more people interested, the next step was to dive deeper into what FFH could do for them. But what is better than telling users what a tool can do? Showing them. If we wanted to tease efficiently, we had to pick something that would be relevant and enticing. One of the highlights of FFH’s tool is helping players figure out who to transfer in and out every matchday to make use of the money available and players’ predicted points. This is the tool that we’ve used to tease.
I’ve designed a simple flow that pushed users to make a small commitment by adding their team, which we’d then analyse, give a rating, and tease with our transfer suggestions to improve that rating. If users wanted to see how they could increase their team’s probability of scoring more points next matchday, they would have to subscribe.
One of the three ways of searching for your team was by name. The other two were manual input and through FPL ID log-in.
We’d rate the team using our AI and give it a score. At the bottom, a “Suggest transfers” CTA entices people to continue.
We’d show the transfer suggestions, blur them out, and ask people to sign up to see them.
Opportunity #3: Outdated pricing page
Once users learned of the simple proposition – getting their teams from a low score to a 95/100 with a couple of transfers – they’d be primed to want to subscribe. The last step was designing a better pricing page.
The pillars I’ve leaned on were pricing anchoring techniques, highlighting the better plans, making the free plan less attractive, and topped everything off with social proof. In parallel, since the prices themselves were important, I’ve worked with the founder to optimise the tiers, to ensure that we’d be able to price-anchor effectively. Something else that was important was elevating the visual look and feel of the plans page; one of my beliefs is that a website that’s up to standards signals quality and, perhaps subconsciously, pushes people closer to taking action.
Continuous reminder of their enticing “Win or get your money back” policy.
Much clearer overview of what feature is included in which tier – much easier to see which tier is the best value.
Different design treatment for smaller breakpoints.
Design handoff
Once the team was happy with the designs and the deadline was looming, I’ve carefully handed off the designs to the front-end engineer. I also worked closely with him to provide design QA, making sure that the experience users would see was as close as possible to what I intended it to be.
Outcomes
The company didn’t have analytics running on the website before I joined. I’ve pushed for an integration with Amplitude and helped the team make sense of it, but we had no historical data. Therefore, while our new Conversion Rate was best in class according to benchmarks, we were not able to track the improvement from year-to-year.
The only metric we could look at to understand the success of the redesign was revenue generated. After taking into account the forecast based on historical growth, by the end of the typical sign-up ‘high season’ FFH saw a 120% increase in revenue compared to the expected growth. This pointed to the fact that our optimisation project was successful, beating all expectations.