Selected work: 25 experience designs

Perre DiCarlo
Jan 16, 2018 · 13 min read

For over a decade, I’ve helped solve customer experience and strategic design challenges for start-ups, higher education, and large international brands.

Below are twenty-five experience design highlights from clients including Warner Bros. Studios, 42 Entertainment, University of California Los Angeles, MOVIECLIPS (now Fandango) Chen Design Associates, Walt Disney Pictures, and 20th Century Fox.

UCLA

Lead User Experience Designer, 2013–2017

25

grad.UCLA.edu—higher education brand and marketing website

Four touchscreen phone views of the mobile-first, UX-researched and designed website promoting UCLA’s 121 Graduate Programs.
On the left, the UCLA site on a phone. On the right, the same page on desktop. On encountering mobile pages during a usability study, a student remarked: “It’s the same here [on desktop] and my phone. That never happens!” In the year following launch, mobile usage of our site doubled.
A card sort is where we ask customers to organize content or services we offer. They do this by playing a mini-game. Each person is provided 10–20 cards containing our content, and asked to drag them onto a stage and group them, then name that group. This resulted in data and charts my research assistant Colleen McCormick and I parsed, resolved overlaps, and created this site map.
By basing our navigation on analysis of the card sort (i.e. putting things where students and applicants expect to find things), we radically improved findability from 10% to 90%. Old site: visitors found things* 1/10 times. New site: visitors found the same things 9/10 times. *things such as a program they’re interested in, or a list of faculty members.
I moderated usability studies throughout development of the site, the new funding search engine, and our form engine. My office wall’s whiteboard covered with customer comments as they experienced the old site. This provided a reference for majority of pain points we were to tackle in the redesign.
Results of a later usability study. Developers, designers, stakeholders and directors sat in on these studies and afterward compiled notes they had taken on sticky notes, including customer quotes. Pink sticky notes represent one customer’s experience of newly introduced features of our product. Green represented the second customer who put our new site to the test.
Four mobile views of grad.ucla.edu. I led usability-testing of each new feature to be sure it was understandable before launch. Using a two-tiered tabbing system (3rd screen, above) students and applicants were able to locate “requirements for a program” from two years prior.

24

Academic Funding Lookup—search engine

Funding search engine, after. UCLA maintains a constantly updated listing of 625 scholarships, grants, fellowships and postdoctoral awards. I oversaw design and engineering for porting a decade-old funding search database and relaunching it entirely on Apache Solr with custom-designed filters. Sprint-launched features were vetted throughout with students in usability studies searching for awards that applied to them.

23

UCLA Formats—universal form engine

A one-eighth cross-section of an experience flow I created for a student-submitted form at UCLA. Each column represents a different person reviewing a student’s form, and all steps and decisions that reviewer takes. I built three of these for our most complex forms, based on interviews across campus. This enabled us to see where multiple people did the same eligibility checks—thereby reducing their workload.
Now, instead of waiting 2 weeks-to-3 months to learn she’s ineligible, a student learns it immediately. If eligible, she only answers questions we don’t have in data. Because our platform does the eligibility check for faculty and staff, for each type of form we save between 300-to-450 hours of staff time a year.
Our round-trip system reduced time-to-review on the first form we launched from 2 weeks to 2 days.

42 Entertainment

Senior Interaction Designer, 2011–2013

22

Sony: The Amazing Spider-Man—alternate reality experience

I designed this experience flow for one of the Spider-Man viral kickoffs. Players follow online clues that lead to a torn labcoat in the real world. In the labcoat’s pocket is a medical slide containing lizard skin. Viewed under a microscope, a secret code appears. Players across the country must share and collaborate with others in order to unlock each next game in the campaign.
42 Entertainment’s experience design team created an alternate reality scavenger hunt for the new Spider-Man film. I led the prototype build and playtesting for this experience. I started by gathering lizard skin shedding, testing glass slides, testing print techniques, and finally manufacturing and leading usability testing of the final shipping medical slides.

21

42 Entertainment: mobile dice iOS game—design

