SITE REDESIGN CASE STUDY
Full Tilt Poker was the world’s 2nd largest online poker room up to 2011. At its peak the site supported an average of 38k daily visitors with Nielsen ranked as the world’s stickiest brand 1.4 million users per month of April, 2009.
The Full Tilt Poker website was key to acquisition and conversion of new customers as the launch pad for download of the desktop game software.
The site was used to support a large variety of complex brand touchpoints such as TV advertising, print ads, live events, and TV commercials, affiliate advertising, international. The site also served to support existing players as a communications platform for game promotions.
This is the story of how I used user insight techniques to uncover friction across the user journey, & navigated the risk of “over-designing” a solution by steering strategy using data driven design & business logic. The project resulted in re-purposing of existing content, the creation of a CMS via carefully designed system of page templates & a comprehensive UI library, resulting in more efficient use of development resources, & ultimately a 29% increase in site conversion.
THE CHALLENGE
SCALING AT SPEED
The site content had sprawled into an unmanageable complex collection of content for SEO, marketing and poker instruction.
As the company had grown at such a rapid pace, technical debt had been built up & the back-end needed an overhaul.
THE CHALLENGE
TECHNICAL & DESIGN DEBT
The challenge was to update the site look and feel, whilst creating a robust CMS for the new design. This would enable faster upload of content for more responsive delivery of promotional content to users by content writers, & in the long run would free up the development team to work on other tasks more strategic tasks.
GROWING ALONGSIDE THE OFFERING
AN EVOLVING UX FOR A MATURING OFFERING
The existing site design was at odds with the branding used elsewhere such as TV & print advertising.
The design had served its purpose well, but it was now out of date, targeting older screen resolutions & presenting largely static text-heavy information.
STARTING FROM A COMMON UNDERSTANDING
USING BUSINESS LOGIC TO ILLUMINATE OUR APPROACH
Although each department was excited to get started & each had their own ideas about what a “redesign” meant, it was imperative that we started from a common understanding. This was led by business logic & the site’s ultimate purpose as a conversion tool for users to download the software.
I worked with the Business Analytics team to extract data on user behaviour on the site, as well as general user insights.
DATA DRIVEN DESIGN
DRILLING DOWN ON FUNNEL ANALYSIS
We drilled down the data to map funnels to conversion & looked at how that could be best optimised on the new design.
WORKING EFFICIENTLY
FOCUSING OUR EFFORTS & SETTING PRIORITIES
In terms of persuasive architecture, ultimately the goal was to improve download & sign up conversions. So we focused efforts on optimising this first & foremost.
The current architecture had clearly served its purpose well, however there was an opportunity to optimise the user experience.
USABILITY TESTING
FRESH PERSPECTIVES IN PRODUCT ENVIRONMENTS
To learn more about how those pages were performing, I conducted a series of contextual usability testing sessions.
This gave us some really interesting insights which enabled us to take a fresh perspective on the properties we had already spent so much time working on.
Working with the existing demographic data on our audience, I recruited participants to test the most frequent user journey – finding the site on search engines using the key term “online poker”. This journey also enabled me to gain insight into how the participants judged our offering against those of competitors appearing on search results.
The usability testing consists of three parts: user profiling questionnaire, site testing by task completion, debriefing using a final questionnaire set. I conducted all elements of the test – participant recruitment, test preparation – task definition, test set up, test facilitation using the TOL (thinking out loud) protocol, observing, prompting where needed etc. I used 2 follow up questionnaires outlining attitudinal &emotive perceptions of the site experience – ‘Emotional Response’ outline how they felt about the experience – confident, confused, etc, & whether they would they recommend the product to a friend – & ‘Recall’ – what they remembered about the brand & the experience, in particular the impression of trust, quality, knowledge & sense of community.
The testing was summarised in reporting to stakeholders with recommendations for improvements to the user journey.
DESIGN BIASES & BLINDNESS
The usability testing was most useful in highlighting our internal biases & design blindness.
As a result of working on the same interfaces & designs over a long period of time, subject to larger organisational influences, we had developed unquestioned biases about the UI. What was completely obvious to fresh eyes had become hidden to us.
THE IMPORTANCE OF CHALLENGING ASSUMPTIONS & THE STATUS QUO
We had failed to challenge the status quo with thinking such as “that’s the way the BI team want it” & “that’s the way we always do it”. In some cases we had become resigned to certain design decisions of the past & ran the risk of forgetting to redress them in this redesign.
EVIDENCE OVER OPINION– DIPLOMATICALLY CREATING COMMON GROUND
Usability testing was an extremely powerful tool to diplomatically unite teams where there was disagreement about elements of the design. The evidence helped to diffuse the friction & encourage everyone to take a fresh perspective.
PERSONAS
PUTTING ALL OUR ASSUMPTIONS ON THE TABLE
Gathering all of the user data which existed in the organisation, including customer services data, user insights from our analytics, we ran a survey campaign to capture data.
Bringing all of this data together, we engaged outside consultants to help us develop the personas. Representatives from cross functional teams came together to workshop the set. This was very useful to see the range of assumptions which had been made & the lack of clarity which had existed.
PERSONAS
GAINING CONSENSUS & A COMMON LANGUAGE
A set of 5 personas were developed. The idea was to bring clarity to assumptions we made about our target audience. The personas outlined 5 types of users, with detail on their needs & desires as they related to our offering.
LEARNING FROM MISTAKES
In retrospect, the Business was highly invested in the outcome of the consultation from the outset, as they had engaged the outside consultants.
This resulted in a bias to accepting the finished results despite some reservations.
Looking back, the final personas were too detailed, outlining elements such as Myers Briggs personality types. For a company which was acquiring user at such scale, this detail drilled too far down & caused confusion. As a result, the resources were not assimilated into the design process or across the teams.
AVOIDING (RE)DESIGNING FOR THE SAKE OF DESIGNING
REVIEWING THE EVIDENCE
After reviewing analytics data, user insights, customer feedback & business needs, it became apparent that a large change to the existing content on the site was not required. Over 90% of the site traffic was based on 2% of pages – the homepage & the current download page. Much of the rest of the content was critical to remain for SEO purposes. This helped to determine the strategy for the redesign.
A revised home page with a direct download button on page were to be created to create a “1-click” download path for users.
Existing pages were to be maintained using a more coherent navigation, & refreshed using updated branding and graphics. A redefinintion of the business logic (acquisition, conversion, retention) through site was mapped through the site content to ensure relevant Calls To Action were structured through pages, as relevant to the user journey.
A system of templates with interchangeable UI elements from an extensive UI library were planned, with code refactoring taking place with implementation.
EARLY CONCEPTS
SKETCHING DESIGNS
We sketched some designs to illustrate early concepts.
HOMEPAGE REDESIGN
REDESIGNING FOR IMPACT
After several design reviews, we agreed on a final homepage design. The page set the styles to be used across the rest of the site.
The navigation & architecture itself were not changed significantly as our research through site analytics & funnels had shown that almost 90% of the site traffic was through these core pages.
The biggest change from an architecture point of view was the change in function of the download button. Clicking on the button enabled a direct download of the software, instead of requiring the user to the download page.
STYLEGUIDE
SCALING THE SOLUTION
The site architecture & look & feel was captured in a style guide which was then used to scale the changes across the entire site.
Excerpts from the style guide
BUILDING A UI LIBRARY
ESTABLISHING A COMMON LANGUAGE
I audited the existing site for commonly used UI components, & once they were updated to reflect the new look & feel, I documented them as a UI library. This was useful across the creative, technical & business as it established a common naming convention for the different elements, making it easier for teams to describe page designs.
TEMPLATE MAPPING
FUTURE-PROOFING FOR EFFICIENCY
With the new style guide system & widget library, I mapped templates for commonly updated pages. The most often updated pages were promotion related & feature additions to the software.
I created templates for each page which included the structure of the page & interchangeable widgets from the UI library.
This meant that content writers from any authorised department could quickly put together a page, guided by the styles & widgets provided, & send the page for QA & publishing. This freed up development resources from mundane publishing tasks, making the development team members happier, & significantly decreased the time to publish mean the business could be more responsive to information publishing needs.
Sample wireframe template set
TEMPLATES
SEEING WORK IN ACTION
Samples of the templates in action on snapshots of live pages can be seem below.
Sample Mapping of NEW FEATURES TEMPLATE to LIVE page
Sample PROMOTION LANDING PAGE TEMPLATE to Live Page
Sample “REGULAR” PROMOTION PAGE TEMPLATE to live page
COMPLETION
THE PROOF IN THE PUDDING
The redesign accomplished several goals. The website was redesigned to align to evolution of brand. Existing content was audited & re-purposed to accommodate the large volume of SEO targeted content. Templates were designed & a UI library created for page customisation. Brand & style guidelines were documented. As well as code refactoring, it delivered a CMS to enable rapid publishing of content to site to accommodate speed of change in poker world. Long-term, this resulted in the release of development resources from the web development team.
The project also produced significant results for the business.
Visits
Overall visits to the site increased by 12.6% with new visits up by 9%.
New visits via search increased most significantly by over 27%
Conversion
Conversion (clicks to the download button) increased by 29%
Page views
Page views increased by 6.6%
Views in repeat visits increased by 20%
Length of visit
New visits on average longer than they were on the old site, by approx. 5 seconds.