Immersing Harry Potter fans in a new shopping environment
360° EXPERIENCE • ECOMMERCE
Harry Potter 360 Shops is a new offering within Harry Potter Shop, the official online store for Harry Potter merchandise. My main focus was on guiding the user through this unfamiliar shopping experience from entry and exploration to product discovery, reducing cognitive load and streamlining navigation for an optimal desktop and mobile experience.
UX Lead
ROLE
TOOLS
UserTesting, Figma, Cozmos
TEAM
John Spalding (UI Lead)
Luther Lotz (Project Lead)
Mykka Claveria (UX/UI Designer)
Jon Moss (Director, Ecommerce)
Holly Georgiou (Ecommerce Content)
A new way to shop your favorite Harry Potter products
BACKGROUND
Harry Potter 360 Shops initially launched in 2022 as a new shopping experience designed to offer customers an immersive environment to explore, far beyond the typical eCommerce site. Our team was approached a year later with the need to help drive customer shopping behavior. Users were spending a lot of time in the 360 site but not transacting.
*SEPT 1 = BACK TO HOGWARTS DAY
Balancing exploration with efficiency and usability
PROBLEM SPACE
From our internal audit and review of the existing sphere experiences, the following challenges and limitations were identified.
Immersion vs. Usability — While the immersive environment was appealing, the overwhelming choices and interactive elements make it hard for users to focus on the products and their purchase journey.
Navigation Complexity — The layout lacks clear indication of what spheres are available and where the entry and exit points are located. User satisfaction and efficiency are at risk without clear and consistent navigation and steps to achieve their goals.
Platform Limitations (Cozmos) — Integrating new functionalities or improving on existing features were restricted by Cozmos’ available built-in design tools. This includes search, multi-layered navigation structures, overlay and static UI, and element hover states.
Disconnected User Flows — We had creative control to design the experience within Harry Potter Shop 360, but were constrained by the traditional eCommerce site for certain aspects of the user journey, such as entry points or checkout and product modals that are not part of the immersive environment.
INTERNAL DISCOVERY SESSIONS
Analyzing the current Harry Potter 360 Shops experience
USABILITY TESTING
I conducted 9 unmoderated usability tests to capture feedback and establish a baseline for comparison against our redesign. My goal was to identify pain points in the current customer experience and highlight opportunities for improvement. Participants explored the live website while completing tasks based on typical shopping scenarios. Additionally, I observed their initial impressions and gathered any suggestions they provided for enhancing the user experience.
DESKTOP CONTRIBUTOR - OLD HOME SPHERE
MOBILE CONTRIBUTOR - OLD TRUNK SHOP
Navigation Complexity — Users experienced difficulty identifying clear entry and exit points within the environment. A significant amount of time was spent in the Home Sphere, as participants were unaware of the other available spheres, leading to navigation inefficiencies.
Low Signal-to-Noise Ratio — The visual design elements were perceived as overly cluttered and distracting, which led to user confusion and dead clicks (i.e., doors that didn’t lead anywhere). Participants also expressed negative feedback towards product images, indicating that these elements are unattractive for purchase.
Lack of Organization of Products — Users had trouble discovering and finding products due to a lack of clear categorization of products, especially in the Home Sphere. Participants suggested that a more focused presentation of products would enhance their overall shopping experience.
Poor Mobile Experience — Users struggled with the mobile experience, particularly with the rotation instruction. Many participants did not notice the prompt to rotate their device, resulting in confusion and difficulty engaging with the 360 content.
I created user personas and journey maps based on user insights and data from marketing, representing the different goals, behaviors, and interactions of real Harry Potter Shop customers. I ensured both artifacts were effectively integrated into our decision making to craft an intuitive online shopping experience that caters to our diverse audience.
USER PERSONAS
USER JOURNEYS
Understanding Harry Potter shoppers in the real world
IN-STORE INSIGHTS
Visiting Harry Potter Shop New York offered valuable insights into shopper behavior and product groupings. I was looking for ways to authentically capture the essence of the brand and adapt similar engagement to the 360 site. It was also a reminder that these shopping journeys are not linear or just transactional, they’re experiential. The store encourages customers to shop through storytelling, thematic displays, and interactive elements.
MOOD BOARDS
Highlight: Home Sphere progression
WIREFRAMES
I used Figma to create traditional 2D wireframes and high-fidelity mockups to represent our 360° platform. I needed to account for user navigation, interactive elements, storytelling, and visual layout. Weekly, we partnered with our stakeholders and E-commerce team to review designs and assess product inventory per sphere. Once finalized, these wireframes were used as a template for our UI Lead to start building and structuring our layouts in Cozmos.
LO-FI VERSIONS
MID-FI VERSIONS
FINAL MOCKUPS
Getting users in a shopping mindset in our improved Home Sphere
ENHANCEMENTS
It was important for our Home Sphere to set the stage for shopping. I wanted to find a way to use this space as an informational hub reminiscent of a classical homepage to help guide customers before they start their journey. My goal was to orient the user to foster smoother interactions, faster adoption rates, and better overall usability.
NEW HOME SPHERE
NEW HOME SPHERE
Leveraging Familiar eCommerce Patterns — We introduced conventions like CTAs, product labels, headings and subheadings, grounding the experience as a place to not only explore, but also to shop. This provided users with guidance as well as clear, actionable steps while reducing cognitive load.
Narrative Building — Our use of text paired with graphical elements was used to tell a story, leaning on the Back to Hogwarts narrative for launch. This Home Sphere was designed with seasonality in mind, having the ability to accommodate to new marketing initiatives like Christmas at Hogwarts.
ENTRY/EXIT POINTS
Streamlined Navigation Path — A central “menu” was implemented in the Home Sphere to create a more structured interface and reduce friction for users who may have felt overwhelmed by the platform's initial complexity. I created these entry/exit points in Photoshop and they are included in every sub-sphere, allowing for quicker access to different “shops” and key product categories.
Blending exploration with a clear focus on products in the sub-spheres
ENHANCEMENTS
This approach enables users to discover and engage with products while maintaining a clear shopping focus. Delightful visual elements and nods to the films will enhance the experience without overpowering or distracting from the user’s primary goal of browsing and purchasing.
NEW WAND SHOP
NEW SWEET SHOP
High Signal-to-Noise Ratio — Supported by the eCommerce conventions, we leaned into more white space and minimized unnecessary visual elements and distractions, ensuring users are more likely to find important information, discover relevant products, and interact with hotspots intuitively.
Maintaining the Magic — We highlighted key characters, quotes, and other iconic elements to maintain the whimsical essence of the brand. Drawing from my visit to Harry Potter Shop in New York, it was essential to use storytelling and thematic elements to encourage users to shop and engage with the experience.
Reshaping and optimizing the mobile experience
ENHANCEMENTS
We accounted for both portrait and landscape orientations, with clear focal points that guide the user through the experience without overwhelming them. I also prioritized minimalistic UI and layouts to avoid overcrowding the small screen and ensure an intuitive experience.
HOME SPHERE
SLYTHERIN SHOP
TRUNK SHOP
WAND SHOP