Case study
From an informational site that sells tickets🎟️ to an e-commerce site that provides information and inspiration💡
Timeframe:

June-August 2023

Tools

Jira, Miro, Figma, FigJam,  Photoshop

My role:

UX/UI, Usability testing, Wireframing, Prototyping, Developer hand-off, Design guide. I worked as a sole designer in the team with one product manager, one back-end developer and one front-end developer.

Case Study Summary:

Visit London, the official visitor guide to London, serves millions of users worldwide through its website, app, email, and social media channels. Despite its significance, the platform hadn’t kept pace with evolving user needs and market trends since its last launch nine years ago. Recognizing the need for transformation, our team embarked on a journey to revamp Visit London into an ecommerce-first website for today’s user.

The September launch of the redesigned Visit London platform marked a significant milestone in our journey. However, it was just the beginning. The conversion rate of the website increased by 21%, resulting in a 97% reduction in the time it takes for a customer to make a purchasing decision. As a result, revenue from mobile devices increased by an impressive 83%, boosting total revenue by 30%. The user journey was refined to improve visibility, resulting in a substantial 7% increase in average order value. Additionally, the robust design system ensured consistency and efficiency across the platform, facilitating streamlined development and maintenance.

Design Process

⚓Navigate directly to these sections:

1. Business Research:

🔍 Understanding the business:

Visit London is the official visitor guide to London. It serves information and inspiration, along with convenient ticket booking, to millions of domestic and international users who engage with Visit London brand across Visit London website, app, email 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.
📝 UX Problem Statement

From an informational site that sells tickets🎟️to an e-commerce site that provides information and inspiration💡

VisitLondon.com, is facing a significant challenge in meeting the evolving users’ needs. Originally launched 9 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 seen a decline over time. This issue not only affects the usability of the website but also impacts Visit London’s profitability.

Purpose:

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.

2. Design Review:

🧠 UX Ideation workshop:
An ideation session was conducted with the team (the product manager and myself) in order to generate ideas for addressing product, UX, and business challenges.
We linked UX concepts with business goals, incorporated insights from competitors, and engaged the entire product team.
To begin, we collected data on three fundamental pillars: user needs and pain points, business objectives, and market insights.
  • We used Miro board to collaborate virtually.
  • After ideation, we use a prioritisation matrix to rank ideas according to user and business impact and effort. 
  • I marked up the working process on each screen so stakeholders could see which phase we were in.
  • We held virtual stand-ups twice a week. We had a team meeting every Tuesday, and a meeting with the product manager, front-end developer every Friday. In our meeting, we discussed our working progress, feedback and exchanged ideas.
  • Also, I ensured to seek technical assessment from developers early in the process to ensure feasibility and effectiveness of proposed solutions

3. Ideation:

💡Ideation workshop sessions
🔑 Design review - Key takeaways

UX Decisions, Prioritisation and Hypotheses:

Using a prioritisation matrix, the relative importance of an idea is determined based on two factors: user and business impact, and business effort.
  • HYPOTHESIS 1: As a result of the ideation session, we concluded that positioning Visit London as the only official guide for London travel, with a strong emphasis on trust and expertise, will strengthen user confidence in purchasing tickets through our platform. For instance, by prominently featuring Visit London's unique selling points on the homepage—such as being recognized as London’s Official Visitor Guide, inspiring 26 million users annually, promoting the best of London since 2011, and offering easy booking options through trusted partners—we effectively communicate our credibility and reliability to users.
  • HYPOTHESIS 2: To optimise clarity and user experience, it's essential to streamline and reduce the number of options and categories on the Visit London website. For example, positioning high-traffic categories such as "Best Musicals," alongside other popular options like "Things to Do," "What's On," "Tickets and Offers," and "Most Popular Now" on the homepage within a dedicated "Must Sees" section, and replicating this organization on the category page, will ensure users can quickly access relevant information without feeling overwhelmed by excessive choices.
  • HYPOTHESIS 3: To reduce cognitive load and improve user experience, content can be made easily accessible with a prominent display that would allow users to explore related items within a category. Following Hick's Law, which states that complexity and options increase decision time, clarity would be prioritised over a plethora of choices. For example, organising subcategory pages within broader categories, such as "Theater," enables users to easily access drill-down subcategory pages like "Comedy," "Kids Shows," "Open-Air Theater," "Improvisation," and more. This organised structure facilitates user navigation, leading to quicker decision-making and improved user satisfaction.
  • HYPOTHESIS 4: Highlighting high-value products strategically can significantly boost user conversion rates. For example, showcasing exclusive guided tours of iconic landmarks such as the Tower of London or Buckingham Palace, Warner Bros. Studio Tour, or The London Eye prominently on the homepage and category pages can capture users' attention and encourage them to make a purchase. Additionally, offering limited-time discounts further enhances their popularity and conversion potential. Aligning promotional efforts with user preferences and market trends allows us to effectively drive sales and maximise revenue generation.
  • HYPOTHESIS 5: If comprehensive product information is provided above the fold, including reviews, ratings, price, cancellation policy, location, duration, age restrictions, directions, nearest tube station, map, and accessibility information, it becomes easier for users to make informed decisions about the main products. For example, when searching for a guided tour of the British Museum, users could immediately access essential details such as customer reviews and ratings, tour price, cancellation policy, location details, tour duration, age restrictions, accessibility information, and directions. Additionally, they can swiftly locate the nearest tube station and view a map pinpointing the tour's starting point. This detailed presentation enables users to assess the product quickly and confidently, enriching their browsing experience and improving conversion rates.