I designed several rounds of wireframes for an iOS dice game. Initial game design and mechanics by Michael Borys.
I designed an iOS onboarding for the mobile dice game. Stills from the low-fidelity prototype.
I led meetings and consultation with a 4-person design team over the course of weeks, while documenting the experience flow for each player on a giant whiteboard. Overall game design led by Michael Borys.
After reaching the limits of our whiteboard, I designed the rest of the mobile dice game’s “experience flow” in Lucidchart. The logic is entirely boolean which helps both our experience designers and iOS developers. So as not to compromise IP, above is a cutaway of 1/30th of the game.

20

Wrigley’s 5 Gum: “Human Preservation Project”—alternate reality marketing campaign & game design

“We’ve just entered some alternate reality game that I don’t have time for!” Concept and experience design: Michael Borys. Experience design: Michael Borys & Perre DiCarlo. (Should automatically start at 6m:36s.)
Real world virals featuring the “Ice Fly” from the 5 Gum commercials led test subjects (players) to this countdown. On reaching 00:00:00:00:000, a gateway opened into the first 5 Gum test facility. I designed this gateway’s interactions, effects, and the Ice Fly’s 3D motion design.
42 Entertainment created five unique facilities. As gamers completed games in each facility, the Ice Fly led gamers to the next. I art directed our illustrator Robert Simons, then collaborated with experience designer Derek Thorn to oversee 3D design and development and matte painting of shots (CENTER, RIGHT).
Each facility contained custom vehicles to transport players through the facility or from one facility to the next. 3D film design overseen by experience designers Derek Thorn and Perre DiCarlo.
One of our 5 Gum facilities contained a unique spiral elevator that wrapped around the interior of a circular cavern. I art directed illustrator Robert Simons (LEFT) then teamed with experience designer Derek Thorn to oversee 3D video development of facility shots (CENTER, RIGHT). After choosing a floor from the interior of the elevator, players saw short video cutaways of its motion from outside (RIGHT).
Interior of the spiral elevator. Gamers chose destination by tapping a level on the red glass door. I art directed illustrator Robert Simons (LEFT, CENTER), and oversaw 3D design (RIGHT). The final panel (RIGHT) is a still from my interaction, lighting, and motion design as the spiral elevator ascended or descended.
Within each facility were 5 casual games and puzzles locked behind doors (LEFT, CENTER) that could only be accessed by solving clues in real-world scavenger hunts and within previous facilities. For nearly all mini-games, I designed effects, lighting, interactive elements, monitors, entryways, and in-game tools.
Initial wireframe & game concept by Michael Borys (LEFT). My motion design prototype (CENTER). Final game in 3D (RIGHT), for which I designed the interactions, lighting, motion, and engineered the game. Together, Derek Thorn and I oversaw 3D development.

ZEFR / MOVIECLIPS

Lead Interaction Designer, 2009–2010

19

MOVIECLIPS—player

The MOVIECLIPS player, in-site.
Competing video players at relied on raster icons, such that when scaled it would pixelate or blur their interfaces and buttons. I designed a set of all-vector icons to overcome this.
Two views of our lightweight, universal player. All interactive elements disappear during playback of Blazing Saddles (ABOVE) so you can focus on the clip, not the player. Player control buttons, a playbar, and movie details appear when hovering over or interacting with this scene from Glengarry Glen Ross (BELOW).

Warner Bros. Studios

Lead Interaction Designer, 2003–2006

18

Harry Potter—movie website/official brand website

I conceived of, designed, coded, and led 3D implementation of the Marauder’s Map for the official Harry Potter site.
On launch day, unique daily viewers jumped from 1.1 million to 7 million. By the film’s release we reached 12 million daily unique visitors. The Marauder’s Map was the first 3D-implemented feature for a popular website. Prior to 2004, 3D wasn’t used because it was expensive to create and the download time took minutes. This entire map was 392 kilobytes.
The Marauder’s Map walkthrough to different sections. 1.5 minute video. The Harry Potter and The Prisoner of Azkaban website became a 2005 Webby Award Honoree.

17

Batman—brand website

I designed interactions for the official Batman site. I created the 3D animations in Maya, and coded the frontend.

16

Hanna-Barbera | The Jetsons | The Flintstones—brand website

Behind the 1960’s most iconic cartoons stood Hanna-Barbera (creative team William Hanna and Joseph Barbera). Included in their creations were The Jetsons, The Flintstones, Scooby-Doo, and Tom & Jerry. In 2006, Warner Bros (parent to Hanna-Barbera) tasked the online division at Warner Bros. to create a single site that was themed differently whenever a viewer chose a different show. LEFT: Julie Fisher created layouts for each section, while I created transition animations reminiscent of each show a viewer picked next. The Jetsons section and all its elements zipped in. RIGHT: Whereas… The Flintstones tumbled in like heavy rocks.

