The Marauder’s Map

On our twisty journey to design Harry Potter’s magical 3D map

In J.K. Rowling’s magical world, the Marauder’s Map enables mischievous young wizards to navigate Hogwarts Castle’s complex halls and secret passages, and track anyone on its grounds. Rowling introduced the map in her third book and movie, Harry Potter and the Prisoner of Azkaban.

I was a member of the HarryPotter.com design team at Warner Bros. Studio when my colleagues and I were invited to see an early, unfinished cut of the film. After the screening, I pitched our art director an idea that I did not yet know was technically possible: a real-looking, interactive 3D map that appeared quickly on the web in 2004.

The Marauder’s Map would go on to become a fan favourite on the site — it remained a top-level feature in the redesign for the subsequent Harry Potter film. But along our path to creating the map lay unexpected obstacles and detours.

The Harry Potter website featuring the Marauder’s Map. Creative direction by Matt Angorn. Art direction by Anette Hughes. Graphic design by Blake McWhirter. Interaction design by Perre DiCarlo. Development by Rachel Devine.

An Interaction Design Case Study of the HarryPotter.com Marauder’s Map

HarryPotter.com received a complete redesign in advance of each new Harry Potter film. For the Prisoner of Azkaban, J.K. Rowling, Alfonso Cuarón’s production company, and various departments across Warner Bros. Studio approved the new design direction about six months before the movie’s summer 2004 release.

My role

I was Lead Interaction Designer for Warner Bros. Studio’s online department when I was assigned Harry Potter at the end of 2003. For the project, I dreamed up an interactive, three-dimensional Marauder’s Map experience, then developed the idea with my art director. From February through March 2004, I prototyped the experience, designed the interface, interactions, and 3D motion. I wrote 90% of the code and built the technical architecture for the final, shipping map.

I took direction from our art director and creative director. I collaborated with the website’s lead graphic designer and lead developer. I oversaw the work of an illustrator and a 3D modeler/animator. Their names are linked in Credits at the end, as well as woven throughout this story.

Challenges

  • How might we give fans an experience like that of Harry, Hermione, and Ron when they first encountered the mysterious map?
  • Fans will be coming to the map with high expectations—it’s a centerpiece of the third book and upcoming film. How might we create a map that’s memorable, feels real, magical, and delivers some of the emotional resonance of the map that fans experienced while reading the books?
  • How might we come up with an object that feels expansive and exciting, that draws visitors in, feels natural—rather than feels limited by the technology behind it?
  • How do we reduce the download size of a natural looking, animated 3D object so it displays quickly for visitors—over half of whom were on a slow dial up connection?
  • Two months to design, build, and launch.

Our starting point: the books and early screenings of the film

To inspire and inform our work, I bought the first three Harry Potter audiobooks and listened to Jim Dale’s narration as I designed. The Warner Bros. film division sent confidential, pre-release stills from the film, a detailed graphic styleguide, and over a hundred marketing photos.

“I solemnly swear that I am up to no good.” Harry’s first encounter with the Marauder’s Map. Still from the Warner Bros. film ‘Harry Potter and the Prisoner of Azkaban’.

They invited our team to early film screenings in December and January, where magical creatures like Buckbeak were little more than animated polygons. The Studio said if anything we saw in the early screenings could help us, just put in requests for props (theatrical properties used in the films).

Enter the Marauder’s Map.

When first introducing the Marauder’s Map in the film, Harry and the Weasley twins watch as Albus Dumbledore paces in his study. “He does that a lot.”

After the screenings, the entire team was buzzing about how to use the Marauder’s Map in the site. Most of the conversation was to think of the map as its own game, or as part of a video introduction to the site, or — an idea that seems obvious since it was a map — as a literal map to navigate the website.

3D on the web in 2004

The 3D I mention here is not the kind that requires people to wear special spectacles to see objects jump out of a movie screen. Instead, think of games played on a flat 2D screen (like a computer monitor or on a touchscreen phone today). Behind the flat screen we interact with objects that appear three-dimensional in a virtual 3D environment.

