HUMAN DESiGN

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

This is a tiny site where you’ll find brief case studies from UCLA, Movieclips, and Harry Potter. But first, client logos!

Above are some of the brands where I led interaction and user experience design efforts. For those case studies I promised, continue this way. →

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


UX & SERViCE DESiGN (2017)

I was creative lead for a six-person product team at the University of California Los Angeles (UCLA) from 2013-2017. I designed a mobile-first, modern university website (replacing a 12-year-old site), introduced personalization into the applicant→ student→ alumni journey, and built a dynamic form engine.

Our form engine checks a student’s eligibility, displays only the form fields required of the person viewing it, and provides applicants with a realtime view of the form’s progress as faculty and staff review it. Our form engine reduces time-to-review from two weeks to two days, and saves between 300-to-450 hours of staff time a year, per form.

This project was the subject of my 2016 article for The Mission: A Form Was Never Just a Sheet of Paper.


Role: Lead User Experience Designer.
Topics covered: strategic design thinking, user-centered design, service design, experience flows, forms, iteration, education.


EARLY RESPONSiVE ViDEO PLAYER (2010)

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 and blur 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 two-to-four 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. While we thought our site was a fun destination, 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: how do we make it easy for our visitors to share the actual clips on their remote sites, blogs, news sites, and across social networks? That’s where people could discover our product: 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 (without need to specify dimensions), a player 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 the 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.

Role: Lead Interaction Designer.
Topics covered: startups, responsive design, video players, anticipating change.


THE MARAUDER’S MAP (2004)

In the world of Harry Potter, the Marauder’s Map enables 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 our site an Honree nod the following year. Here’s a short view into conceiving and building the map.

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 three design and engineering leads were invited to an early screening with unfinished effects. The music was filler. Incomplete scenes were blocked out with storyboards. And magical creatures that required post-production computer graphics (CGI) attention (such as Buckbeak) were still simple animated polygons and rough 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 at Warner Bros. Anette Hughes and the creative director Matt Angorn, 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 part of the map to another. In this illustration, I identified areas where we might hide four games in one section of the map.

Soon my team received low-res scans, sent from the Warner Bros. 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.

Note: Ms. Rowling approved, however I heard no actual notes except that she was “happy with it”!

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 film set, we found it had no quidditch pitch. Improvising, I spent an hour or two that 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-5, 5-to-3, etc.

3D motion demo. Early version of the Marauder’s Map visiting four of the five 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.

Side note about how approvals sometimes went wrong. Byron created incredible animations that you’ve seen within the Harry Potter site. For the map, Byron animated tiny delightful icons such as the leaky cauldren springing from the paper and walking off the edge of the map only to reappear again where it stared. A few of his animations however never made it into the final map because a VP within Warner Bros. came back with notes that they added “additional magic” to the J.K. Rowling world. Although it sounds unusual, there is good rationale here: Rowling had already created a world filled with magic. She hadn’t added objects that had their own personality in the map, and so (only in retrospect was it obvious) some of those delightful animations had to, like our leaky cauldren, run off the edge of the map never to return...

All put together, the interactive Marauder’s Map enabled kids and adults alike to navigate to casual 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 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 interactive map became a fan-favourite and remained a navigational centerpiece through three films and site iterations.

Role: Lead Interaction Designer
Topics covered: prototyping, user study, delight, collaboration, navigation, movie websites.


WAYS TO SAY HELLO

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

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

Call:
US: 1 (323) 304-6232
EU: +31 20 894 62 48


INTERACTiON DESiGN FOR MOViE SiTES

Before transitioning to UX, 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.


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

PERRE DiCARLO

UCLA

MOViECLiPS

HARRY POTTER

CONTACT ME

THE BAT BELT