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. →
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)
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.”
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.
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.
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.
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.
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.
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”!
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.
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.
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.
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.
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.