Almost all websites today still exist in a two-dimensional flat space. When designers want dimension, we create it through painting and photography and film tricks like shading and forced perspective and parallax motion of flat/cutout objects against a background. Even though today the speed of the internet enables companies to more speedily display complex 3D contents, we still only occasionally see a 3D object on a website. Apple does this whenever promoting new iPhones—as we scroll down, we trigger the rotation of a three dimensional phone that passes us by.

But in 2004 — back when more than half the U.S. was still dialing in to get internet — 3D was so bandwidth-intensive that it took minutes to download before interacting with a 3D object. Worse, to move a real-looking 3D object risked making many people’s computers slow to a crawl. Because of this, 3D appeared online exclusively in games and in experimental sites.

I had come across one amazing exception. Interaction designer Billy Bussey convincingly created naturalistic 3D in his portfolio site, available here thanks to the Wayback Machine. On his site, Billy found an elegant way to warn a user that it may take a minute or more to download. His site went viral among my colleagues in August 2003. I corresponded with Billy a little then, praising his site and asking his preferred 3D tools.

The idea

Come December, my colleague Blake McWhirter gave me a tour of his designs for the new HarryPotter.com. A few days later, I and six of my colleagues visited The Lot, handed over our cellphones at the theatre entrance, and watched a screening of the unfinished film.

Afterward, it didn’t seem a huge leap to visualize how a gracefully moving 3D Marauder’s Map could move within the site. I pitched this idea (along with wild, excited hand gestures) to my art director Anette Hughes in her office.

“When you click here, it unfolds to open to a new section on the map.”

Anette was excited, giving me her signature look-you-in-the-eyes-as-she-enthusisastically-says-“Yyyyyyesss!”. Anette added that it could be how we found the casual games that were otherwise hidden all over the site. She said the map could have “cute, tiny icons for each game!”

But I had no experience designing in 3D. Could we hire someone to do it inside a 3D application? Or would I end up shooting a sequence of stop-motion photos of the real prop map unfolding in a dark room?

Luckily, Annette thought we might collaborate with the Warner Bros. online games team who had experience creating entire 3D worlds. They happened to be just down the hall.

Title sequence at the end of the third film ‘Harry Potter and the Prisoner of Azkaban’.

A day or two after we asked the Warner Bros. film division for the original movie prop, my department received low-res photos of the map in various positions. The film division promised to deliver the actual prop within a few weeks—they were still holding onto all props in case of reshoots, pickup shots, and as visual effects reference.

These low-res map photos didn’t clearly demarcate specific rooms, hallways, faculty offices, or student dorms. So over subsequent meetings, the team devoted time to pinning down the final set of games and which sections we would need to identify somewhere in the map. Most games would appear all across Hogwarts Castle, the eight quidditch games would obviously be found on the pitch. A Leaky Cauldron game and a wand selection game would appear where the original pub and Ollivanders Wand Shop did in the books: in Diagon Alley.

Since we didn’t have the prop, there was a lot we didn’t know including how the map actually opens and closes. Despite this, I prototyped what I could: a map that feels alive in the corner of the site, which when you hover over it, springs out and unfolds. The 17-second video below is crude, but it was done fast to show my supervisors what was possible.

Earliest map prototype.

I saw enthusiasm from Anette and we took it to our department’s creative director Matt Angorn. Also enthused. Matt asked me to draw up a wireframe to identify sections to view, assets needed, and to establish scope. While we awaited the actual prop, Matt and Anette encouraged me to use greyscale map spreads for both wireframes and initial prototypes or storyboards.

Wireframe identifying sections to visit

Identifying open sections of the Marauder’s Map. Note that “LOWER CAMPUS” would eventually change to “CASTLE GROUNDS” to match the styleguide.

Identifying games to add to each section