15

Warner Independent Pictures: Criminal—movie website

Criminal was a 2004 crime-caper heist featuring John C Reilly, Diego Luna, and Maggie Gyllenhaal. LEFT: Animations (including hand grabbing the briefcase and the leaning guy chasing after it) was inspired by opening credits for The Pink Panther films. CENTRE & RIGHT: After seeing the Saul Bass-inspired poster design, I created layouts reminiscent of classic 1950s and 1960s crime caper films, posters.

14

Warner Bros. Studios—brand website

The Warner Bros. Studios website in Feb 2004. This is the first of two Warner Bros. websites I led interaction design for.
The clouds were a fun challenge. As seen at the outset of most Warner Bros films, the site featured peaceful clouds drifting gracefully across the sky. This caused older QA machines to slow. To resolve this, I wrote a script that, prior to loading the clouds, checked a visitor’s bandwidth and how many frames per second her browser could play video. If both were fast enough, we downloaded and rendered the clouds. All other cases, they saw a still image of clouds in the background.

13

Looney Tunes Back in Action—movie website

Looney Tunes was my first major movie website. My new art director Anette Hughes designed the initial layout (similar to what’s seen above). I designed all additional layouts and invented a side-to-side accordion to travel to each section.
At Anette’s and my direction, Warner Bros. Online Animation team provided animations for each section. LEFT: Tap the yellow section and Jenna Elfman’s character walks off. Brendan Fraser’s character follows her, then suddenly “pratt falls” off the screen. RIGHT: The three unchosen sections slide to the sides to become vertical navigation bars. Hovering over any of them shows that section’s character peek out from behind the vertical navigation bar.
LEFT: Choose the red section and the other sections all slide to the opposite side. RIGHT: This section featured inventions by the ACME company — notorious for rarely working as intended in the Roadrunner and Coyote cartoons. I designed these as parodies of iPod commercials with black silhouettes of Looney Tunes’ iconic characters against colorful backgrounds with the products featured in white.

12

Miss Congeniality 2: Armed & Fabulous—movie website

Miss Congeniality 2: Armed and Fabulous. There’s one magazine devoted to each of five characters. Previewing each magazine tells that character’s backstory with articles and photos. A fashionista character’s magazine is “Modern Beauty”, and a bodyguard’s magazine is “Tactical Weapons”. 8 spreads each x 5 magazines + 5 covers = 85 pages total.
Experience storyboard and descriptive walk-through for Miss Congeniality 2 website experience (LEFT). Live site (CENTRE & RIGHT). I had adapted an early, open source page-turning script to five magazines. To teach new visitors how it worked, the next page’s corner curled down a few times to indicate it was draggable.

11

Website Builder

Five sites build with the same Warner Bros. Website Builder: Chasing Liberty. A Home At The End Of The World. Gone With The Wind. Risky Business. TERMINATOR: The Sarah Connor Chronicles.

10

Warner Bros. Cartoon Collection—brand site

Warner Bros. continues to produce an enormous archive of cartoons. To promote them, designer Cindy Ann Bader and I as interaction designer—under the art direction of Julie Fisher—created a destination site for exploring the Warner Bros. Cartoon Collection.
On receiving the mockup from Cindy Ann, I suggested the entire site, made up of vector boxes, spin (transformer-like) into different sections. Here’s the mid-fidelity prototype I designed.

9

Must Love Dogs—viral screensavers

Screensavers to promote the Diane Lane-John Cusack film Must Love Dogs. Six months before the movie, a video of a cat licking a camera lens went viral on YouTube, so I suggested during an early pitch that we do that again, this time with different kinds of dogs (to appeal to a variety of dog owners), and this time as downloadable screensavers. In the first three weeks, the movie site saw 400,000 downloads of the screensavers. (The pug was most popular.) Over a decade later, these screensavers are still downloadable all over the web.

Chen Design Associates

Interactive Designer, 2000–2001

8

CDA—brand website

On choosing a different section, the nav repositioned itself and the chosen section animated in.

