WATCH THE SERIES HERE
PROJECT: Epic Night is a first-of-its-kind interactive branching narrative rom-com, the viewer is challenged to balance love and loyalty. Viewers make action and dialogue choices in real-time on behalf of MARTIN (Jacob Latimore) as he works up the courage to tell his 4-year crush, JESS (Jessica Sula), how he really feels and as he comforts his broken-hearted best friend (LILLIS, Karan Brar), all amid an epic quest to get into an exclusive music festival
ROLE: Directed interactivity and user experience, partnered with producers, the cinematic director, and edit teams to help realize their vision and tell the story with meaningful and clear interactivity that is fun and satisfying to viewers.
UX/UI:
frequency - The choice moments throughout the show appear in a frequency to designed to keep viewers leaning in.
style -The visual style of the UI evoking neon signs further advance the show’s theme of a memorable legendary all-nighter, and aligns with the lighting and cinematography.
animation - When a choice appears on the screen, it flashes on like an old neon sign warming up. This gives the viewer a heads up that a choice is appearing, and prepares them to react. The flashing also helps call attention to the choices as the user only has a limited amount of time before it will be chosen for them. On a desktop, if a choice is rolled over it will flicker madly in reaction. When a choice is made (or if it was chosen for you) the other option quickly fades off and the selected option lingers and burns brighter before it flickers out.
sound - Tapping a neon choice is paid off with a warm click and a buzzing neon tube sound.
font - While we experimented with many fonts, the clearest and cleanest san serif style was best for mobile viewing, and the glow was toned down a bit for legibility.
Flow illustrates where on the screen UI will be overlapping the video, how the choices enter, how the UI and Video react to the user making a choice.
Map of choice moments of all 4 episodes, callbacks that occur on certain paths based on previous choices, and the value system per choice.
Inspired by the festive, seedy, and alluring neon at night, and a compliment to the dark party like cinematography style that was planned for the shoot… we explored complex and simple ways to evoke the neon feeling and flickering animation through digital means.
The placement of binary and trinary choices remains in the same place in all choice moments within the show so viewers can react quicker and quickly understand what to expect. We had to make sure choices were not in the way of the player chrome or the subtitles, and had to account for this within the framing of the choice moment shot sequences during the shoot.
PROJECT: Nickelodeon’s digital presence started out as a desktop website, and expanded into a cohesive responsive mobile and tablet browser experience, iOS and Android apps, and on to Windows 8, Xbox, AppleTV, Roku, and Android TV applications; accounting for a family of 7 owned and operated apps and a responsive browser experience. This family shares content, images, branding and basic UI principles, which is important for brand integrity, cohesion, and an efficient workflow to add new content, games, polls, and TV show pages.
ROLE: Responsible for leading the team designing and executings the content, digital brand design, and products, providing visual design and user experience direction in the expansion to multiple app platforms, and providing strategy on future-proofing design assets for efficient maintenance and versatility. Additionally, oversaw comprehensive site redesigns in 2010 and 2014.
Spongebob Show page across platforms (Responsive web, iOS mobile and tablet, Android mobile and tablet, Apple TV, Roku, Android TV)
TV Schedule - Responsive Web
Branded icons across platforms at both the Nickelodeon channel level, and at the Property/IP level with Nickelodeon co-branding to keep channel affinity linked to the user’s favorite properties.
PROJECT: Over the course of the Game Shaker’s TV series, 6 games have been featured in the fiction of the show and then released in the real world on iOS & Android for fans to enjoy.
ROLE: Art Directed mobile app game key art, marketing, branding, splash screens, logos, icons and submission materials, for all Game Shakers apps. Worked with game producers, show management, illustrators and audience development teams to style, brand, submit and promote games for iOS and Android platforms.
Sky Whale also launched on Apple TV, and is periodically updated with holiday updates and additional themes.
PROJECT: In 2016, Nickelodeon launched it’s 8th Kids Pick the President cross-platform campaign, which is created to keep kids informed on the issues they care about and let their voices be heard. The campaign centered around the interactive digital space (responsive web, iOS and Android apps), and included on-air interstitial spots, an on-air special for the final kids vote results, marketing and social.
The fully interactive website was available for a month prior to the election, and encouraged visitors to weigh in on the election process and issues they care about reflected in real time via a heat map and word cloud, submit and view questions, and also included interactive personality quiz, meme creator, videos, and a candidate bio infographic. On November 5th, users were able to vote only once, and results were shared in a TV special airing from 8pm-9pm. Once kids voted, they were able to print or share an “I voted” sticker, which was shared, saved or printed by 81,000 users.
ROLE: Oversaw all digital design, Directed designers and Art Directors to create site and supporting promotions. Worked with in-house producers, programming team, and outside vendor.
STATS:
• 1.5M Word cloud submissions
• 245K Memes created
• 759k Quiz takers
• 1.4M Heat Map question submissions
• Almost 1 Million votes from unique visitors
• 1.7M Site visits in the one month span of the campaign
Users answered weekly questions that reflected on a US heat map, Submit questions, answer multiple choice word cloud questions, learn more about the candidates, watch related videos, take a quiz to find out what kind of president they would be, and create memes.
Each IP address could only vote once.
PROJECT: Kids’ Choice Sports is an annual kids fan focused live televised event honoring kids’ favorite sports heroes and the fun and play in sports.
The digital portion includes category voting to determine winners, lead up promotion to tune-in to the show, advertising, sweepstakes, and the second screen live event where 3 live vote moments determine what happens next in the show.
ROLE: Oversaw all digital design including voting and the live experience, worked with vendors and in-house designers, art directors, producers to create final digital experiences.
The category voting determines the winners of the live awards show and consists of 12 categories with 5 - 8 nominee options.
For this experience, our KPI was to increase the number of votes from previous years and to create interest in the live show. We set out to create a seamless experience that was clean, clear, fun and within the look and sprit of the on-air style guide.
Improvements from previous years included bright clear vote buttons, large images that were more dynamic when possible, a bar indicator letting users know how many more categories they have left to vote on that also included encouraging text when the user votes, a show countdown, and fun sports cheer sounds when a user votes.
In research we learned that users may not be interested in a category and rather then have them drop out of voting altogether, we added a skip button in order to keep them in the flow. This decision felt risky to some when our goal is increased voting, so we added ‘disappointed’ sounds to the skip button, like a missed catch or goal, to encourage them to vote next time. We also learned in research that over 12 categories becomes tiring to the kid user, so we limited the categories from 18 to 12 in order to better get users through the whole flow. The results were positive - voting was up 7% from the previous year despite less categories (voting numbers include each vote) and despite overall traffic being down and that the previous year’s voting had an extra week. Also unprecedented from previous years, more users opted to vote again - Users making it to the “thank you” end page of voting was up 66% from the previous year, and the vote again button clicks were up 86% from the previous year.
Voting progresses in an accordion style and users can go back and change votes, or vote on categories they have skipped. The bottom bar gives feedback on number of votes to go until the end.
On the day of show, the overlay encourages users from all entry points to the website to go to the second screen experience.
Content tiles consistant across browser and apps entice users to engage with content (videos, games, polls, voting etc.)
During the live show, we clipped video moments and the design team created on the fly content tiles to be put up immediately so users can see moments as soon as they happen. Directed team of 8 designers to create on the fly content during the live show night for immediate publishing.
Oversaw the Art Director and designers who created digital guidelines leveraging the existing on-air Kids’ Choice Sports guide in order to best represent digital content, align with on-air, and create unique appealing promotional tiles to draw users into content.
Designed multiple sizes and promotions for banner ads and other digital promotions, keeping a consistent look, feel and hierarchy.
Directed vendors to animate banners by creating boards.
PROJECT: The “Do Not Touch” button first launched with the Nick iOS app as a moment of delight and brand expression to randomly serve up quick, surprising, interruptive animations to users as they browse through Nickelodeon’s content. When clicked, one of 20 animations randomly plays right on top of the website or app. The bank of animations are updated weekly.
ROLE: Design direction, oversight of concepts and animations, creation and enforcement of style guide, collaborated with various platform specific agile teams to improve functionality and create consistency across platforms, worked with international teams to propagate this brand expression in over 20 regional websites. In 2017, redesigned the button look after 5 years to align with the Nickelodeon brand update.
PROJECT: In addition to the elaborate one-off vendor created games on the Nick sites and apps, new game engines were created with and for the design team to easily make multiple custom responsive browser based quizzes and games in order to fulfill the request to have new content weekly for each IP and/or special.
ROLE: Oversaw design and user experience on seven different browser-based game engines, instituted strategy for keeping each iteration distinct, operationalized and led the design team to efficiently create over 125 unique games and quizzes.
Worked with games team producers, QA, game vendors and programming team, directed designers.
Strategy and design direction of game type franchise logos, and individual lock up, overseeing all design execution.
Collaborated with Partner Marketing team to create a 3 tiered game sponsorship offering to create additional revenue for advertising within the games or using the engines as a standalone promotion for a sponsor.
GAME ENGINE PRODUCT SUMMERY:
Objective: Create game engines that allow for each property to have new weekly content at a low costs.
Strategy: Create engines that are simple and clear, have one simple function but can be made unique leveraging visually design, concept, and copy.
Make sure that the user experience was clean and clear and targeted to an audience of 6-11 year olds.
Create theme-able UI and other visual design elements, but also keep certain high level navigation consistent throughout all games.
Have a engine made that both designers and producers could use (CMS) at the same time to create unique games.
Action: Partnered with a vendor to create and adjust the engine as we tested it, and created games.
Result: In the first year, the team was able to create over 100 unique games and quizzes.
Game Franchise Logos
PROJECT: Building on the popular “Do Not Touch” Button found on the Nick site and apps, this AR app spawns a 3d button in the user’s surrounding physical space, and generates interactive surprises and mini games that highlight Nickelodeon IPs and iconic trademarks like SpongeBob SquarePants, The Loud House, slime and the Kids’ Choice Awards blimp, plus original animations.
ROLE: Provided design, animation and brand direction. Art directed the logo, submission materials. Managed visual designers, worked with product team, production, and game vendor.
PROJECT: The Kids’ Choice Awards is an annual live televised special that honors entertainers based on digital category voting from fans starting a month prior to the show.
The campaign leading up to the show included website and digital experiences, category voting leading up to the show, sweepstakes, e-blasts, promotional games, polls, promotional videos, social marketing, snapchat filters, off-channel digital ads, host announcement and bio, and advertising.
During the televised special, the second screen digital experience ramps up to live in-show votes that affect the show, live reporting on winners, meme creators, and trivia.
ROLE: Managed the creation and evolution of all stages of Nickelodeon’s awards show experiences on digital platforms, including category voting, marketing and the live show experience. Managed live show design support, directed vendors, oversaw all design for voting, sites, apps and marketing.
During the live show, viewers could use their phones, tablets and laptops to participate in live voting that affects the show, watch top video moments, view photos, and create memes. The look of the second screen experience needed to align with the show and brand guide, and also be intuitive and appealing to the kids and family audience. Additionally, designed images and content needed to be created and adjusted for last minute changes and reflect content that just happened live in the show.
Vote Masher: This dynamic type of voting has been traditionally very successful with kids as they have to repeatedly press on what they want to win within a short timeframe. This game-like quality and activeness required reflects their energy. The original product was modified by the design team under to be more clear and fun. We added larger pictures, scaled everything up, added various sound and animations to the button to encourage uses to keep pressing, and adjusted the layout to make the product easier to understand and use, including adding mobile / tablet and desktop specific image shapes in order to best use the space and make it look great across platforms.
Masher Vote - When time is up the vote closes and that is communicated to users and the winner is indicated.
Live Vote
Live Vote selected. Users can vote again as long as the voting is still open.
Photo and Video Stream
Meme Maker - User selected and image, and selects text. These are pre-written for standards purposes due to the kid audience. They can be submitted to a stream that others can view, or downloaded.
Meme Stream
Kids’ Choice Awards show page. All KCA content is collected here.
Post / During Show content tiles. These videos are all clipped and tile images are created on the fly for each, live during the show by the design team.
Home Page promotion and design
Giphy promotion
You Tube header
Twitter header and icon
Facebook header, icon and content for both official Nickelodeon and Kids’ Choice Awards accounts.
Images given to nominees’ talent teams to post on their own social accounts to encourage their fans to go to Nick.com to vote to win them a blimp.
PROJECT: Submission, promotion and launch of three Alexa Skills: “No Way Thats True” (Nick Branded Trivia) Spongebob Challenge (Krusty Krab order memory game) and Loud House Challenge (Quest and puzzle game) Available as part of the Amazon FreeTime Unlimited subscriptions, and on Echo Dot Kids Edition.
ROLE: Art Directed branded identity, logo and submission materials, including icons, welcome screens, companion screens, direction screens, and exit screens. Also oversaw creation of promotional materials.
