Improving Conversion Rates - Smithwicks Experience Kilkenny
The goal of this project was to recreate the Smithwick’s Kilkenny website in a way that reflects their ever-evolving passion for great brews and memorable experiences at their visitor centre.
Overview
Smithwick’s Experience Kilkenny is the second-most popular tourist attraction in Kilkenny, Ireland. Smithwick's site had to be redesigned to align with their new brand positioning.
​
This site aimed at improving the online conversion rates of the Smithwick's Visitor Centre in Kilkenny while keeping up with contemporary web presence trends.
The Problem Statement
The problem was that, after thoughtfully redesigning their brand identity, their website still wasn’t compelling enough.
That’s when we figured we needed to understand what kind of wonderful experience Smithwick’s Experience Kilkenny (SEK) provided to their visitors and how it could be translated to the website. This would help in attracting more recommendations and attention.
We needed to understand what appealed to a target audience aged between 20 and 40 worldwide looking for a place to switch off and catch up. The Strategy team discovered this through on-site research, reviews of social media feedback, staff insights, and insights from stakeholders.
Objectives
The three primary objectives of this project were as follows:
1. Must See Attraction
SEK is a "must-see" attraction for visitors to Kilkenny.
2. Ticket Sales
Improve ticket sales and upgrades online.
3.Brand Positioning
Incorporating the new brand positioning of Smithwicks
My Role
1. The Principle Visual/ UI designer creating a fully responsive website from the ground up.
2. Art director for photography, including creating photography briefs and model briefs and assisting on the day of the shoot.
​
3. A project coordinator working with a team of an interaction designer, a strategist, and a frontend developer.
Timeline
Being a fast-paced web design project with photography involved, the timeline was only two months (June-July 2017) with a couple of weeks in iterations and feedback.
Tools
Sketch, Adobe Photoshop, InVision, Keynote
Design Process
1. 1. Research
The following research techniques were used for this project.
-
Primary Research: On-Site Qualitative Research, Staff Interviews, and Stakeholder Interviews
-
Secondary Research: Social Media Reviews, Existing Website Content
Whether it’s tasting the ale, smelling the hops, touching the equipment, or listening to stories by the tour guides, all of it was performed in a very friendly yet immersive environment, which was demonstrated in the onsite and online research.
1. 2. Strategy
After extensive onsite research, the strategy team drew key points that all indicated that this experience was prominently a sensory-driven experience.
​
So, it was best to amplify it online with a contemporary look that has bold usage of typography and colour.
​
Featuring contemporary photography with Instagram filters and graphics that enhance the look and feel
Photography
Bold Typography
2.1 UX Design
As per the information architecture, four main menu items were extracted, and then the secondary pages had links on the main pages. The two different UX concepts were designed based on the information architecture below.
Information Architecture
Following are two UX concepts derived from the above information architecture:
Concept 1 : Fete - Home Page Desktop
Concept 2: Vital - Home Page Desktop
2.2 Conceptualization
Two different interaction design concepts are backed up by two respective UI Designs for the landing pages. were presented to the client. The concepts were called Fete and Vital.
Fete - Concept 1
-
Providing sumptuous images extolling the tour experience ​
-
Each key message receives prominent real estate.
-
Simple scrolling interwoven with ticket sales and reviews
UI Solution - Concept 1
-
Retaining and fine-tuning the conventional top navigation
-
Brand activities presented in visually appealing way of cards upfront
-
The layout being quite fluid as compared to Vital
Vital - Concept 2
-
A more efficient and direct approach
-
emphasising sales and the product or brand message
-
Equally promoting the tour experience
UI Solution - Concept 2
-
Exploration of left-side navigation as it allowed me to use the brand colour fearlessly.
-
Highlighting the navigation menu and using a tour image as a full-width background image
-
Alternate panels of white space to showcase the Smithwick’s Ales plus the selling points of SEK like the animated portraits, a hologram, products from the SEK shop, and more
3. 1. Art Direction
My prior experience as an advertising art director made it easy for me to prepare a detailed photography brief. I prepared the brief for the imagery that would be displayed on the website with the help of the wireframes and placeholder images sourced as per their context.
​
The photography brief involved:
-
Outlining a composition sketch with a reference image for various models and backgrounds
-
Specifying detailed descriptions for the models being featured in terms of wardrobe and accessories required for the shoot
-
Ensuring the refreshed brand identity is understood by the photography agency to bring it to life accurately ​
Photography Brief
Photography Reference
3. 2. Photography
We hired The Campbells, as their photography style was contemporary and compatible with the new face of the SEK brand. I was actually quite happy with the way the photography turned out, as it not only highlighted the new look of the brand but also added a refreshing charm to the website.
Photo Shoot
Photo Shoot behind the scenes
4. UI Design
The site architecture involved five main pages and internal links to the secondary pages.
​
In terms of UI Design, I started working on improving and transforming the UI Design considering the feedback received during the stakeholder session.
Key factors I incorporated while designing the UI to achieve our goals:
-
Responsive Web Design: To improve the user experience on different devices
-
Brand personality: The side navigation was inspired by the patterns on the Smithwick’s Ale bottle. The brand colour was used as an accent colour, with grey as a secondary colour.
-
Use of imagery: The photoshoot provided a fresh set of visual assets for an image-driven UI design.
-
Clear CTAs: The ticket call to action, which was part of the side navigation, was moved to the right side of the page to make it more prominent.
-
Microanimations: the main CTA and tickets were micro-animated for more attention.
-
Interactive experience: The hologram and the moving portraits on the SEK site were shown as GIFs on the website.
​
White balance: To balance the heavy imagery, white alternating panels that showcased singular elements of the SEK site like Ales, Souvenirs & Upgrades, Moving Portraits, Holograms, etc. were added.
Summary
This project was a great learning experience for me in terms of designing responsive components, layout and e-commerce guiding principles, use of colour, and proportion of elements. My prior experience in advertising helped me successfully implement an art-directed shoot.
Outcome
-
Online ticket sales +89%
-
Online revenue +117%
-
E-commerce conversion rate at 3.5% vs 1.8% previous year
-
Improved online ticket conversion across all devices with mobile performing particularly well.
-
50% of all adult tickets are being upgraded (this was closer to 30% on the old site)
-
While total visitors to the website are -4% the quality of traffic is far better
-
Bounce rate is averaging 27% vs 45% on the old website
-
20% increase in session duration on the website
Frontend.com won two silvers and one bronze in the 2018 Digital Media Awards for designing Smithwicks Experience Kilkenny.
If you liked reading the case-study, check out a couple more below. 😊