The team used these to identify where to place four-to-eight games in each section of the map. (None of the initial map photos showed the Quidditch field.)

2nd prototype (low fidelity)

Using these wireframes, I prototyped a low-fidelity interactive interface. The value of low-fidelity interaction design is in figuring out how to make something work without getting caught up in the details of how it looks.

Below is a short video demonstrating interactions with a prototype I built in a 2000s-era technology called Flash. This helped me work out the technological structure and architecture for the final map, as well as interaction flows.

Designing the experience in low-fidelity. An interactive version of this was sent to Warner Bros. Studios heads and to J.K. Rowling for approval of the concept and experience.

In order to catch errors, I silently observed people across the company interact with the prototype. Occasionally I’d ask questions, then refine it when I saw confusion points or if something felt awkward or unnatural. Once refined, we shared a prototype with our stakeholders: senior executives at Warner Bros., the filmmakers, and finally: J.K. Rowling.

There were two moments in my professional life where a creative legend sent a small word of recognition my way. In 2007 I had designed and built the 20th Anniversary website for The Princess Bride, and the two words “Love it.” came back from its director Rob Reiner (who also directed This Is Spinal Tap). The other time was in Feb 2004 when we heard from a Warner Bros. executive on the call that J.K. Rowling was “particularly happy with the map”.

The map arrives, but one crucial piece is missing

With a little over a month to go until launch, the Studio sent us an original prop of the Marauder’s Map. I scanned each leaf at high resolution, clipped, cropped, and optimised them. Below is a subset of the map leaves. I delivered these—along with my low-fidelity prototype and the prop itself for reference—to our 3D modeler/animator Jeff Jones to assemble inside of a desktop application called 3D Studio Max.

Cleaned-up scans of an original prop map. In prep for 3D, I removed checkered borders. In my first scans of the prop, Remus Lupin’s nickname “Moony” was misspelled (first scan above) which luckily our developer (and Grangerhead) Rachel Devine noticed early enough for us to fix before it launched.

The Warner Bros. online games team had been hard at work creating 24 casual games for the new website. Eight of these games were based on the wizarding sport of quidditch—a team-based stadium competition played on broomsticks.

But when the original prop map arrived, we found it had no quidditch pitch!

Improvising, I spent two hours that night fast-forwarding through the previous two movies, taking screenshots of various views on the game.

Next morning, I handed these off to the site’s lead graphic designer and brand guru Blake McWhirter who took these movie stills away and in three hours had designed a near perfect quidditch pitch that looked like it was pulled from the original map.

Blake’s handiwork, below right.

Left: Stills from the previous films were our gospel for how the pitch should look. Right: Illustrated map of the Quidditch Pitch by Blake McWhirter.

3rd prototype: iconography challenges in the map

Next, I mocked up iconographic and text elements to identify sections on the map, relying heavily on graphics from the Harry Potter styleguide. In my 3rd prototye below, you can see the blood-red icons all look the same. Which one identifies the section we’re in? And which are buttons that lead to other sections? Confusing.

Still not 3D yet. Only after interacting with this was it clear we needed arrows to get us to other sections.

On seeing this, our lead developer Rachel Devine warned that by fitting text directly into these graphic elements, it would later make localisation difficult. Translating the map into German for example could blow the text out of those graphic elements.

To solve this, I floated large, readable text above the outer edges of the map (visible in final video toward end). On roll-over, arrows appeared.

Marauder’s Map interaction design in 3D

Jeff Jones finished modeling our map and constructed an initial rig for its lighting. I then spent a half-day sitting beside him making the same gestures from my pitch to Anette, only this time with the prop in my hands.

The assets I needed here were different from the assets needed on 3D games. In games from that time, 3D objects were allowed to look cartoonish or a bit like the 3D technology used to build them.

  • The map required a total of 15 animations that looked photo-real.
  • The end of each animation would be crisp but didn’t have to look perfect because I’d be able to fix discrepancies in Photoshop later.
  • Motion between one section to the next had to be graceful, fast, and naturally blurred.

