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 System. I worked as the sole designer in a team with one product manager, one back-end developer, and one front-end developer.
TL;DR:
Visit London, the official visitor guide to London, serves millions of users worldwide through its website, mobile app, email, and social media channels. The platform had not kept pace with evolving user needs and market trends since its last major update nine years ago. Recognising the need for transformation, our team embarked on a journey to revamp Visit London into an e-commerce-first website for today’s users.
The September launch of the redesigned Visit London platform marked a significant milestone. The conversion rate of the website increased by 21%, leading to a 97% reduction in the time it takes for a customer to make a purchasing decision. Consequently, revenue from mobile devices surged by an impressive 83%, boosting total revenue by 30%. The user journey was optimised to enhance user experience and overall usability, resulting in a substantial 7% increase in average order value. Additionally, the design system ensured consistency and efficiency across the platform, facilitating streamlined development and maintenance.
Accelerated Buying Process
0
%
Increased Conversion Rate
0
%
Revenue Generation
0
%
Improved Order Number
0
%
Design Process
⬇️Jump directly to these sections:
1. Business Research:
🔍 Understanding the business:
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.
📝 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 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.
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:
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:
UX Decisions, Prioritisation and Hypotheses:
🔑 Design review - Key takeaways
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 our ideation session, we concluded that positioning Visit London as the official guide for London travel, emphasizing trust and expertise, will boost user confidence in purchasing tickets through our platform. We would effectively communicate our credibility by prominently featuring Visit London's unique selling points on the homepage. These include being London's Official Visitor Guide, inspiring 26 million visitors annually, promoting the best of London since 2011, and offering easy booking through trusted partners.
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 on the homepage: such as "Best Musicals," alongside other popular options like "Things to Do," "What's On," "Tickets and Offers," and "Most Popular Now" within a dedicated "Must Sees" section, and replicating this organization on the category page. This will ensure users could quickly access relevant information without feeling overwhelmed by excessive choices. By consolidating these key categories into a "Must Sees" section, users can easily find the most popular and relevant information at a glance. This approach minimizes the need for extensive navigation and reduces the likelihood of users feeling confused or lost on the site. Simplifying the homepage and category pages in this way enhances the overall user experience, potentially increasing user engagement and conversion rates.
Hypothesis 3:
In order to reduce cognitive load and improve user experience, content should be made easily accessible through a prominent display, which will 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.
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 like customer reviews, tour price, cancellation policy, location, duration, age restrictions, accessibility info, and directions. They can also quickly find the nearest tube station and view a map of the tour's starting point. This clear presentation helps users assess the product quickly and confidently, enhancing 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 optimised 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 in FigJam
4. Wireframes:
📝 Guiding principles
Testing with users uncovers problems. Not testing with users leaves them undiscovered.
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.
The prototype B was chosen due to its ease of finding relevant information, shorter scrolling time, and clearer navigation.
6. UI Design:
⚙️ High fidelity prototypes
As a senior UI/UX designer at Visit London, one of my key responsibilities was leading the creation of the initial component library, collaborating closely with our front-end engineer for smooth implementation.
7. Project Outcome & Impact:
🥁 Results
Accelerated Buying Process
0
%
Increased Conversion Rate
0
%
Revenue Generation
0
%
Improved Order Number
0
%
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.