Freelance for Disney / NBC / HBO / 20th Century Fox / Alex Winter / Toyota / Comedy Central / Excite / DreamWorks / ABC

Interaction Design Lead, 2001–2018

7

Walt Disney Pictures: “TinkerBell”—movie website

For the new TinkerBell movie I created a magical site where large back-illuminated leaves hid and revealed fairies peeking in as you visited sections of the site. When a visitor tapped on anything in the site, TinkerBell appeared where the cursor was and tap her wand on the button you tapped. I created the looping TinkerBell animation from cutting out frames of her in the trailer.

6

Public Interest & The Gill Foundation: “Born Different”—viral campaign teaser site and full site

In 2006, Michael Berman — a colleague from my years at Warner Bros. — called to ask if I wanted to help create a viral site about a puppy named Norman who moos like a cow, rather than barks like a dog. I said “absolutely”. The teaser site (LEFT) showed a looping video of Norman who looked like he was sitting there live. When a visitor taps “click to moo” the dog tilted his head and bellowed out a moo. Norman was different from all the other dogs, and in commercials seen in Colorado, the adorable puppy is shunned whenever he moos. The campaign made the case that — like the colour of your eyes and how tall you are — people don’t choose to be gay, it’s how they are born. Research had shown that helping people understand this one crucial fact made them more likely to empathise with and support the rights of people different from themselves.

5

20th Century Fox: “The Princess Bride”—promotion site for the 20th anniversary remastered edition

For the 20th anniversary of The Princess Bride, 20th Century Fox released a new remastered version of the film featuring DVD packaging that could be themed either as Princess Buttercup or as the Dread Pirate Roberts. For it, they created a unique logo that could be read correctly rightside-up or upside-down. I designed The Princess Bride website, designed the interactions, and wrote all code for the site. Tapping “Choose Your Theme” spun the website and the logo upside down landing on a Buttercup-themed site or a Dread Pirate Roberts-themed site. Each site section played one of the film’s scenes featuring an iconic quote.

4

Alex Winter: brand site for director Alex Winter

Alex Winter—the director of Downloaded and co-star of the Bill & Ted’s series—hired me to design a mobile-first website to feature his directorial work in films, tv, and commercials, his acting work, and social feed. I built it in WordPress. At the top of each landing page a silent video of a scene from one of his pieces loops.

3

Miramax Films & Paramount Vantage: No Country for Old Men — movie website

The website for the Coen Bros film No Country for Old Men featured short, immersive, HD video clips from the trailer playing as transitions into new sections. In a cat-and-mouse storyline between sections, Tommy Lee Jones hunts down the haunting Javier Bardem as he hunts Josh Brolin. I designed the entire site, edited video clips, designed all interactions and animations, and coded it.

2

One Economy: 24-7 Townhall—digital platform

The nonprofit One Economy created a multimedia sharing website dedicated to providing kids from low-income families opportunities for self-espression. Mos Def provided a video overlay introduction to the site, onboarding kids by asking them “What’s the first thing you would do if you became President?”. Kids could upload videos, audio clips, and articles about their lives and things they cared about. The site’s editors provided writing and video editing tips. I designed the entire site, the icons, the writing tools and the drag-and-drop audio/video/photo uploading steps.

1

Visual Nomad: Visual Nomad—brand site

I first met Public Interest co-founder Doug Allenstein when he hired me years earlier to create the Born Different campaign’s website. We worked well together, and he asked me to design a new site for his new film and commercial production company Visual Nomad. Behind a password-protected section of the site, clients watch the work of individual commercial directors.

Perre

Perre DiCarlo’s experience design portfolio, featuring…

Perre

Perre DiCarlo’s experience design portfolio, featuring selected work from Harry Potter, UCLA, Movieclips, Warner Bros., Disney, NBC, Batman.

Perre DiCarlo

Written by

Author of 𝘒𝘪𝘤𝘬 𝘓𝘪𝘵𝘵𝘦𝘳 and co-author of 𝘛𝘩𝘦 𝘏𝘪𝘱𝘱𝘰𝘨𝘳𝘪𝘧𝘧 𝘊𝘰𝘰𝘬𝘣𝘰𝘰𝘬. @perredicarlo

Perre

Perre DiCarlo’s experience design portfolio, featuring selected work from Harry Potter, UCLA, Movieclips, Warner Bros., Disney, NBC, Batman.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store