Hi I’m Perre. I design fun, easy to use products.

On this site you’ll find three case studies on experience design from UCLA, Movieclips, and Harry Potter.

For advice on pretty much anything else in life, head to The Hippogriff Cookbook and Kick Litter.


A Form Was Never Just a Sheet of Paper

Escaping a black hole in form design
15 min read
Lead User Experience Designer
Topics covered: user-centered design, experience flows, forms, strategic design thinking, iteration, education

Previously published by The Mission: A Form Was Never Just a Sheet of Paper.

In a 2014 usability study at the University of California Los Angeles (UCLA), a graduate student used a damning metaphor to describe her experience submitting a digital form:

“Applying online is like throwing a paper airplane into a black hole.” 
UCLA Graduate Student

Forms have not been our favorite part of the web. Like the paper forms that inspired them, they can be difficult to read and seemingly impossible to fill out. This is where the new form building technologies target most of their attention. But in her metaphor, our student didn’t focus on the filling-out part. True, she spent time folding a paper plane just so, but then poof! It disappeared. Into what? A placeless place from which nothing escapes.

Students rarely experience a form as an efficient step toward a goal. After leaving her hands, a one-page form can take weeks to wind its way through a bureaucratic institution—all the while a student has little understanding of its progress or how “processing it” could take so long.

Since the bar is so low with forms, we didn’t have to do much to improve a user’s experience. We could apply Wroblewski’s best practices as we transposed the form fields into an online web form, or use a brilliant third-party form creation service. Done.

But let’s imagine that a form was never really a sheet of paper. If you’ll pardon the pun, let’s wonder what’s hiding beneath that paper’s surface. Beneath it, we found work. By studying and designing for the experiences of each person involved in this hidden work, could we shift the form’s heavy lifting off their shoulders?

And for our student, could we shorten the duration of a form? From two weeks to, say: one day?

In fact we could.


Continue reading A Form Was Never Just a Sheet of Paper.


Designing a Video Player That Knows Its Place

5 min read
Lead Interaction Designer
Topics covered: startups, early responsive design, video players, anticipating change

ZEFR’s goal in creating Movieclips was to make it easy, legal, and free for fans to discover and share clips from their favorite movies.

When I came aboard, they had signed the major studios to multi-year licensing deals. 12,000 clips were live. You could search across them by director, actor, or by a favorite quote: “Always be closing.”

Movieclips user interface

I designed the Movieclips video player. I collaborated with the company’s founders Zach James and Rich Raddon, and with heads of tech and operations Philip Southam and Brandon Folkman. To code our player, I recruited and oversaw a developer best known for hacking Hulu’s streams so users could watch on desktop in an Apple TV-like interface.

There wasn’t a standard video player in 2010. If a writer wanted to embed a video clip on her blog or news site, she’d specify the width and height which told the player to scale its fixed dimensions down or up to those sizes. When the embedded player was a different aspect ratio than the video expected, it either stretched the video to a weird aspect ratio, or a smarter player might display black letterboxing to mask the area it couldn’t fill. The interactive elements like the timeline, play button, and fullscreen options were bitmap, and would scale with the embed. If not embedded at the originally-designed size, each interface element risked appearing pixelated.

Competing video sites maintained at least four video players: 1. home: a full-featured player on their own destination website (i.e. on Hulu itself), 2. embedded: a lightweight version with limited capabilities that users could embed on their blogs, 3. partner: to display on partner sites with unique features turned on or off, 4. social: to display a player on emerging social networks like Facebook. Fixing a bug or adding a new feature required updating and testing multiple codebases.

As an energetic startup, we saw these as conventions that were holding back the industry. We took the opportunity to build a player from scratch. We paired that with a realism about our circumstance: we thought our site was a fun destination, but we were like any new website: a small fly out in the midst of an enormous web. Or maybe we were a tough little spider. Anyway, if ever we were to become a destination site, we had to have a presence across the web: on our users remote sites and across social networks. That’s where people could discover us: friends or trusted bloggers sharing video clips.

