25 Product Designs

From UI to Interaction to User Experience Design

For fifteen+ years, I’ve helped solve customer experience and strategic design challenges for start-ups, higher education, and large international brands.
Below are twenty-five product highlights from clients including Warner Bros. Studios, 42 Entertainment, University of California Los Angeles, Chen Design Associates, MOVIECLIPS, Walt Disney Pictures, and 20th Century Fox.

UCLA

Lead User Experience Designer, 2013–2017

Strategic lead for a six-person product team. Led a mobile-first customer-centric redesign of a decade-old website. Designed a form submission and progress tracking system that reduces time-to-review from 2 weeks to 2 days, and depending on form, saves between 300-to-450 hours of staff time a year. Products: UX-researched & designed, agile, responsive, and mobile-first. Our efforts won the Council of Graduate Schools’ 2015 Innovation Award.

My detailed case study of our form submission, tracking, review, and notification system was published by The Mission, here: Escaping a Black Hole in Form Design.

1

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

  • My role: lead user experience (ux) design, team management, service design, interface design, graphic design, ux research, usability studies, card sort, data analysis, google analytics research & optimisation, copywriting.
  • Team: Chris Testa–head of technology. Perre DiCarlo–lead user experience designer. Van Nguyen–lead developer & data architect. Eli Levy–data architecture, content migration. Alex Weber–lead front end developer. Eric Manasca, Priya Thangaraju–developers. Colleen McCormick–ux researcher. Reid Johnson–project manager.
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.

2

Academic Funding Lookup—search engine

  • My role: lead user experience (ux) design, team management, service design, interface design, ux research, usability studies, google analytics research & optimisation.
  • Team: Chris Testa–head of technology. Perre DiCarlo–lead user experience designer. Eric Manasca–lead developer. Eli Levy–data architect, content migration. Alex Weber–front end developer. Priya Thangaraju & Van Nguyen–developer. Colleen McCormick–ux researcher. Reid Johnson–project manager.
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.

3

UCLA Formats—universal form engine

  • My role: lead user experience (ux) design, team management, service design, experience flow diagraming, ux research, graphic design, prototyping, usability studies.
  • Team: Chris Testa–head of technology. Perre DiCarlo–lead user experience designer. Michael Flaxman & Estrella Arciba–senior analysts and domain experts. Van Nguyen–lead developer & data architect. Alex Weber–lead front end developer. Eric Manasca & Priya Thangaraju–developers. Colleen McCormick–ux researcher. Reid Johnson–project manager.

UCLA’s Graduate Program recruited me to lead a six-person product team to design and deliver a digital platform to replace its legacy paper-based forms.

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.

94% of what people were doing when reviewing a student’s application was checking eligibility rules against computer data. We moved all that work into a single student-facing button: “Check your eligibility”.

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.

After submission, students, staff, and faculty can now see where the form is at all times.

Our round-trip system reduced time-to-review on the first form we launched from 2 weeks to 2 days.

The Mission published my full story on digitizing UCLA’s forms and creating an online review system, tracking system, and notification system:


42 Entertainment

Senior Interaction Designer, 2011–2013

Experience design for alternate reality marketing campaigns where fans participate in the fiction of a film or product. Designed, prototyped, conducted UX R+D and conducted usability studies on mobile & iOS games, websites, and scavenger hunts. On the Wrigley’s 5 Gum Survival Code campaign, my team won a 2012 Cannes Festival Silver Lion.

4

Sony: The Amazing Spider-Man—alternate reality experience

  • My role: lead user experience (ux) design, experience flow diagraming, prototyping, usability studies, play testing.
  • Team: Alex Lieu & Michael Borys–puppet masters/principal designers. Perre DiCarlo–senior interaction designer. Derek Thorn–senior experience designer. Jason Siadek–game designer.

Many alternate reality (AR) viral campaigns kick off with a real-world experience/scavenger hunt as seen in my illustrated experience walk-through below. In sum, online clues lead to a real-world scavenger hunt in major cities throughout the U.S. Players find the torn labcoat. Inspecting it, players discover a glass medical slide with a real lizard skin sample plus an ID badge of Doctor Connors of OSCORP—the experimental biotech firm in the world of Spider-Man. When players look closely or view the slide under a microscope, tiny printing reveals their next step.

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.

5

