Rapid website design and development in Webflow

WEBSITE LANDING PAGE

Responsible for: UI design and Webflow development

  • Company

    Queensland.com

  • 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://creative.dailymail.co.uk/queensland/2020/index.html

BACKGROUND

The global pandemic forced countries to close their borders to the world. With the threat now more or less under control, Australia will be opening its borders in 2021 to tourism.

Seeing this as an opportunity to entice travellers to Australia, Queensland.com partnered with the Mail Online to deliver a high impact landing page to inspire readers to consider Queensland as their next holiday destination.

MY PROCESS
  1. Client problem
  2. User personas
  3. User stories
  4. User journey
  5. Visual design: Client brand and objectives
  6. Website development
  7. The outcome

In a rush?
Go straight to the website designs.

CLIENT PROBLEM

Bookings have been down over the past few years to Queensland because of:

  • Brexit and economic instability.
  • Barriers of distance, value for money and fashionability.
  • Natural disasters, bushfires, global COVID-19 pandemic.
USER PERSONAS

2 personas were identified by the client and will help with content creation:

  1. Primary audience: High value travellers. They like to travel far, have a preference for Australia and love experiences.
  2. Secondary audience: People visiting family and friends. (We will focus on the primary audience).

High value travellers

Background

  • Like travelling long haul.
  • Preference for Australia.
  • Driven by experiences (Food and drink, marine, coastal, wildlife)
  • Affluent, high spenders

Challenges/Pains

  • Lack of knowledge about Queensland.
  • Apathy to Australia.
  • Competitor country destinations are becoming increasingly popular (South Africa, Japan, Canada, USA)
  • Distance.
  • Value for money.

Goals

  • New experiences.
  • Safe, open destinations.
  • Reconnect with nature after pandemic.

How to respond to their needs

  • Inform/Educate.
  • Social Proof/reviews
  • Show how different/better you are to competitors
USER STORIES

Having defined the website’s users, I considered user stories to determine what tasks a user may want to accomplish by using the landing page.

Example user stories:

  • As a high value traveller I want to feel that Queensland is a safe destination so that I can explore Queensland without any worries of catching COVID-19.
  • As a high value traveller I want to read reviews from people that have experienced Queensland so that I can make an informed choice.
  • As a high value traveller I want to watch videos and see photos so that I can experience what Queensland has to offer.

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

From the user stories we were able to summarise the needs of the user.

Key tasks that users need to perform:

  • Read what Queensland has to offer.
  • Read reviews.
  • Watch videos.
  • View photography.
  • Find out more.

Cognitive emotions that users need to feel when visiting website:

  • Reassured and confident Queensland is a safe destination.
  • Reconnected.
  • Awe inspired, excited with a touch of wonderment.
  • Informed.
  • Surprised.

The website experience will aim to target these cognitive emotions and gently direct the user to making a decision on a holiday destination.

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 out more about Queensland.

The user journey:

  1. Land on hub.
  2. Watch video.
  3. Navigate through buttons 1-4 in sticky nav.
  4. Discover more at Queensland.com
VISUAL DESIGN: CLIENT BRAND AND OBJECTIVES

When starting the project’s visual design I look at the client’s brand and their goals.

The brand direction is important in determining how users feel when they come to the website.

Mail Online Brand

  • Clean and simple, grounded and trusted and not too salesy.
  • Visually different to client’s own brand.

Without knowing the objectives for the website we will not be able to determine whether the website has been a success or not.

CLIENT OBJECTIVES

Inspire an urgency in users to rethink Queensland as a safe, affordable holiday destination through:

  • Position Queensland as a safe destination, accessible, value for money
  • Surprising users with content they might not associate with Queensland.
  • Link Queensland with 2021 travel trends (travel bubbles, road trips, wide open spaces and sustainability).
  • Highlight benefits of Queensland holiday.
  • Debunk myths: Reef is dead.

Goal metric indicators:

  • Reduction in bounce rates.
  • Higher dwell times.
  • Increase in click-throughs.
  • Increase in traffic to Queensland.com
WIREFRAMES, MOCKUPS & PROTYPING

After I’d determined the visual brand and goals I move on to wireframe creation and mockups.

Recommended reading: My UX website design process.

The purpose of the landing page is to drive traffic to Queensland.com by showcasing experiences, building trust and curiosity.

Please read my comments on hub improvements at the end of the case study.

Callouts (1 – 6):

  1. Hero image and video – Grabs user’s attention with high impact full cover image and video.
  2. Sticky nav – Directs user to 4 sections of the website. Sticky nav is visible at all times reminding users that there is more to read.
  3. Beyond the Beaches – Gallery with full-width image blocks. Micro interactions provide feedback to user when hovered over and image scales.
  4. Our top tips – 1 of 4 – Social proof from Queensland business owner gives overview of region’s views and natural beauty. Helps to break up page content.
  5. Wildlife encounters – Provides information on nature in Queensland.
  6. Our top tips  – 2 of 4 – Social proof championing whale watching in Queensland.

Callouts (7 – 11):

  1. Island adventure – Brief introduction on Queensland’s islands.
  2. Our top tips – 3 of 4 – Social proof championing reefs in Queensland.
  3. Inspiring itineraries – Section with information on inspiring days out.
  4. Our top tips – 4 of 4 – Social proof championing local experiences in Queensland.
  5. CTA – End of page encourages user to find out more about Queensland after reiterating the benefits. Not surprisingly, this button received the highest click rates.
HUB IMPROVEMENTS

Web pages should talk to the user. They should address users’ needs and fears. Unfortunately, the user experience design for this project falls short and fails to solve their problems.

Sometimes, clients are unwilling to listen and have already decided on the copy content for the website.

This web page would have benefited from addressing the objectives that we defined at the beginning of the project:

  • Reassuring users that Queensland is safe.
  • Allaying their fears.
  • Championing open spaces and affordability.

By speaking to the user’s fears, we get them to rethink and change how they feel, rather than by displaying pretty photography and overly verbose text, which only serve to confuse and dilute the intended message.

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.

I’ll be developing exclusively in Webflow in the future and will provide tips and tricks for anyone interested.



THE OUTCOME

Disappointingly, I feel this hub will suffer from the same problems as its predecessors by not focusing on the user needs.

However, all is not lost and by speaking to the user with better written content I feel the project would see higher engagements, reduced bounce rates and clickthroughs.

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