Company
BBC's Countryfile Live
Responsibilities
Website design
Project length
2 months
WEB DeSIGN
BBC's Countryfile Live
Website design
2 months
The BBC’s Countryfile Live is a four-day outdoor summer event that welcomes over 125,000 visitors. Activities range from live entertainment, food stalls to meeting the stars of the tv show.
The BBC approached London agency Brackets.digital to redesign the Countryfile Live website from the previous year with the objective of reducing bounce rates and increasing online ticket sales.
©2022 BBC Countryfile Live
We start our web design projects by understanding the problem and looking at the business objectives and needs of the user.
We identify the problem we are trying to solve and for whom by using the 5 W’s (Who, what, where, when, why and how)
With the 2019 summer fast approaching city dwellers and their families are keen to get away to the countryside for a short break and the Countryfile Live event offers the perfect solution to their needs.
1
Countryfile Live audience primarily city dwellers and families.
4
Spring/Summer 2019.
2
Finding an outdoor summer event away from the city with plenty to see and do is difficult.
5
As an escape from the city, it's the ultimate day trip away.
3
At the Countryfile Live event in Oxfordshire.
6
On the website via online booking system.
‘How might we redesign and improve the Countryfile Live website from the previous year to encourage users to consider a day out at the event.’
Without measurable goals its difficult to ascertain whether a project has been successful or not. Smart goals are relevant, realistic and attainable and help guide your business to success within an agreed timeframe.
Countryfile Live aimed at reducing bounce rates by 10% from the previous year and increase online ticket sales by 15% from website launch date and event opening.
What are the features or content that this website should include?
Responsive website with interactive map and client CMS.
Website optimised for mobile audiences. (50% of visitors).
Improved user experience and content strategy with focus on ticket sales, show features, star presenters, exhibitors and sponsors.
2 separate micro-sites for show locations at Blenheim Palace and Castle Howard.
Simple navigation with ability to swap between show locations.
Search engine optimised.
From a visual perspective the website should borrow from this years print artwork.
Find out more about our web design process
A Storyboard helps to understand the key moments in the user experience from landing on the website to purchasing a ticket.
It reveals emotions that users may be experiencing and issues that can be addressed later on.
A storyboard helps to communicate key moments of a customer experience with stakeholders
(1) City dwelling family watching BBC Countryfile on Sunday evening.
(2) See promo for Countryfile Live and get excited for a family day out in the countryside.
(3) Visit website, interact with map and view activities.
(4) Buy tickets.
(5) Leave the city for a day out in the countryside at Countryfile Live!
50% of visitors to Countryfile Live are city dwellers. The focus therefore is on a largely urban demographic of families, couples, seniors and their dogs. (Over 8% of visitors came with their canine pets in 2018)
• Countryfile targets people living in towns and cities who like to access the countryside from time to time but don’t actually live in it.
• Predominantly white, many are affluent, pro-Brexiteers with interests in food, the environment and rural issues.
• Based upon research supplied by our client we targeted first time visitors, returning customers and exhibitors.
Having defined the projects’ users, we brainstormed user stories to determine what website tasks a user may want to accomplish.
User stories help to understand user needs, pain points, emotions and opportunities and how best to respond to them as website design features.
Example user stories:
From user stories we were able to summarise the needs of the user and the tasks they will need to perform.
There are also cognitive emotions that users need to feel when visiting the website:
User journeys help to identify key website actions and what screens to focus on first.
The core user journey is defined first. It describes what the user needs to do in order to accomplish the primary goal of buying a ticket.
Core user journey actions:
With the discovery stage complete we move to the visual design stage which involves the creation of sitemaps, wireframes and website mockups.
Following the core user journey we created wireframes to help communicate page layout and functionality with stakeholders and developers.
Wireframes focus on:
The initial wireframes shows early thoughts that are refined and developed as the project progresses.
Find out more about our web design process
With the wireframes completed and a framework and website layout in place we start visual design.
Visual design is the look and feel of a website communicating a company’s brand, identity and voice.
The landing page is simple in design and offers two options to visit Blenheim Palace or Castle Howard.
Callouts (1 - 5):
1
Green buttons to ‘Book tickets’ are most prominent with white buttons to ‘Discover more’.
2
Keeps the website up to date with fun imagery. Allows users to interact with the brand.
3
Allows Countryfile Live to reconnect with site users. Essential for marketing and promotions.
4
Displaying sponsors that users may care about makes a positive connection between the user and the Countryfile brand.
5
Page links, contact details and social links provide key information to users.
The homepage serves as a welcome page with video, interactive maps and reviews.
We inform, excite and direct users to other pages with subtle hints to buy tickets.
Callouts (1 - 7):
1
Yellow bar serves as a ticket promotion and constant reminder with ‘Book tickets’ CTA top right for best engagement.
2
Video promo summarises the show in 30 secs which targets users with little time. Hero image shows venue and stars and connects with show fans.
3
Attracts more attention than horizontal navigation. Stacked navigation with larger buttons was thought favorable to horizontal navigation with smaller cluttered links.
4
Provides quick links to alternative venue.
5
Interactive map enables users to browse activities. Appeals to the interests of target audiences identified in user research: ‘See 50 activities’, ‘Dog friendly event’ and ‘Food lovers unite‘.
6
Keeps the website up to date with fun imagery. Allows users to interact with the brand.
7
Allows Countryfile Live to reconnect with site users. Essential for marketing and promotions.
Show features provide an overview of what there is to see and do on the day.
Callouts (1 - 4):
1
Visible to users on all pages indicating where they are and provides quick link to alternative venue.
2
High res image gets the user’s attention, connects with them positively and entices them to explore the website.
3
Alternative methods of displaying the same information. Grid view appeals to users that want to scan pages quickly and map view for those users with time to explore.
4
Provide quick links to further information for those users in a rush.
Show features map view appeals to users with time to explore.
Callouts (1 - 3):
1
Alternative methods of displaying the same information. Grid view appeals to users that want to scan pages quickly and map view for those users with time to explore.
2
Interactive map enables users to browse activities. Appeals to the interests of target audiences identified in user research: ‘See 50 activities’, ‘Dog friendly event’ and ‘Food lovers unite‘.
Improved ticket page layout and hierarchy from previous year.
Callouts (1 - 4):
1
Displaying separate pages for ticketing options reduces the content on each page and makes them easier to read. Tabulated information for single tickets with clear content hierarchy enables the user to more easily scan information.
2
CTAs are repeated at the top and bottom of each page for those viewing on smaller screens such as mobile. Book tickets goes directly to checkout provided by 3rd party.
3
Good UI design promotes scanning of information and readability.
4
Tables are difficult to display on smaller screens. I chose to duplicate table headings so that the data would stack in a single column.
Ticket packages help price sensitive customers to save money.
Callouts (1 - 4):
1
Ticket packages utilises information cards with glossy lifestyle images that connect with the user.
2-3
Each card displays money saving advice and booking and further information buttons.
3
For those first time or price sensitive users that research their options before buying.
4
Cross selling packages assist the user’s buying decision.
Location information informs but also directs users to buy which is both the goal of the user and website
Callouts (1-5)
1-2
Buttons both directly and indirectly encourage buying decisions.
3
Consistent placement and style makes it easy for the user to spot and use.
3
Informs the user for those making decision of whether venue is accessible for a day out.
4
Uses icons to improve visual interest and grab users attention.
5
Appeals to price sensitive users and gives users something to view after reading page.
Faqs provide answers to common questions, improve user experience, help users navigate the website and can save money on customer service.
Callouts (1-4)
1
With more than 10 entries categories help users to find answers to their problems.
2
Links to help users navigate website.
3
Reduces page length and minimises scrolling.
4
Appeals to price sensitive users and gives users something to view after reading page.
Sponsors build credibility for the event and nurture positive associations with the user.
Callouts (1-5)
1
Makes information easy to scan.
2
Immediately recognisable to the user.
3
Like accordions, saves vertical space and prevents scrolling.
Once the website information architecture was completed we created prototypes to test user interaction with the website.
• Prototypes test user interactions with the website and ensure there are no hidden problems.
• This approach reduces costs and saves time and is carried out before any code is written.
• The website was built using Feast's in house content management system and 3rd party integrated ticket booking system.
Although, not quite a complete website, the prototype tests the core user journey from selecting a venue to purchasing a ticket.
Online ticket sales increased by 10% from the previous year and bounce rates by a similar amount.
Although there are many factors that contribute to a rise in ticket sales (E.g. Online promotions, targeted email marketing), a website that focuses on the needs of the user and assists in their buying decisions can but serve to improve its success rate.
Next year we believe the website can grow and deliver a higher ROI by concentrating on:
Need a consultation? We can advise
Whatever your business needs, we’ll create a great looking website that works for you.
Be first to receive offers and latest articles
