Case study
From an informational site that sells tickets🎟️to an e-commerce site that provides information and inspiration💡
Timeframe:
June 2023 – September 2024
Tools:
Jira, Miro, Figma, Design tokens, FigJam, User research, Competitive analysis, User Journey Mapping, Lean UX, Affinity Mapping, Usability testing, A/B testing, Google Analytics, Hotjar.
My role:
I led the design process from research to final implementation. I collaborated closely with the Project Manager, Head of Design, Content Executives, Sales Director, and Development team. My responsibilities included user research, competitive analysis, data gathering and organisation, concept development, usability testing, UI design and development handoff.
TL;DR:
Visit London, the official visitor guide to London, reaches 21 million users worldwide through its website, mobile app, and social media channels. However, the platform hadn’t kept up with evolving user needs and market trends since its last major update nine years ago. Recognising the need for change, our team set out to transform Visit London into a user-focused, e-commerce-first platform.
The redesigned Visit London platform, launched in September, marked a major milestone. Conversion rates increased by 21%, while the time it takes for customers to make a purchase decision dropped by an impressive 97%. Mobile revenue saw an 83% boost, contributing to a 30% overall increase in revenue. The implementation of a Design System ensured consistency across the platform, making development and maintenance more efficient and scalable.
Accelerated Buying Process
0
%
Increased Conversion Rate
0
%
Revenue Generation
0
%
Improved Order Number
0
%
⬇️Jump directly to these sections:
1. Discover phase: Understanding the business and the context
The context
Visit London is the official visitor guide to the city, offering information and inspiration to millions of domestic and international users. The platform provides convenient ticket booking services and engages with users across its website, mobile app, newsletters, and social media channels.The Visit London Growth team is responsible for driving income and profit from e-commerce ticket sales, sponsorship and advertising. The profit is reinvested in supporting London & Partners’ mission of creating economic growth for London, with a focus on resilience, sustainability, and inclusivity.
The problem
VisitLondon.com is facing a significant challenge in meeting the evolving needs of its users. Originally launched nine years ago as an e-commerce-first platform primarily focused on ticket sales, the website now struggles to provide a seamless user experience that combines ticket purchasing with comprehensive information and inspiration. As a result, user engagement, satisfaction levels, and conversion rates have declined over time. This issue not only affects the usability of the website but also impacts Visit London’s profitability.
The objective
Visit London represents the highest-value revenue stream for London & Partners (£1.1m), with approximately 90% of London & Partners’ income currently generated from ticket sales on Visit London.
Visit London’s main objective with this project is to increase its performance by redirecting more of its users towards ticket purchasing and booking platforms. This will not only increase traffic to Visit London, but also increase conversion rates for those who visit Tickets.London.
Business expectations anticipate Visit London returning to profitability in 2024-2025, amounting to £0.7m, and becoming increasingly profitable in subsequent years, delivering £1.1m.
Foundational research
We conducted remote targeted user interviews and collected qualitative insights from 10 participants.
Tasks:
- Set of instructions: go to this visitlondon.com website and browse on your mobile phone.
- Please remember to think out loud during the test and tell us if there’s any information missing.
Research Goals:
Testing focused on smartphone users aged 18-65, representing:
- Gain an understanding of users' problems, needs, pain points, and motivations.
- Understand the user problem I'm trying to solve.
- Evaluate Visit London brand positioning.
Participants:
- Primary Markets: UK, US, Australia, and China, which attract the most engaged and high-spending visitors.
- Secondary Markets : Broader international audiences from India, France, Germany, Italy, and Spain, to ensure usability across diverse cultural and language contexts.
Key takeaways
- Lack of clarity around pricing, navigation issues, and overwhelming information.
- Slow checkout processes, leading to cart abandonment.
- Overwhelming amount of information. Limited filtering options, making it difficult to find relevant events.
Customer journey map:
When I created the user journey, I focused on providing a seamless and intuitive experience that takes into account the user’s motivations and preferences. Also, I optimised the user journey to ensure users could easily navigate to the Tickets.London website and complete their purchase.
Click the ‘Expand View’ icon to enlarge the user journey iframe in FigJam
Collaboration sessions
- Pre- session: To begin, we collected data on three fundamental pillars: user needs and pain points, business objectives, and competitive analysis.
- Ideation session: Cluster insights into themes based on user pain points, business goals, and competitive insights, Reframe Themes as “How Might We” (HMW) Statements. Ideate solutions by asking, “How might we solve this for the user while meeting business goals and considering competitive context?
- Post-Session: Prioritisation & Visualization. We use a prioritisation matrix to rank ideas according to user and business impact and effort.
Key takeaways
- A mobile-first approach was necessary, as mobile users now outnumber desktop users.
- Focus on international markets (US, Canada, Australia), where visitors tend to spend more.
- After presenting all these insights to our stakeholders, it was decided to prioritise the homepage and the funnel.
Lean UX Canvas
To streamline the design process and foster team collaboration, we implemented the Lean UX approach. The following chart highlights the essential stages of Lean UX within the broader Double Diamond framework, illustrating our journey from initial assumptions to a user-validated, refined product solution.
Key takeaways
- Positioning Visit London as the Official Travel Guide: Establishing Visit London as a trusted and authoritative source for travel planning is crucial. This includes prominently displaying its credibility on the homepage to build user trust, which may encourage more ticket purchases and engagement with the platform.
- Streamlined Ticket Booking and Content Accessibility: The platform aims to simplify the ticket booking process and improve navigation by grouping popular options into a "Must Sees" section. By organising content into easy-to-find categories and displaying high-value products on the homepage, users are likely to have a smoother experience, leading to higher conversion rates.
- Emphasis on Performance Metrics for Continuous Improvement: Success metrics include tracking conversion rates, click-through rates (CTRs), and bounce rates to understand user engagement and platform effectiveness. These metrics are essential for validating design hypotheses and iterating on features to enhance the user experience and achieve business outcomes.
Wireframes
Based on insights from the ideation session, I created wireframes for the Visit London multilingual platform, focusing on content optimisation and an improved user experience to boost engagement and sales. These wireframes translate the prioritised ideas into a cohesive structure, with a content strategy designed to maximize Visit London’s reach and affiliate ticket sales, directly supporting revenue and sales objectives.
Key design principles:
During the wireframing phase, collaboration with cross-functional teams—content and SEO strategists, translators, and product managers—was essential to ensure the wireframes were both user-centered and aligned with business goals.
- Content Team: I collaborated closely with the content team to prioritise key messaging, positioning Visit London as the official city guide and emphasizing unique selling points (USPs) prominently on the homepage. We focused on SEO-optimised content and strategically placed high-value elements to boost user engagement and drive affiliate ticket sales.
- Product Managers and Data Analysts: Together with product managers and analysts, we refined the wireframes to align with KPIs for user engagement, SEO performance, and ticket conversions.
- Translators: Collaboration with translators ensured that our multilingual experience felt native and engaging across different languages. I incorporated feedback on text length variations directly into the wireframes to ensure that layouts remained visually balanced and functional in each language.
Goals:
- Assess overall user experience.
- Validate design hypotheses.
- Identify key pain points and usability issues
- Understand user perception of the Visit London brand
Users:
Testing focused on smartphone users aged 18-65, representing:
- Primary Markets: UK, US, Australia, and China, which attract the most engaged and high-spending visitors.
- Secondary Markets : Broader international audiences from India, France, Germany, Italy, and Spain, to ensure usability across diverse cultural and language contexts.
Task:
- Set of instructions: go to this visitlondon.com website and browse on your mobile phone.
- Please remember to think out loud during the test and tell us if there’s any information missing.
Questions:
- When you first arrived on the ticketing page, how quickly were you able to identify ticket options and relevant details like pricing, show times, and location?
- How clear and organised was the layout of information on this page? Did you feel that sections (like ticket options, venue info, and reviews) were logically organised?
- Did you experience any issues with loading times or responsiveness on this page, especially when using filters or accessing detailed ticket information?
- Considering all information provided (like ticket options, timing, venue location, and accessibility), how confident do you feel in proceeding with a purchase? What would help you feel more confident?
- Did the inclusion of reviews, ratings, and the cancellation policy influence your confidence in purchasing through the site? Were there additional details that would help you feel more secure in your purchase?
- If there’s one thing you would improve on this site and one feature you found particularly helpful, what would those be?
Prototype A:
First Round of User Testing - Findings:
- Venue Location: Users struggled to quickly identify the venue location, with many noting it was not visible at a glance and required further navigation. This disrupted the natural flow of information and created friction in making decisions.
- Continuous Scrolling: Users expressed frustration with the need to scroll extensively to access various details, such as accessibility information, age suitability, and timing. This layout issue reduced the sense of control and made essential information feel buried.
- Lack of Immediate Trust Indicators: While information on awards and show popularity was present, details like reviews and ratings were not easily accessible. This omission weakened users' confidence in their purchasing decisions, especially when booking for a family event.
- Users in Prototype A had difficulty finding information about ticket options, pricing, and suitability for the Lion King musical. There were several users who expressed frustration with the need to constantly scroll through the page, which disrupted their browsing experience.
Prototype B:
Second Round of User Testing - Findings:
Based on feedback from the first round, I iterated on the design to address identified issues. Prototype B introduced a tab-based navigation with clear sections for Overview, Location, and Reviews, aiming to resolve scrolling and navigation challenges. This iterative approach enabled continuous refinement based on real user insights.
- Tab Structure: Users appreciated the addition of the tabbed interface, which allowed them to quickly switch between sections without excessive scrolling. This layout provided a clearer structure and made it easier to locate details like showtimes, duration, age recommendations, and accessibility.
- Fixed Pricing and CTA Visibility: The price remained fixed at the bottom of the screen, making it constantly accessible. This adjustment minimised confusion around pricing and emphasized the “Book Now” CTA, enhancing clarity for users ready to make a purchase.
- Intuitive Information Organization: The tab layout grouped similar information, making it easier to digest. Users found it significantly easier to follow a logical flow, moving from the overview to specific location details or reviews as needed
- Visibility of Essential Details: With elements like accessibility, age suitability, and location prominently organized within tabs, users felt that all necessary information was readily available. This improvement helped them make more informed decisions with fewer obstacles.
4. Deliver: high fidelity prototypes and Design System
Homepage
Category page
Ticketing page
Ticketing page
Ticketing page
Design System:
One of my key responsibilities was leading the creation of our initial design system, collaborating closely with our front-end engineer to ensure seamless implementation. I adopted an atomic design approach, breaking down the user interface into essential building blocks. Leveraging the design system allowed us to rapidly assemble high-fidelity designs.
5. Project Outcome & Impact:
Accelerated Buying Process
0
%
Increased Conversion Rate
0
%
Revenue Generation
0
%
Improved Order Number
0
%
Interactive prototype
97% Accelerated Buying Process:
The data shows that people make purchasing decisions 97% faster compared to previous metrics.
21% Increased Conversion Rate:
There’s been a notable 21% increase in the number of people who make purchases on the website.
30% Enhanced Revenue Generation:
Revenue has increased by 30%, with a remarkable 83% spike in revenue specifically from mobile device users.
7% Improved Order Value:
The average order value has risen by 7%, indicating that customers are spending more per transaction.
To be continued...
🔁 Iterate
What is coming next:
Test, collect analytics, and develop
The launch of Visit London in September marked a significant milestone, but it was only the beginning of. Moving forward, the aim is to iteratively enhance the platform based on user behavior observed on specific pages.
- We prioritised the development of the homepage and funnel to secure stakeholder buy-in, ensuring alignment with project goals and objectives.
- With the approval of the overall design language, we were able to rapidly scale out the project and design the subsequent pages: landing and editorial pages, category, wrapper, and listing pages.
- The implementation of a cohesive UI component library and the componentization of the user interface not only ensured consistency and coherence across pages but also facilitated the efficient production of additional screens.
- This approach streamlined the design process, saving time and resources while maintaining a high level of quality and usability throughout the platform.
Wanna hear the full version?🎬🍿
Let's schedule a call!
Connect with me on LinkedIn, email me at info@myriammartindigital.com or send a message below.
© 2024 Myriam Martin Digital. All rights reserved.