Overview

Year: May 2022
Timeline: 6 weeks
Role: UX/UI Designer, Product Strategy, Product Management, User Research, Visual Design, Prototyping, and Testing

Background

This case study delves into a comprehensive redesign of the Freetrade.io website to coincide with the introduction of new pricing and subscription models. It highlights the lead role in UX/UI design, product strategy, and management.

The project involved extensive user research, content audits, wireframing, and testing, culminating in a successful site relaunch that significantly improved user engagement and conversion rates.

Problems to solve
  • User pain points related to navigation and information access.
  • The need for a visual and functional website redesign to align with new pricing and subscription models.
  • Enhancing user understanding of and engagement with new subscription plans.
  • Improving conversion rates through a more intuitive and appealing user experience.
The goal

improve the overall user experience of the Freetrade site, aligning it with the launch of new pricing and subscription options. This redesign aimed to address existing user pain points, enhance the site's visual appeal, and effectively communicate the value of the new subscription models, with the ultimate objective of increasing user engagement and conversion rates.


In early 2022 Freetrade was to roll out significant changes to their pricing and subscription model, introducing new plans - Basic, Standard, and Plus with the assumption that it will make it easier for customers to understand which plan is right for them. Previously, the app and marketing site had been optimised towards investment account based subscriptions - General Investment Account, ISA, and Plus. Once we had the site architecture finalised, the next steps were to understand the scale of the changes required across the entire site. I also took the opportunity to leverage the findings from recent user testing completed on the current version of the site, looking at what we can take as learnings to implement and improve on the user experience of the redesign. This case study will detail the journey I lead cross-functional teams on to plan, build and launch the new Freetrade site.

Understanding who Freetrade's customers are

Freetrade has over one million customers based in the United Kingdom, with some beta customers across various European countries. However, freetrade.io is predominantly focused on acquiring UK customers and therefore all user testing completed by myself have been focused on users within the UK. We are aware that between 50 – 60% of Freetrade's customers are investing for the first time. From various user research conducted on our users, we understand that we appeal to first-time investors as we offer a user-friendly app, a free account to get started, educational content, and unlimited commission-free trades – the perfect platform for a new investor to test the stock market. We are also aware that more advanced investors prefer more technical graphs to see the past performance of a stock and this is something that Freetrade does not currently offer in-app. In addition to this, we know that Freetrade's customers are both male and female and predominantly range from the age of 20 - 40 years of age.

Pain points on current site (pre-redesign)

We were aware of some user pain points from the previous user research conducted in
November 2021:

Some users struggled to understand how to get started using Freetrade
Over half of the participants struggled to work out how to get started, they scrolled past the app download badges and also an additional section with in-app graphics/additional app download badges. After searching for some time, participants realised they would need to download the app. Other participants said they would like to go back to the educational content and learn more before beginning to invest.

Monthly pricing/account fees are not clear
Over half of the participants were unsure what the monthly account-type fees included and what they would be used for. One participant was unsure if that was the amount he would be required to invest in monthly and another thought it's the amount we invest on their behalf.

Some users struggled to locate educational content on the site
In most cases, the participants looked through various dropdowns before they could locate the 'Invest hub' dropdown which housed the educational content.

There is an overwhelming amount of content on the homepage
Over half of the participants had negative feedback on the amount of content on the home page whilst trying to locate specific information. Participants described it as overwhelming and one participant felt the amount of text gave the impression it was for very experienced investors.

What do we want to achieve and what problems are we looking to solve?

  • Improve the current known user pain points (as listed above)
  • Meet business needs through promoting new subscription plans and increasing conversions
  • Make Freetrade's offerings easier to understand – pricing and benefits
  • Re-evaluate Freetrade's USPs and focus on refining these to communicate more effectively on the homepage and other new pages
  • Improve the visual design of the website
  • Using a phased approach (due to limited resources), integrate new webpages with the existing pages ensuring there is a seamless flow between them

Next steps...

  • Content audit of entire site
    Gather inspiration from other competitors/websites
    Define new pages
    Sitemap/wireframing
    Internal focus groups/agile reviews at each stage
    Scope out development/build/implementation time
    Understand requirements from other teams - Legal, Product and Customer service etc

Defining the scale of changes to existing pages and new pages

After completing a site-wide content audit, we identified over 30 pages that would require content changes alone. These content changes would ensure the existing information aligns with the new subscription plans and how each investment account now fits within the Basic, Standard, and Plus plans. From a design perspective, all existing pages on the site would require implementation of a new navigation, hero section, style updates, compare plan module, and new footer section. As well as this, we identified all new main pages required as part of phase one launch:

Home page
Basic plan page
Standard plan page
Plus plan page
Compare plan page
Investment fees calculator page

Wireframing the new pages

Homepage
Basic plan
Standard plan
Plus plan
Compare plans v.1
Compare plans v.2

Finalising polished designs of the new pages

Once we were in a place where all stakeholders had signed off on the layout and content structure of the wireframes, we moved to finalise visual design for the new pages, keeping in mind these new styles would be scaled out to existing pages as well. Of course, there were more changes post-wireframes to the content and those are reflected in the designs below. Again we worked closely with the Product team, especially when working on the Compare plan page, to ensure the table was consistent with the app. We focused on mocking up desktop wireframes and final designs as we found this was easier to communicate with all stakeholders and arrive at decisions faster.

Polished designs for new pages

Homepage
Basic plan
Standard plan
Plus plan
Compare plans

Development

Once the final designs and content were signed off by all stakeholders including our legal team, I commenced building all the new components to be scaled across the new pages and existing pages. Due to time constrains, I built the new design system simultaneously to building the new pages. The platform I was developing on was called Webflow, which allows you to build symbols (reusable components). This allowed me to build efficiently and deliver work quickly while maintaining a high standard of design. Allowing for some final changes, the build stage took roughly two weeks.

Results and takeaways

After roughly six months from starting this major project, we successfully migrated to the new site in August 2022. This would be phase one of the new website launch, with more phases to follow which would include rebuilding further pages, replacing the old design system, and continuing to test and analyse user data.

While it's hard to measure exact quantitive data against the previous site for various reasons such as seasonal change, impact of the stock market, out of home advertising. Since launching, we are seeing a 40% increase in conversions (downloading the app from various CTAs), and a lower bounce rate. I have setup Hotjar heatmaps to collect further data to understand how our users are engaging with the new pages and content. As well as this, I ran another unmoderated user testing session through usertesting.com in which I asked the same or similar questions to the previous user testing in November 2021. By asking the same questions I could use the previous findings as a way to measure the improvements of the new site.

Below are some key findings, see the full report and videos here.

  1. New pricing plans (Basic, Standard, and Plus) 100% more effective when asking participants to outline costs associated with using Freetrade
  2. Providing educational content and trust markers significantly reduces general investing concerns and allows participants to feel more confident to use Freetrade
  3. ‘Learn’ as as top-level navigation label 100% effective when asking participants to locate educational content
  4. It is much clearer to understand the benefits between each monthly subscription/plan since
    the launch of the new plans
  5. All participants clearly understood/located the plans that Freetrade offers
  6. In addition to the plans, all participants understood the accounts and types of stocks offered by Freetrade

More case studies