Diagon Alley
A magical, one-stop-shop for all things Wizarding World
Overview
In early 2020, I was approached by the VP of my organization to help lead the creation of a proof of concept app that would tie in all Wizarding World verticals into one seamless e-commerce experience. The goal of developing the app was for my team to gain exposure with Wizarding World stakeholders and ultimately get buy-in from them to help fully realize the project.
Role
Research, Ideation, Wireframes, Interaction, Visual Design
Team: Design Lead (myself), 2 designers, 1 Jr. Designer, 1 Product Manager
January - March 2020
The Problem
At the outset of this project, several Wizarding World sites were tied to different verticals within the brand. Users had to navigate multiple sites dedicated to purchasing theatre events and tour tickets, Harry Potter and Fantastic Beasts-themed merchandise, and others for branded interactive content. The business goal was to conflate the niche aspects of those sites into one seamless e-commerce experience while maintaining the core aspects of the Wizarding World brand. With the development of an app that could achieve this, it could provide a greater reach to new customers and appeal to a large base of fans.
The Solution
Diagon Alley is an innovative app that captures the magic of Wizarding World and incorporates it into a seamless, easy-to-use method of shopping for products, event tickets, and more.
Research
At the beginning of the project the team was given a creative deck for the Wizarding World franchise that was valuable in contextualizing the brand and outlining its values, user types, and business goals.
The initial business concept for the app was primarily driven by the prospect of Harry Potter NYC - a massive brick-and-mortar presence in central Manhattan slated to open in the summer of 2020. With this came a push to have in-app features tied to the NYC store that would appeal to Wizarding World customers and prompt them to visit the store.
The overall goal was to augment an in-store experience with a traditional e-commerce app that would provide a central location for product offerings across all Harry Potter and Fantastic Beasts properties. These products would include those from branded tours, theatre events, and experiences such as VR and theme parks.
I also felt it essential that the app reinforce the core Wizarding World business values: magical, fun, entertaining. As such, I pitched the concept of integrating an immersive shopping experience that would adhere to these values and appeal to the superfans. Moreover, I felt that this would have the ability to expand the brands customer reach to a new generation of fans.
Primary business goals for Diagon Alley included:
- Drive traffic to one central e-commerce app
- Provide an entertaining experience for existing and prospective fans
- Get people to visit stores
- Steering customers towards new and featured product offerings
- Be functionial and easy-to-use
User Personas
Once the team gathered all requirements for the project, we moved on to further examining the types of Wizarding World users outlined in the creative brief and how they would fit into the context of our app. From this, we were able to extract typical users of the brand and modify them into archetypes for our project - each having specific needs, pain points, and goals.
Content Audit
Since the primary goal of the app was to unify all brand properties in one place, it was essential for the team to begin with taking inventory of all current franchise sites. These included tour souvenir shops, theatre event tickets and related merchandise, tours, and Wizarding World-themed products. From here, we were able to identify where we could streamline overlapping product offerings and which products would be aggregated into the overall store architecture.
Comparative Research
Using our set business goals and user types as a foundation, I began to conceptualize what core features would help solve the needs of both. For further inspiration, I looked at several top-name e-commerce apps, including shopDisney, which carries merchandise across several well-known brands, as well as competitive retailers in the clothing, home goods, and event ticket spaces. Studying these apps helped identify and compare common features and others to include to make ours unique.
A key takeaway from this process was learning how various e-commerce apps handled the overall structure of content and features such as the in-store experience and points systems. The research helped inform the features we would include and greatly influenced the architecture of the app.
Mind Map
After we had established the needs of our users, thoroughly audited existing branded sites, and analyzed what features other e-commerce apps utilize to set themselves apart, the team had amassed an immense amount of data. Thus, I felt it would be beneficial to create a mind map to assess our findings better. This method ensured a more transparent and concise hierarchy of information and established relationships between each of the categories.
Information Architecture
Once the team had mapped out and analyzed the data from our research, our next steps were to develop the app’s navigation system. The content audit we had conducted earlier made the process of determining what product offerings to include easier. We then created a site map to ensure that products would be placed where users would expect to find them and determine where our feature set would live in the structure.
Ideation
Now that the team had collected and organized the insights from our research, we began to design the major components of the app. In the early phase of the project, I had suggested incorporating an immersive shopping experience into the app that would adhere to the brand values and meet the needs of the superfan. After the business approved the inclusion of the idea, I began to conceptualize how to bring it to life within a mobile framework.
Through our research, I came across a few apps that utilized AR to assist in trying on clothing and visualizing how objects would fit into a particular space. I felt this format would work well as added features for specific product offerings in the traditional e-commerce shop. However, I thought that the experience we were trying to encapsulate would need to be more immersive - almost to create an interactive world, the user would use their phone to navigate.
Upon further research, I came across the Facebook 360 feature, which allows users of the social media platform to create interactive panoramic photos. Those viewing the images on a mobile device can use its motion-sensing capabilities to shift their perspective around its environment. Through this feature, I would draw the most inspiration for a VR solution and apply it to our goal of creating a highly interactive shopping experience.
Storyboarding the immersive experience
Though I now had a framework to build the experience around, the question of where the user would go, what they would see, and how they would navigate was still far too abstract. We knew that the name Diagon Alley would be instantly recognizable to fans as the place where wizards went to purchase magical items, so I decided to use that concept as a jumping-off point. From here, we would need to map out how users would interact with the environment and, most importantly, how to find and purchase products within it. To further flush out the experience, I felt it best to use storyboards to design a user's journey.
Lo-Fi Wireframes
After working through the interactive portion of the app and obtaining feedback on the business side, the team began to wireframe the main components of the app. While working through this, it was essential to prioritize the features that would best address the needs of our users.
Feedback
Once we had worked through the feature set, we proceeded to create a functioning prototype in Figma, which we used to present to our internal stakeholders. As the project initially began as a proof of concept internal to our business unit, traditional user testing methods, in this case, were not viable. Thus our stakeholders became the proxy for user test subjects. However, this did not deter us from gaining valuable feedback on the direction of the project before we moved on to visual design.
The home screen conundrum
Issue
For our home section, I knew we would need to work on promoting the app's features while also displaying featured content, product suggestions, etc. We saw how other retailers achieved this through our research, and it helped inform our solution.
The initial concept was to have the homepage act as a central location, with features and promoted content interspersed along one vertical scroll. The hub would also be the lead into the shop by allowing users to search products by category. However, our stakeholders felt that the app's core features were a central selling point and, as such, should be displayed more prominently. It was also suggested that a traditional shop experience be reprioritized as a core feature as it was scalable and could grow over time.
Solution
To make the app features stand out, I decided to move them higher up on the Home Screen and use them almost as tabs to make them easily accessible. I also moved the shop categories from the homepage and created a new section on the nav bar allowing for a robust product search with the potential to grow.
Never leave your passport behind
Issue
The Wizarding World website and accompanying app let fans keep up with the latest news and featured content within the franchise. With account creation, called a Wizarding World Passport, users have access to interactive features such as being sorted, assigned a Patronus, and selecting their favorite characters through the site. For our app, it was essential to consider using this as a companion to draw information about the user and integrate it to provide a more personalized shopping experience.
Though we were able to include personalized product suggestions through the app itself, a more pressing issue was incorporating a user's Wizarding World passport on the initialization of our app. We had to consider each of our user types' needs - ones who would have an account, those who would want to create one, and those who tried to bypass it. Stakeholders found the initial concept cumbersome as it would require signing into multiple apps. The feedback made us rethink our approach.
Solution
I wanted to make the login process as efficient as possible, so I decided to make Wizarding World Passport login a one-time instance. If the user had logged into the Wizarding World app, Diagon Alley would carry over that login data for quicker access. If the user were not associated with the account displayed, it would push them back to the initial screen to prompt them to create an account, login with different credentials, or skip altogether.
Design
I thought it best to build off the already established Wizarding World brand guidelines for the UI design as it is most closely tied to the brand. We kept the UI dark with bright color accents to play into the magic and mystery of the Wizarding World. I favored a more illustrative style over photo-realistic for the immersive and shop experiences to create a fun and ultra-stylized world for users.
Colors
Fonts
Icons
User Flows
Once we had fully developed all our solutions for user needs and expanded on the design system, we began designing the UI and immersive experience. Below are walkthroughs of the finalized features of the app.
Diagon Alley VR Shops
Creating an innovative and fun way to shop was critical for the Wizarding World superfan. The Diagon Alley shops fulfill this need by providing an interactive experience through the many storefronts this magical street offers. In addition to seeing what different shops have to offer, users can also uncover interesting facts and trivia about wizard lore while doing so.
Ticketing
A central location for purchasing tickets to tours, theatre events, and more. Users can view upcoming events in and around their area or browse others in different cities. Purchasing tickets is a breeze, and there is even the built-in capability to store a digital version in the app for paperless entrance.
Shop & In-Store Pickup
The Diagon Alley shop makes it easy for users who want an expedited shopping experience to browse and find the Harry Potter and Fantastic Beasts-related products they seek. For those interested in flexible shipping options, there is the ability to check if a particular item's available at a Wizarding World branded location for in-store pickup.
In-Store Mode
In-Store features make navigating a given Wizarding World location a unique and engaging experience. Users have access to useful tools such as scan and pay, in-app purchasing of tickets for in-store events, and a location map. For the superfan, there are fun features like the ability to cast spells and find hidden hotspots around the store for a chance to earn points towards future purchases.
Key Takeaways
I knew from the beginning that the project would be an immense undertaking, given it was for a major brand that could have impactful business implications for our organization. With proof of concept projects, the tendency is to overcompensate with features to impress. Although this was the inherent goal, I wanted to make sure the product was still grounded in a real-world application. Thus, my objective remained constant - to create a well-crafted app that integrates features outlined by business requirements and meets that of users into one seamless experience that had the potential to live as a tangible application. As such, I advocated that the team take the same approach as any other UX-driven project, namely one guided by research, analysis, and iteration.
The project also reinforced the importance of working with a team to achieve a goal. Collaboration is an essential key to success, especially when it comes to large-scale projects. When you can combine your ideas and skill with others, it can evolve a product into something truly compelling.