So we set out to build a video player on a single codebase. We built a player that was easier to embed, that adapted responsively to its context, a player that had all the features everywhere (rather than just on our site), that was all vector so it scaled beautifully, and a player that anticipated that users would eventually change or update their blog templates so it grew with you as your site grew or changed.

Below is the Movieclips player shown dynamically reconfiguring itself based on where users embed a video, and based on the film’s aspect ratio (here, two extremes: 1.33:1 and 2.76:1).

When a user chose to share a video clip, our embed settings defaulted to “scale to fit”, which hid quite a lot of complexity. When loaded on a remote site, our player asked: how wide am I? Based on this and the aspect ratio of the video it was about to serve, it dynamically reconfigured its layout. It showed, resized, and repositioned all vector interface elements, and start-and-finish-screens. In a large embed, our finish screen showed six recommended videos and in small embeds, there’d be four, or three, or just one, depending on how small. If you embedded it into a super-small context like 280 px wide, our player adapted to be a single play button and video. This context-awareness was a first for video players—launched two months before Ethan Marcotte made the first public case for responsive web design.

Paste a link into Facebook? A player appears, having reconfigured itself to render the interface clearly and unobtrusively in each of Facebook’s viewing contexts. Embed a clip on your blog, then change your blog’s dimensions months later? We designed the player to anticipate this, so it doesn’t break or stretch your videos when you do something commonplace like change your tumblr or Wordpress theme.

Ours was the first online player to render all films at their original aspect ratios. We sourced our videos with this in mind, embedded their dimensions (1.85:1 or 2.40:1, etc) in each file’s metadata, then read that data to configure our player’s view area, dynamic height, and embed options.

Movieclips player in trim and edit mode.

What if you want to trim down to just a single quote? Tap “Trim Clip”, and trim handles appear on each end of a timeline. On drag, the trim handles show time codes and the viewable screen shows the exact frame, enabling you to fine-tune your starting and ending points. You’re now two taps from sharing a favorite quote with friends.

TechCrunch Disrupt Finalist Movieclips.

An extended version of this product enabled users to mash up our clips. It became a 2011 TechCrunch Disrupt Finalist.


Designing the Marauder’s Map

6 min read
Lead Interface Designer
Topics covered: prototyping, user study, delight, collaboration, navigation, movie websites

In the world of Harry Potter, the Marauder’s Map enabled mischievous young wizards to travel secret passages, find hidden rooms, and track anyone on Hogwarts campus.

Harry’s first encounter with the Marauder’s Map. Still from the Warner Bros. film Harry Potter and the Prisoner of Azkaban.
“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.

In 2004 I began designing the magically unfolding 3D map you may be familiar with from three generations of HarryPotter.com. The Webby Awards gave it an Honree nod the following year. Here’s a short view into conceiving and building it.

Harry Potter, Fred and George Weasely watch as Albus Dumbledore paces in his study. “He does that a lot.” Still from the Warner Bros. film Harry Potter and the Prisoner of Azkaban.
In this close-up of the Marauder’s Map, Harry and the Weasely twins watch as Albus Dumbledore paces in his study. “He does that a lot.”

Most teams behind a film website never get to read a script, nor see an early cut of the film. Our assets tend to be limited to previously public content: trailers and a few variations on the movie poster.

For Harry Potter and the Prisoner of Azkaban, the Creative Director, Art Director, and the three design and engineering leads were invited to an early screening with unfinished effects. The music was filler. Unfinished scenes were blocked out with storyboards. And the magical creatures that weren’t real were still being built of polygons and textures. We also benefited from having the popular books available. The production studio sent us confidential, pre-release stills from the film and stills meant for the poster, and they told us we could put in requests for props we’d seen in that early cut.

