UX Audit - Warner Bros. Harry Potter tour shop
- jonwalmsley
- Apr 2
- 6 min read
Updated: Apr 7
Overview
To enhance the online experience for Harry Potter fans, a UX audit was conducted on the Warner Bros. Harry Potter Tour Shop, a key e-commerce platform for merchandise. As the lead UX practitioner at Omnicom Media Group, I led this audit in collaboration with Conversion Rate Optimization (CRO) specialists, identifying areas for improvement in usability and accessibility.
Goals
The primary goals of the shop website audit were to optimize the user experience for increased conversions, reduced cart abandonment, and enhanced brand perception of the official WB tour shop over the various unofficial merchandising channels that are also available to consumers. This involved identifying and resolving usability hurdles across devices and digital literacy levels, while ensuring accessibility for all users.
By aligning user-centered design principles with business objectives in collaboration with the CRO team, the project aimed to create a seamless shopping journey that positively impacted both customer satisfaction and revenue generation.
This project not only aimed to optimize the online shopping journey but also served as a catalyst for establishing UX and accessibility skills within the consultancy department, a service they had previously been outsourcing.
Process
The Challenge
The Warner Bros. Harry Potter Tour Shop website, while offering a wide range of products, faced potential challenges in providing an optimal user experience. The audit was initiated to ensure the website effectively converted visitors into customers, minimized cart abandonment, and fostered positive brand perception.
A key objective was to identify usability hurdles that might hinder the purchase process, particularly for users navigating the site on various devices and with varying levels of digital literacy.
Furthermore, ensuring accessibility for users with disabilities was a paramount concern.
The collaboration with the CRO team was essential to combine user-centred design principles with business goals, ensuring that improvements would positively impact both user satisfaction and revenue.
The Approach
As the sole UX lead, I spearheaded the audit, employing a multi-faceted approach encompassing heuristic evaluation, usability testing, and an accessibility audit, conducted in parallel with the CRO team’s data analysis.
This project also became a training ground, allowing me to mentor members of the e-commerce team in UX and accessibility principles.
The audit uncovered a range of issues, from technical bugs and accessibility barriers to navigation problems and checkout friction.
Heuristic Evaluation: I employed Nielsen's 10 Heuristics to systematically evaluate the website's interface. This involved independently assessing the site against established usability principles, such as user control and freedom, consistency and standards, and error prevention. This led to the identification of key usability concerns.
Usability Testing: I designed and conducted several moderated 1:1 usability testing sessions with multiple participants representing the target audience. Participants were given specific tasks, such as:
Find the first Harry Potter book in paperback and add it to your cart.
It is your 10 year old niece’s birthday coming up. She is a big Hufflepuff fan. How would you use this site to find suitable gifts for her?
These sessions were conducted both face-to-face where possible, as well as remotely over Microsoft Teams with participants sharing their screen and ‘thinking aloud’ to capture user interactions and gather rich qualitative feedback.
Accessibility Audit: A comprehensive accessibility audit was conducted, adhering to WCAG 2.1 Level AA guidelines (the WCAG standard at the time of the audit), to ensure inclusivity for all users. This involved a dual approach: automated testing using tools like Axe DevTools, Google Lighthouse and WAVE to identify common issues such as missing ARIA attributes and insufficient color contrast, and rigorous manual evaluation.
Manual testing was crucial in uncovering deeper accessibility barriers. This included thorough keyboard navigation testing to verify logical flow and focus indicators, and screen reader testing with Apple VoiceOver to assess semantic markup and screen reader output. I also conducted detailed color contrast analysis, verified form accessibility, and tested the site's responsiveness to zoom and text resizing.
The audit findings were meticulously documented and mapped against specific WCAG 2.1 AA success criteria. This process revealed critical keyboard accessibility issues and other barriers, which were then prioritized for remediation to ensure the site's accessibility and inclusivity.
● CRO Collaboration & Mentoring: I collaborated closely with the CRO team, providing them with insights into UX principles and methodologies. They, in turn, shared valuable data on website traffic, bounce rates, conversion rates, and traffic sources, using tools like SimilarWeb. This collaboration was crucial in aligning UX recommendations with business goals.
Crucially, I used this project to mentor several members of the eCommerce team, training them on the fundamentals of UX and accessibility auditing, equipping them to contribute to future projects and further establish the department's UX capabilities.
Key Insights
Our combined audits revealed several key findings impacting usability, accessibility, and overall user experience.
Mobile Navigation Bugs: Critical mobile navigation bugs significantly hindered user experience, particularly when using mobile devices. This created a negative user experience and led users to believe there was an issue with the site that could harm their device, causing them to abandon their session quickly.
Critical Keyboard Accessibility Issues: Severe keyboard accessibility issues created a significant barrier for users with disabilities, preventing users who rely on keyboard navigation from fully accessing and using the site. Many links were inaccessible via keyboard, presenting a significant ethical and legal problem and severely limiting the site's potential reach and inclusivity.
Confusing Route to Checkout: After adding an item to the cart, the call to action (CTA) changed to an unclickable "tick," with the actual checkout option hidden above the fold. This created a confusing and frustrating experience for users trying to complete their purchase.
Overly-Simplified Navigation: The site's navigation was overly simplified, making it difficult for users to find specific products and potentially limiting cross-selling opportunities. Users spent longer than necessary searching for items, or didn't realize other products were available.
Lack of Upfront Delivery Pricing: The absence of upfront delivery pricing encouraged a higher rate of drop-offs during the checkout process, as users were presented with unexpected costs late in the purchase funnel.
Intimidating for Non-Fans: The heavy use of branded language and in-universe terminology created a potentially intimidating experience for users who were not deeply familiar with the Harry Potter universe, particularly those purchasing gifts for fans.
These findings were corroborated by the CRO team’s data, which showed high bounce rates on certain product pages and significant drop-off during the checkout process, especially at the point of adding delivery.
Recommendations
Based on our findings, I provided the following recommendations:
Resolve Mobile Navigation Bugs: Implement immediate fixes for all identified technical bugs, particularly those affecting mobile navigation, to prevent negative user experiences and maintain site credibility.
Address Critical Accessibility Issues: Prioritize addressing the critical keyboard accessibility issues to ensure compliance with WCAG guidelines and provide an inclusive experience for all users. This includes ensuring all interactive elements are reachable and operable via keyboard.
Clarify Checkout Process: Redesign the post-add-to-cart experience to provide a clear and prominent call to action leading directly to the checkout page, eliminating the confusing "tick" and ensuring the checkout button is always visible.
Enhance Navigation: Implement a more robust navigation system that allows users to easily browse and filter products, promoting product discovery and cross-selling opportunities.
Provide Upfront Delivery Pricing: Display delivery costs on product pages or within the shopping cart to provide transparency and reduce checkout abandonment.
Moderate Branded Language: Balance the use of branded language with clear and accessible terminology to cater to both fans and non-fans, particularly in product descriptions and site navigation.
Outcomes
Since the audit was delivered to the client, the site has undergone a complete redesign and revamp in 2024. They subsequently contacted us to express their gratitude for our findings and confirmed they had incorporated much of the feedback provided. This demonstrates the value and impact of the audit in informing the redesign process.
Key Takeaways
This UX audit provided valuable insights into the Warner Bros. Harry Potter Tour Shop website's usability and accessibility. By leading this initiative and combining UX research methodologies with CRO data analysis, I was able to identify key areas for improvement and provide actionable recommendations. This collaborative approach ensured that the proposed solutions would not only enhance the user experience but also contribute to achieving business goals.
Furthermore, this project served as a crucial step in establishing a dedicated UX function within the consultancy at Omnicom Media Group. By mentoring members of the e-commerce team, I helped build internal UX capabilities and laid the groundwork for a more user-centred approach to future projects.
This case study demonstrates the impact a single UX practitioner can have, both on a specific project and in driving organizational change.
Comentarios