User Journey:

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 optimized the user journey to ensure users were guided to the Tickets.London website and completed their purchase. 

I also focused on improving user trust and loyalty by providing them with the right information and a user interface that is both attractive and easy to use.
Click the ‘Expand View’ icon to enlarge the user journey iframe

4. Wireframes:

📝 Guiding principles
Testing over asumptions
Mobile-first approach
Collaboration
Data-driven decisions
Testing with users uncovers problems. Not testing with users leaves them undiscovered.
Jakob Nielsen

Nielsen Norman Group

5. User research:

User testing was conducted on the solution to determine if it matches how users would think and expect it to work.

🔎 Testing methods:
  • Moderated online user research interviews.
  • Moderated online usability testing.

Goals:

  • Test hypotheses.
  • Evaluate customer experience.
  • Evaluate Visit London brand positioning.

Users:

Participants using smartphones:
  • 18-65 UK.
  • Prioritised target markets US, AUS, CN.
  • Audience Focus: IN, FR, DE, ITA, SPA.
🗣️ Usability Testing:

Based on the wireframes, I created a clickable prototype for user testing. This test was done by 10 people.

After synthesising the data from the interviews, we were able to take out some key insights.

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.
Check list:
1. User research interviews (open-ended questions):
  • How often do you book tickets for shows or attractions?
  • What information would you like to see on this ticketing page?
  • What is your first impression of this page?
2. Task questions:
  • Imagine, you want to go to the Lion King musical with your partner and your two children, aged 6 and 11. How easy was it for you to find the necessary information about ticket options, pricing, and suitability for the Lion King musical, considering your needs and preferences?
  • Could you easily find the location details of the venue for each product on the page? How did the accessibility of this location information contribute to your ability to make informed decisions?
  • Were you able to quickly locate the scheduled time for the show? How did the accessibility of this timing information contribute to your ability to make informed decisions?
  • Considering the information including reviews, ratings, price, location and accessibility information provided how confident do you feel in making an informed decision about purchasing tickets through Visit London website?
  • Were you satisfied with the information provided for each product, including details such as reviews, ratings, price, cancellation policy, location, duration, age restrictions, directions, nearest tube station, map, and accessibility information? How did this information contribute to your ability to make informed decisions?
  • Did you find it easy to locate essential information such as reviews, ratings, price, cancellation policy, location, duration, age restrictions, directions, nearest tube station, map, and accessibility details for each product on the page? How did the accessibility of this information contribute to your ability to make informed decisions?
  • How would you rate from 1(poor) to 10 (excellent) your overall experience?
  • If there’s one thing you could improve on this site, what would that be?

First testing round:

🧪 Usability Test Results:
  • Users found it straightforward to access both the "Book Now" button and information pertaining to reviews and ratings.
  • Some users found it confusing to locate the venue's location without having to scroll down, disrupting the natural flow of browsing.
  • In Prototype A, users found it difficult to navigate when it came to finding necessary information about ticket options, pricing, and suitability for the Lion King musical. The need to scroll down to locate the relevant information proved to be a significant hurdle. Several users expressed frustration with the need to continually scroll through the page, which disrupted the fluidity of their browsing experience.

Second testing round:

🧪 Usability Test Results:

I opted for a tab-based interface in Prototype B to address the challenges users encountered in Prototype A. In Prototype A, users found it difficult to navigate and locate essential information such as ticket options, pricing, and venue location due to the need for continuous scrolling.

Tabs offer a clear and organized way to present different categories or sections of content, allowing users to easily switch between them without feeling overwhelmed or lost.

  • Accessibility of Location Details: Location details for each product were easily accessible, facilitating users' ability to evaluate venue convenience and suitability.
  • Satisfaction with Information Provided: Users were satisfied with the information provided for each product. Details such as reviews, ratings, price, and accessibility information were readily available, helping their decision-making process.
  • Users found essential information, including reviews, ratings, price, and location details, promptly available, which streamlined their decision-making process and improved their overall browsing experience.
  • I ensured that the price remained fixed at the bottom of the page, maintaining its visibility throughout the entire user experience.

 

 

Prototype B emerged as the preferred choice due to its ease of finding relevant information, shorter scrolling, and clearer navigation options

6. UI Design:

⚙️ High fidelity prototypes

Using our UI Components Library not only meant design could come together quickly, but development as well. One of my main roles at VL was creating the first version of the component library, which I worked closely with our front end engineer to implement. 

Leveraging the UI Components Library allowed the high-fidelity designs to come together quickly. Depending on the size of the design project, I normally bypass low fidelity digital design: I find that using a well functioning components library gets you 90% of the way there and it actually takes longer to simplify the designs. I built the UI in Figma, the final results are below.

Design systems are the bridge between designers and developers, fostering collaboration and empowering teams to create cohesive experiences.
Brad Frost

Atomic Design

7. Project Outcome & Impact:

🥁 Results

Accelerated Buying Process:

The data shows that people make purchasing decisions 97% faster compared to previous metrics.

Increased Conversion Rate:

There’s been a notable 21% increase in the number of people who make purchases on the website.

Enhanced Revenue Generation:

Revenue has increased by 30%, with a remarkable 83% spike in revenue specifically from mobile device users.

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 prioritized 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 design language 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.

Hey! Do you want to 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.

Top