15 animations total:

My sketch for 3D artist illustrating the 15 animations needed. The animation from Quidditch to Diagon Alley (from 4-to-5) could be reused in reverse (5-to-4), so that counts as one. (Note: section names in my sketch were working titles that changed by the end.)

If a visitor wants to go from Hogwarts to Quidditch, that was only one of a total fifteen 3D transitions. Each of the five final sections (Marauder’s Map, Hogwarts, Castle Grounds, Quidditch Pitch, Off Grounds) had to be accessible one click away from each of the others, and all had to be accessible to-and-from the small folded up map in the corner.

Knowing I’d be sweating the file size later, I limited lighting so that most of the render was in darkness. The map’s edges fade to black quickly, which would enable me to cut out just the image, and throw a black matt behind every frame so none looked like they were cropped.

Running out of time for 3D

Pressure was on for the online games division to produce 24 Harry Potter-themed games—all ready to appear on this map on the day the website launched.

Since our 3D animator Jeff was on the games team, it became clear we were going to run out of Jeff’s time to accomplish all 15 animations. So I dropped four of the outstanding animations to-and-from the corner map. I figured I could still make all corner animations look good by reusing the one we had animated already—from the “corner map” to “Map open” (see diagram above). Later, I made these missing transitions each look different by varying their transition speeds and reusing extra frames from other transitions.

Jeff continued on-and-off for a few days, first creating initial versions of the remaining animations, then introducing blur effects to all transitions. Then we sat together for a final half-day to refine his latest animations.

Below is one of the many rendered videos of the 3D map visiting four of the five sections. Transitions to-from Hogwarts were still unfinished at this point.

3D motion rendering.

On seeing this, the Marauder’s Map finally felt real!

“Ta dah! –wait. Oh no?!?” Overplaying our magic cards

Our Warner Bros. team’s in-house illustrator Byron Hudson created incredible animations seen throughout several versions of the Harry Potter site. For our map, Byron animated tiny delightful icons: a leaky cauldron sprang from the paper then if you moved your cursor away, it walked off the edge of the map. When the sorting hat emerged from the page, it made a kind of wrinkled “harumph!” expression, then bowed its tip.

Screenshots with four of Byron Hudson’s animated icons on the Marauder’s Map. For The Owl Post (LEFT), an owl flew in to land on its cage, then flew away.