42 Entertainment: mobile dice iOS game—design

  • My role: lead user experience (ux) design, iOS-wireframing and onboarding design, prototyping, experience flow mapping, usability studies, play testing.
  • Team: Michael Borys–initial game design, concept lead. Perre DiCarlo–senior interaction designer. Derek Thorn–senior experience designer, additional game design, play testing. Jason Siadek–game designer, play testing. Hank Whitson–additional game mechanics and play testing.
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.

6

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

  • My role: lead interaction design, user experience (ux) design, usability studies, play testing, prototyping, co-management of 3D designers & illustrators, front-end development.
  • Team: Susan Bonds & Alex Lieu–creative direction. Michael Borys–head of interaction, concept lead. Derek Thorn–senior experience designer. Perre DiCarlo–senior interaction designer. Johnny Rodriguez–lead graphic designer. Jason Siadek–game designer. Robert Simons–illustrator. Joey Jones–head of 3D. Kevin Burkhardt–head of technology. Sarah Raasch, Sascha Linn–developers.

Our viral marketing campaign for 5 Gum won a Cannes Silver Lion.

The campaign started at two entry points in the real world: 1. at Bonaroo Music Festival with thousands of “ice flies” descending from the sky onto festival-goers, and 2. at Electronic Entertainment Expo (E3) where attendees found mysterious black envelopes around the building marked “confidential”.

“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

Designed the MOVIECLIPS video player enabling fans to share clips from their favorite films. Collaborated daily with the company’s founders and the heads of tech and operations. While the idea of responsive design was still in its infancy, we created a player that reconfigured itself based on where users embedded or viewed a clip. Our product became a 2011 TechCrunch Disrupt Finalist.

7

MOVIECLIPS—player

  • My role: lead interaction design, experience design, prototyping, co-concept, graphic & icon design, front-end development.
  • Team: Zach James & Rich Raddon–founders, co-concept, creative direction. Philip Southam–head of technology. Brandon Folkman–head of operations. Perre DiCarlo–senior interaction designer. Paul Yanez–developer.
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).

Prior to displaying itself, our MOVIECLIPS player reads the blog width, and within a fraction of a second, dynamically scales itself to the available width, adjusts the player’s height based on the aspect ratio of the film, and retains or drops buttons based on context. Below are two aspect ratio extremes, The Shining (1.33:1 almost square) and Mutiny on the Bounty (2.76:1 wide rectangle), embedded at four blog widths: 640px, 480px, 320px, and 200px. This solution prevented letterboxing (black bands at any edge), and we dynamically drop non-essential features as the player gets smaller.


Warner Bros. Studios

Lead Interaction Designer, 2003–2006

Designed interactions and interfaces for movie and entertainment properties including Harry Potter, Batman, Warner Bros.com, Warner Independent Pictures, and Hanna-Barbera.

Designed and engineered a best practices-based, easy-to-use website builder. It saved Warner Bros. 25 hours per site in what we rolled out as the underlying technology in over a hundred movie and tv sites.

8

Harry Potter—movie website/official brand website

  • My role: concept, lead interaction design, user interface design, prototyping, oversight of 3D animation, code.
  • Team: Perre DiCarlo–lead interaction designer. Blake McWhirter–lead graphic & brand designer. Anette Hughes–art direction. Matt Angorn–creative direction. Rachel Devine–lead developer. Byron Hudson–illustrator, animator. Jeff Jones–3D modeling & animation.
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.

The complete Marauder’s Map case study:

9

Batman—brand website

  • My role: lead interaction design, co-interface design, 3D transition animations, visual effects, front-end development.
  • Team: Dave Devine–lead graphic designer, interaction design, co-interface design, visual effects. Perre DiCarlo–lead interaction designer. Matt Angorn–creative direction. Lauren Gershman & Randy Lee–backend development.
I designed interactions for the official Batman site. I created the 3D animations in Maya, and coded the frontend.

10

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

  • My role: lead interaction design, interface design, transition animation, code.
  • Team: Perre DiCarlo–lead interaction designer. Julie Fisher–art direction, graphic design.
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.

11

Warner Independent Pictures: Criminal—movie website

  • My role: concept, lead interaction design, lead graphic design, interface design, transition animation, code.
  • Team: Perre DiCarlo–lead interaction and graphic designer. Anette Hughes–art direction.
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.

12