From all this, I sketched an idea for using the Marauder’s Map as a way to get around the website. I storyboarded the experience, saw excitement from my art director Anette Hughes, then drew rough wireframes to identify assets and resources and to establish scope.

Wireframe map opened to Hogwarts Lower Campus.
After sketching, I wireframed the Marauder’s Map sections and how users get from one to another. Here, I identified four games hidden in this section of the map.

Soon my team received low-res scans, faxed from the lot, of the original film prop.

With these scans, I prototyped the interface in Flash, seen below as stills, as proof of concept. To catch errors in the interaction design, I silently observed as people across the company interacted with the prototype. Occasionally I’d ask questions, then refine it when I saw confusion points or if something felt too slow, awkward, or unnatural. Once refined, we shared these with our stakeholders: senior executives at Warner Bros., the filmmakers, and finally: J.K. Rowling.

Stills from an interactive prototype, built in a 2000s-era technology called Flash.

Meanwhile, we were creating eight casual games based on quidditch, a team-based stadium game played on broomsticks. But when the original prop map finally arrived from set, we found it had no quidditch pitch. Improvising, I spent the next night fast forwarding through the previous two movies taking digital photos of various views on the game. Our lead visual designer Blake McWhirter took these away and in three hours had designed a near perfect quidditch pitch that looked like it was pulled from the map.

Illustrating the Quidditch Pitch onto the Marauder’s Map.
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.

I scanned the original prop map at a high resolution, and prepped each map leaf as textures to apply in a 3D model. I oversaw 3D of the map unfolding with graceful, unique animations from each section to every other section: 1-to-4, 4-to-3, etc.

3D motion demo. Early version of the Marauder’s Map visiting four regions. Interactive direction and design by Perre DiCarlo.

From a final rendered 3D video (several generations after the one embedded above), I isolated and optimized each frame for web, and created easing animations between all sections. Our in-house illustrator Byron Hudson created objects for the map that sprang to life on user interaction: the leaky cauldron, dueling wands, the sorting hat.

All put together, it functioned properly as a map to navigate to games and activities hidden around Hogwarts Castle, its grounds, and on the Quidditch Field. As a treat before the fifth film—for one day only—the map revealed footprints as Professors Snape and Dumbledore wandered the halls.

Harry Potter represented our largest launch to-date, with a pre-built fanbase dwarfing typical web stats. On the day the Marauder’s Map went live, we jumped from our average 1.1 million unique visitors daily to 7 million. And by the film’s release date, we reached 12 million daily uniques. This includes full-site translated versions in 17 languages on as many country domains.

The Harry Potter website featuring the Marauder’s Map. Art direction by Anette Hughes. Lead visual design by Blake McWhirter. Lead interaction design by Perre DiCarlo. Lead engineering by Rachel Devine.
The Webby Awards Official Honoree.

Our website for “Harry Potter and The Prisoner of Azkaban” was a 2005 Webby Award Honoree. The map remained a navigational centerpiece through three films and three site iterations.


See 80+ portfolio stills by connecting with me on LinkedIn.

Say hi on Twitter, Medium, Facebook, and Google+.

Call:
00 + 1 + 323-304-6232


Earlier movie and entertainment experience design

Most of my design work was for feature film and media properties including Batman, Warner Bros., Warner Independent Pictures, Gemini Division, Tinkerbell, Hanna Barbera, and more. Many of these are mentioned on LinkedIn. To see stills of everything, connect with me there.


If you’re curious about the books...

In 2008, Chen Design Associates imprint CDA Press published my first book. In it I help teach your cats to do their business as people do: by jumping up to the toilet. It’s called Kick Litter: Nine-step Program for Recovering Litter Addicts.

My latest book is about how to prepare an upside-down pound cake out of Harry Potter’s most beloved magical creature. The Hippogriff Cookbook is available for iPad and iPhone in the App Store.


PERRE DiCARLO

Human-centered Design

UCLA

Movieclips

Harry Potter

Contact Me

More