None of these animations made it into the final map. :(

A Warner Bros. brand manager returned with a harsh “no” and note that the icons “added additional magic to the J.K. Rowling world”. This took us by surprise, but there is good rationale here. Rowling had already created a world filled with magic. She hadn’t added objects into her map that had their own personality. And so (only in retrospect was it obvious) most of those delightful animations had to — like our leaky cauldron — walk off the edge of the map never to return…

Scripting

When it comes to writing code, I’m not in the same league as a proper developer. That said, I do prototype a fair amount. Prototyping requires a decent grasp of the scripting languages used to control objects in popular prototyping tools.

Knowing some script, understanding the structure of code, being okay getting lost in it—this enables designers to execute big ideas without the constraints of trying to use a prototyping tool as if it were a purely graphic tool.

Another tip for interaction designers: collaborate with developers, particularly those who are excited to offer help and fixes. Rachel Devine was a singular, brilliant engineer—patient with me since I was only starting to venture into advanced scripting. It helped also that Rachel was a passionate fan of everything Harry Potter and wanted this map to be cool.

Flash’s scripting language was ActionScript — an object-oriented language based on JavaScript. With it I could target a specific object on a screen and tell it how to move or change colour or disappear. I could also target frames on a timeline. In order to say: “go to and play the sequence of frames that show the mini map in the corner unfold and open into the map’s Hogsmeade section”, I wrote:

goToAndPlay("frlMiniToHogsmeade");

I wrote 90% of the script for the map. Rachel wrote the remaining code. And our colleague Lisette Osterioh reviewed and repaired my 90%.

Below is a screenshot showing a bit of essential script from the map. At top Rachel commented “RKD Note…” then commented that the following script is meant for deep linking. Her code here enabled a visitor to tap on a casual game found on the map, finish the game, then tap the browser’s back button and be in the map where she left off.

Midway through, you’ll see my comment explaining the naming of the sections/frame labels so that months later a developer could view the code and understand how the map takes a visitor to any section she chooses.

Optimising 3D for the web in 2004:

So how do we reduce the download size of a 3D object so it appears quickly on millions of screens in 2004?

From the final rendered 3D video files, I imported 24 frames per second into Flash. Then I began the meticulous process of dropping frames, speeding up animations, until each transition consisted of between 8-14 frames total, yet still looked natural. The compressed, exported file at this point was down to 1.4Mb. Still 3x larger than I wanted.

Screenshot of the Flash interface and timeline for the map. On the timeline you can see the architecture and frame labels which my script targeted based on button clicks. Zoom in if you like.

Next I roundtripped frames back-and-forth between Photoshop and Flash.

Sections (crisp frames): Once the animation comes to a stop, a visitor should be able to clearly read what’s on that section of the map. This would require a higher-res, crisp frame. Luckily we required only five crisp frames.

Our quick 3D design process resulted in the 3D-rendered video showing visual errors. Sometimes two leafs of the map on either side of a “fold” were misaligned. Sometimes lighting on a section frame made it hard to read something important on the map. To fix these, I patched-in the earlier scans of the prop map in Photoshop. Once optimised, the five crisp section frames were down to btw 23-to-39 kilobytes each.

Transitions (small, blurred frames): Transition frames are seen when traveling between each section. Because transition frames were barely perceivable for anything but a fraction of a second, the goal was to compress them each into a negligible few kilobytes in size.

In Photoshop, I scaled each transition frame down to between 20%-to-50% of its original dimensions, then I trimmed all edges to only show the visible image, trimmed again to mod-8 (dimensions divisible by eight produced less-jittery animations in Flash). Once small, I blurred regions of the image and kept exporting them until I got each down to between 2-to-6 kilobytes. Then I imported them back into Flash as jpegs. There, I stretched these small images back up to their original 100% size. Finally I toggled on a feature in Flash called “Allow smoothing”. This roundtrip process hid jpeg artifacting (jags and hard edges that become visible when optimising an image to a small size).

In the end, the entire animated, interactive Marauder’s Map shipped at 392 kilobytes.

For comparison, the map is smaller than the Flash interface screenshot above (419kB). It’s 1/8 the size of a typical photo taken on an iPhone (3.2Mb). And it’s 1/643 the size of the latest Facebook iOS app update (252Mb).

Download the map? Only if you request it.

Today visitors expect a website to deliver a typical 400kB jpeg image immediately to their phone. We expect a TV show to start streaming its 4.6Gb video with no delay to our TVs. But in 2004, broadband was not as broadband as it is today. A fast T3 internet connection was expensive and common only in the offices of companies located in big cities.

So: it would have been a mistake to deliver 392kB to our 1.1 million unique visitors each day, particularly when only a subset would open the map on their visit. Over half used a 56 kilobyte per second dial-up connection.

Our creative director Matt Angorn made this case once we were confident that the final map size would be under 400kB. So one week before launch, I split the map in two (no Horcrux jokes, please). I split it into a small 9kB map in the corner, and then after a visitor tapped that mini map, we’d load the full map to replace it.

I assembled a preloader using a strategy I’d just recently worked out for the Warner Bros. Studios website.

The Warner Bros. Studios website in Feb 2004. Art direction by Anette Hughes. Graphic design by Julie Fisher. Interaction design by Perre DiCarlo. Development by Matt Neuenburg.

Across the top, clouds slowly drifted through the sky toward us.

Three stills showing slow-moving clouds that drift across the top of the Warner Bros. Studios website. Feb 2004.

Our peaceful, beautiful clouds made some of our Quality Assurance machines chug slowly. To resolve this, I wrote a script that, prior to loading any clouds, checked a visitor’s bandwidth and how many frames per second her browser could play video. If both were fast enough, then we downloaded and rendered the clouds. But if I detected the visitor’s machine couldn’t handle it, the script only displayed a still jpeg image of the clouds.

The Marauder’s Map preloader worked similarly, but it only tested bandwidth. As the initial site loaded, and before a visitor requested the map, I had already checked the speed of a visitor’s web connection. Tap on the map? If the visitor’s connection speed was fast, then immediately unfold and open the map. But if the connection speed was slow, then dark red ink spread across the surface of the small map for between two–to-seven seconds (until the map was fully downloaded), then the map unfolded and opened. After that, the experience was identical for both visitors.

The Marauder’s Map: delivery

The new Harry Potter website launched globally ten days ahead of schedule on 25 March, 2004 — over two months ahead of the Prisoner of Azkaban film’s 4 June release date.

Walkthrough video of the final, live map.

The Marauder’s Map for HarryPotter.com. Final, shipping map walkthrough.
Four open sections of the finished Marauder’s Map.

Results

J.K. Rowling’s books and film adaptations remain an unrivaled cultural phenomenon with a passionate following. Harry Potter represented our team’s largest launch to-date, with a pre-built fanbase dwarfing typical web stats.

  • On the day the new Harry Potter website and Marauder’s Map went live, we jumped from our average 1.1 million unique visitors daily to 7 million.
  • By the film’s release date, we reached 12 million daily uniques.
  • The new site featured a magically unfolding, three dimensional, interactive Marauder’s Map. It enabled kids and adults to find casual games and activities hidden around Hogwarts Castle, its grounds, and on the Quidditch Pitch. The localisation division translated the site, including the map, into 17 languages in 30 countries.
  • Harry Potter and the Prisoner of Azkaban brought in $93,687,367 on its opening weekend—3 million and 5 million higher than the previous two Potter films and the 3rd biggest opening weekend of any film to date.
  • The Harry Potter and The Prisoner of Azkaban website became a 2005 Webby Award Honoree.

A month before release, Warner Bros. gave an editor of The Leaky Cauldron a preview of the upcoming website, writing:

Yesterday, I was lucky enough to be shown a sneak preview of the redesign of HarryPotter.com that’s debuting in about a month — it’s darker and cooler and dispenses with most of the notion that these are kids’ movies deserving a kids’ site. Here’s what you can expect:
The Marauder’s Map, which on the site is detailed and patterned as if it came out of a Tolkien anthology, serves, naturally, as the navigational tool for the entire site. It folds out like an accordion, pops up like a pop-up book, leading around a very detailed map of Hogwarts (and the different elements of the site).

The day after launch, a Senior Vice President from somewhere high up in Warner Bros. compiled and sent around some of the first fan comments from Mugglenet and The Leaky Cauldron — the news and community sites for Grangerheads and Potterheads:

The website is awesome. The trailer is great too.
Have ya’ll visited the site? It’s freaking fantastic! I love the idea of the site map being the Marauder’s Map!
THe SITE is REALLY COOL! Hopefully they will get more buddy icons and wallpapers soon.

The interactive map became a fan-favourite and it returned as a top-level feature on the next film’s redesign Harry Potter and the Goblet of Fire:

Marauder’s Map in the redesign for 2005’s ‘Harry Potter and the Goblet of Fire’. Creative direction by Anette Hughes. Graphic design by Blake McWhirter. Interaction design by Mark Beechy. Map interaction design by Perre DiCarlo.

Credits

The Marauder’s Map team worked for Warner Bros. Studios, in its online department in Glendale, California.

“I solemnly swear that I am carving out a small slice of magical Internet lore.”

“Mischief managed!”