Warner Bros. Studios—brand website

  • My role: lead interaction design, interface design, code.
  • Team: Anette Hughes–art direction. Julie Fisher–lead graphic designer. Perre DiCarlo–lead interaction designer. Matt Neuenburg–lead developer.
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

  • My role: co-concept, graphic design, lead interaction design, interface design, transition animations, code.
  • Team: Perre DiCarlo–lead interaction and graphic designer. Anette Hughes–co-concept, initial graphic design, art direction. Steven Belfer–animation direction.
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.

14

Miss Congeniality 2: Armed & Fabulous—movie website

  • My role: co-concept, storyboarding, lead interaction design, interface design, experience design, transition animations, code.
  • Team: Anette Hughes–art direction. Cindy Ann Bader–lead graphic designer. Perre DiCarlo–lead interaction designer. Jennifer Wheaton, Byron Hudson, and Roy Shin–interactive elements.
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.

15

Website Builder

  • My role: website builder tool design and code, interface design, interaction design, development.

While designing and coding movie promotion sites at Warner Bros., I noticed that each time a designer or developer began creating a photo gallery or video gallery or navigation system for a new website, we’d start with a new, blank canvas in Flash. Since designers could only code a little, this process not only took lots of extra time, but it also limited designer’s creative freedom to only what they knew how to code so far.

I designed and engineered a best practices-based, easy-to-use website builder. It featured a navigation system, animations between sections, and the six typical sections we always built: photo gallery, trailer (videos) page, cast & crew page, downloads, synopsis, landing page.

Want to create a photo gallery? Just add thumbnails and photos named 1.jpg, 2.jpg etc to the thumbs and photos folders, and the website builder counted them up, and created a photo gallery for you with a smart navigation.

The website builder saved Warner Bros. 25 hours per site in what we rolled out as the underlying technology in over a hundred movie, television, and DVD sites.

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.

16

Warner Bros. Cartoon Collection—brand site

  • My role: prototype, 3D design, interface design, interaction design, development.
  • Team: Perre DiCarlo–lead interaction designer. Cindy Ann Bader–lead designer. Julie Fisher–art direction.
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.

17

Must Love Dogs—viral screensavers

  • My role: concept.
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

Chen Design Associates ranks among the most prestigious graphic design and brand strategy firms in the U.S. In their 25 years, they’ve won several hundred awards for print and digital design, identity, illustration, typography, packaging, and book design.

For CDA’s first self-branded website, I created the interface, architecture, transitions and animations. Implemented designs and art direction by Chen Design’s founder and team of visual designers.

18

CDA—brand website

  • My role: prototype animations, interactive design, interface design, development.
  • Team: Josh Chen–creative director. Max Spector–principal design. Perre DiCarlo–interactive designer. Kathryn Hoffman, Leon Yu, Lorraine Woo–additional design.
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

Woven between work for the companies above, I took on freelance/contract roles—mostly as creative and technical lead on movie and television sites for Disney, NBC, HBO, 20th Century Fox, and Comedy Central.

19

Walt Disney Pictures: “TinkerBell”—movie website

  • My role: concept, art direction, graphic design, interaction design, development.
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.

20

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

  • My role: interaction design, development.
  • Team: Doug Allenstein & Michael Franzini–creative direction. Eli Kagan–graphic designer. Perre DiCarlo–lead interaction designer. Christopher Hertz & Michael Berman–project management.
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.

21

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

  • My role: concept, art direction, graphic design, interaction design, development.
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.

22

Trouper Productions: destination site for director Alex Winter

  • My role: co-concept, art direction, user experience (ux) design, graphic design, interaction design, copywriting, WordPress development.
  • Team: Alex Winter-co-concept, creative direction. Perre DiCarlo–lead interaction and graphic designer.
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.

23

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

  • My role: concept, graphic design, interaction design, development.
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.

24

One Economy: 24-7 Townhall—digital platform

  • My role: art direction, graphic design, user experience (ux) design, interaction design.
  • Team: Mohammed Bilal–creative director at One Economy. Perre DiCarlo–lead interaction and graphic designer. Open Sourcery –Drupal development.
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.

25

Visual Nomad: Visual Nomad—brand site

  • My role: art direction, user experience (ux) design, graphic design, interaction design, development.
  • Team: Doug Allenstein–concept, creative direction. Perre DiCarlo–lead interaction and graphic designer.
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.
Like what you read? Give Perre DiCarlo a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.