Landing page design in Webflow

UI DESIGN AND WEBFLOW DEVELOPMENT

  • Company

    Saint James’s Place

  • Client

    Mail Metro Media

  • Project deliverable

    Website landing page

  • Responsibilites

    UI design and Webflow development

  • Software

    Figma and Webflow

  • Project timeframe

    10 days

Website address

https://saint-james-place.webflow.io/

MY PROCESS
  1. Understand the problem
  2. Visual design
  3. Web development in Webflow
  4. The outcome

In a rush?
Go straight to the website designs.

UNDERSTAND THE PROBLEM

With the economy on the brink of bankruptcy from the effects of the global pandemic people are seeking advice on how to protect and grow their money.

Saint James’s Place saw this as an opportunity to target Mail readers with free financial advice with the objective of turning them into customers.

THE OBJECTIVE

The purpose of the landing page is to encourage the user to:

  1. Request a financial planning guide. (Primary goal)
  2. Book a meeting with a financial adviser. (Secondary goal)

8,000 to 10,000 requests for guides and 600 meetings with financial adviser were provided as measurable targets.

These figures would be used as metrics to determine whether the website had been a success or not.

PROJECT SCOPE

Design a single web page with two forms to allow users to request a free 16 page financial guide and to book a meeting with a financial adviser.

We aimed to deliver:

  1. Responsive web page.
  2. Web page optimised for mobile.
  3. Section for video.
  4. 2 forms to capture user details.
  5. Customer testimonials to engender trust.
  6. Visible unique value proposition.
  7. Information about the benefits of having a financial adviser.
  8. FAQs to answer customer questions.
  9. Highly visible calls to action.
THE AUDIENCE

The landing page targets people looking for financial advice.

Primary audiences:

  • Mail readers aged 55-75.
  • Established investors and golden age.
  • Maturing families.
USER STORIES

Having defined the website’s users, I considered user stories to determine what tasks people may want to accomplish when visiting the landing page.

Example user stories:

  • As an established investor I want to learn more about Saint James’s Place so that I feel I can trust the company and its services.
  • As an established investor I want to learn about their reputation in the industry so that I can feel confident and empowered.
  • As an established investor I want to read testimonials from other customers so that I can feel happy with this company and what they are offering.

User stories help to understand user needs, pain points, emotions and opportunities and how best to respond to them as website design features.

From user stories I was able to summarise the needs of the user.

Key tasks that users need to perform:

  • Find out more about the company and its unique value proposition within the industry.
  • Read testimonials of happy customers.
  • Read about the benefits of having a financial adviser.
  • Read FAQs for further questions prospective customers might have.

Cognitive emotions that users need to feel when visiting the web page:

  • Confident.
  • Trusted.
  • Empowered.
  • Informed.
  • Relief.

Seeking advice could bring peace of mind and financial happiness in a world of uncertainty and chaos.

MESSAGE

For users to experience the cognitive emotions listed above the primary message would concentrate on Saint James’s Place’s unique value proposition as a trusted, valued and reputable company.

The supporting message highlights other benefits such as:

  • How seeking financial advice helps achieve the retirement lifestyle you want.
  • There are small changes which you can make today which can make a huge impact on your finances when you stop working.
  • From tracing an old pension pot to reviewing whether your pension is being invested in the most effective way, St. James’s Place is here to support you in these important decisions.
USER JOURNEY

User journeys help us identify key actions within the website.

It describes what the user needs to do in order to accomplish their primary goal of finding a financial adviser.

The user journey:

  1. Land on web page.
  2. Watch video and read other information.
  3. Fill out a form.
VISUAL DESIGN

When starting the project’s visual design I look at the client’s brand

The brand direction is important in determining how users feel when they come to the website and will also help with font and image selection, colour and icon design.

Co-partnership brand:

  • Clean and simple, grounded and trusted and not too salesy.
  • Professional.
  • Trustworthy.
  • Credible.
  • Approachable.
WIREFRAMES

After I’d determined the visual brand I move on to wireframes and mockups.

Wireframes focus on:

Content – What is displayed.
Structure – How it is displayed.
Hierarchy – Size of elements.
Functionality – How elements work together. 

Recommended reading: My UX website design process.

MOCKUP

The purpose of the landing page is to encourage users to request a financial guide.

Callouts (1 – 5):

  1. Hero image and video – Impactful hero image promotes message of confidence and financial freedom. Supporting title and lead text appeals to the users’ fears and needs and encourages them to read on and watch the video.
  2. Form tabs – Tabs are above the fold and display the corresponding form content depending on whether the user is 1) Requesting a guide and/or 2) Booking a financial review. The icons reinforce the button text and provide a visual cue.
  3. Form design – Text fields are clearly labelled for ease of completion and usability.
  4. UVP and customer testimonials – As the user completes the form they are reminded about SJP’s value proposition and about how happy their customers are with their services. Social proof engenders trust and empowers users to complete the form.
  5. Financial adviser benefits – Supporting message highlights benefits and encourages a meeting with an adviser (Secondary goal). Icons branded and used as visual cues to support copy.
MOCKUP

Callouts (6 – 9):

  1. Customer testimonial – Reinforces trust and credibility of SJP.
  2. Faqs – Answers questions user may have before filling out forms at top of page.
  3. Case study – Link to a customer success story on client’s website. I’m not a fan of this because the link takes the user away from the main objective which is to fill out the form.
  4. CTAs – Buttons take the user back to the top of the page and form entry. By this time it is hoped the user should be experiencing the cognitive emotions discussed earlier and will want to find out more about SJP.



Image credit: webflow.com
WEB DEVELOPMENT IN WEBFLOW

We chose to develop this website in Webflow for the reasons of speed and customisability.

With the tight turnaround time we wanted to be able to turn the designs into production ready code as quickly as possible. Webflow allows you to do that.

Why should you consider using Webflow?

  • Visual coding without looking at CSS/javascript.
  • Quicker from mock-up to code.
  • Easier to prototype interaction ideas.
  • Exportable code so can host on own servers.



THE OUTCOME

The objective of 8,500 requested guides was reached with 450 meetings with a financial adviser.

I feel that the success rate of the web page could be improved by realigning page content to user fears concerning the economy and COVID-19 and future money worries and demonstrate how Saint James’s Place can solve these problems for the user.

I can help your business to improve the effectiveness of its website and increase conversions.