top of page
Stocks and Shares ISA
We started introducing Contentful as our new CMS. My brief was to transfer the Stocks and Shares ISA section to Contentful by gathering data to guide design decisions and to create components that were flexible to adapt to marketing requests.
The approach
Define
From user research, we understood that clients generally understood how a Stocks and Shares ISA worked and they used the website to compare what differentiated HL from the competitors. The current landing page had a mix of information about ISAs and the benefits of using HL. The data also showed that the ISA calculator was an important tool to help people understand how much to invest. The slider tool on the calculator needed to be addressed because of accessibility issues, so this page was also included in the brief. This was also a popular page that marketing would link to from social media.
From the information gathered on the main landing page, we decided that we could move some of the information and not have it so prominent. I then held workshops with the marketing team to discover what components they required, and how flexible these needed to be.
Low-fi wireframes
Once I had gathered the information, I used Figma to create wireframes and component properties to show what options would be available in Contentful.
Wireframes for the Stocks and Shares ISA landing page.
Wireframe for the ISA calculator .
Final designs
Calculator - After successful user testing and agreement from our accessibility experts, we decided to remove the slider which also restricted users to a limited value. These were replaced with buttons and high-fidelity designs produced to present to the marketing team and senior stakeholders.
Landing page - The main requirement from marketing was the ability to
continuously refresh and update the page depending on the time of year. To enable them to do this, I worked on a flexible UI kit that they could use to make changes to the page whenever they wanted without extra design or development. This included a variety of hero options, customisable blocks, cards, and FAQ components to enable marketing to build whatever they wanted.
The Hero Banner component had multiple variations across 5 screen sizes.
Stocks and Shares ISA landing page on mobile.
Stocks and Shares ISA landing page and the calculator page.
bottom of page