An Idea-killing Site Takeover
Create a call-for-entries site that embodies the creative concept for the 2017 Andy Awards.
01: Challenge
- Take over the existing ANDYs site and create an engaging experience that is true to the creative concept.
- Increase contest submissions.
- Ensure accessibility across all platforms.
- Design the site to be multi-phased and adaptable as rounds of content become available.
02: Approach
- Evaluated the creative concept and pre-existing executions in order to ideate around digital experiences.
- Collaborated with the creative team to pitch ideas to internal and client teams.
- Crafted a one-page approach in order to create a compelling narrative.
- Worked in tandem with my designer and developer partners to build unique UX and design executions.
03: Outcome
- Produced an interactive experience with a compelling story.
- Designed a solution that was accessible across platforms.
- Received press from various trade publications.
Narrative
The creative concept for the 2017 ANDY Awards was a PSA-style campaign called, “Save the Ideas,” wherein creative concepts were represented as cute little creatures that were constantly getting killed by your standard fare ad industry reason: bitter senior creatives, budget cuts, the client’s spouse, etc.
The approach was fun and self-aware, so we wanted to make sure the website felt the same. During a creative workshop, someone’s light bulb switched on and she or he suggested, “What if we make a site that kills ideas as you interact with it? A digital gauntlet for creative concepts…” Then everyone’s light bulb switched on and we knew we had something.
It’s a rare thing when an ECD tasks you to come up with ideas for how a user can kill a cute and colorful symbol of a creative idea, but that’s exactly what happened. We came up with a brutal list of colorful murder methods, picked our favorites, then I set off to design how they would all work on the site.
I started by collaborating with the copywriter on the project and outlining a narrative and general information architecture for what we agreed should be a one-page experience. From there I started to define how the various “killing scenes” would work and assigned user interactions to trigger the events on the page.
What we ended up with was a smooth, responsive site that was fun to interact with as different scenes showed ideas being killed in ridiculous ways. If you, gracious reader, happen to be a creative director, client, or focus group participant, I implore you to please, be kind, and Save the Ideas.
Press coverage: The Drum, Creativity-Online, LBB, Campaign Live
Website
Design Decisions
- Big Card Scroll: I chose to use a full viewport, “big card scroll” approach to the site rather than the traditional parallax scroll because in order for the transitions, or “killing events,” to have any impact on the user, the timing of the animations had to be pre-defined. Otherwise, the shock of the animations would fall flat and there would be less tension and surprise for the user.
- Persistent Navigation: Due to the big card scroll approach, the site isn’t quickly scrollable for any return or rushed users. For this reason, I made the navigation persistent throughout the desktop experience so that users could quickly jump from one section to the other and bypass the animations.
- Persistent CTA: One of our main KPIs was to increase submissions to the competition, so I made sure that the primary CTA, “Enter Now,” was always accessible.
- Judges Profile Module: I decided on a popover module rather than a separate page because I felt that a popover allowed users to remain in the narrative of the landing page rather than be taken to a separate page. The user has two navigation options for the judges profiles: one by one navigation or group by group navigation. This allows for the user to navigate a large number of profiles quickly without having to close and reopen the popover.
- Sticky Mobile CTA: On mobile, I wanted to design for thumbs and ensure that the primary CTA, “Learn More,” was comfortably accessible at all times for both left- and right-handed users. For this reason, I placed it at the bottom of the viewport and made it sticky throughout the mobile experience.
Documentation
Squad: Deutsch NY
Michael Mitzman
Designer
www.michaelmitzman.com
Fanny Josefsson
Copywriter
www.fannyjosefsson.com
Ilana Wolstein
Art Director
www.ilanawolstein.com
Frank Cartagena
Creative Director
www.frankcartagena.com
Sam Shepherd
Creative Director
www.samshep.com
Menno Kluin
Executive Creative Director
www.linkedin.com/mennokluin
Pete Johnson
Executive Creative Director
www.linkedin.com/pete-johnson
Alden Davis
Project Manager
www.linkedin.com/aldendavis
Meg Ryan
Senior Digital Producer
www.linkedin.com/megryan
Ryan Moylan
Developer
www.linkedin.com/ryan-moylan
Matthew Severin
Motion Designer
www.matthewseverin.com
Kory Rozich
UX Designer
My Role
- Assisted in concepting for site ideas.
- Collaborated with the creative team on murder methodology.
- Created a 3-phase UX approach for the site design.
- Was the lead for all UX deliverables (sketches, wireframes, & func spec).
- Worked iteratively alongside the designer and developer on the project.