Demospree 2023 Motion Brand & Stream Kit

I was contacted by the event producer behind Demospree, an annual Twitch marathon where popular gaming personalities (“streamers”) try out demos of unreleased indie games.

The client was looking to differentiate the Demospree brand from its competitors, and had already designed a new static logo and a few other brand assets. They asked me for a set of animated elements to be used in promotions and during the event, as well as three interstitial videos to be played during the event. Each of those elements is described below.

Animated Logo Bug

To align with my client on how their brand should look and feel in motion, I started by creating a logo-reveal animation. We went through a few rounds of revisions, and I then adapted the animation into a bug that could be laid over the live event stream. The bug is designed to undraw and redraw itself at regular intervals, reminding viewers of its presence and allowing the client to intersperse a different graphic (such as a sponsor logo or a call to action).

Countdown Timer

The format of the event requires each streamer to switch games every twenty minutes. To make this less jarring to viewers, they requested a branded countdown timer that could be overlaid on the stream. The client initially approved sketches for a mechanical timer inspired by retro clocks and counters:

On testing the above design, we agreed that it stole too much focus from the content of the stream and didn’t adapt well to a variety of backdrops. I submitted another round of thumbnails, and this time we agreed to go with a simpler design:

Mascot Character

Demospree features a parade of different hosts tossing to one another, but there’s no host for the overall marathon. To emphasize key information and provide a sense of consistency, the client asked me to animate a character to serve as host and mascot for the brand. Budget was tight at this point, so I suggested we come up with a character design to minimize the complexity of the animations. The client considered this and came back with the below sketch:

Initial sketch provided by client

I love this kind of designer-client collaboration. Aside from the simplicity of the character itself, the flat look allowed me to further simplify my animation process by using a combination of 2D and 3D elements in After Effects. The computer case and monitor exist in 3D space, while the monitor arm comprises two tapered 2D lines connected by a null object that I can reposition in 2D space. This allowed me to produce multiple animations at minimal expense, with a very quick turn-around.

The mascot was used in social media posts and a promotional video cut by the client, as well as in the interstitial videos below.

Interstitial Videos

The client requested a series of short videos that each participating streamer was instructed to play during at specific points during their segment of the marathon. In addition to the logo reveal and mascot animations, these include an original game-inspired animation pattern for revealing text.

The client had already selected and licensed the music tracks. The track for the first and third videos included a long intro, which I shortened using Adobe Audition.

The first interstitial introduces the event and its format, and provides padding in case a streamer isn’t ready to start.

The second interstitial provides basic framing for a promo video, which was provided by the sponsor along with the music track.

The third interstitial repeats the sponsor’s call to action and presents one from the event producer.

Asset delivery and Follow-Through

To work around technical and staffing limitations, Demospree’s producer relied on each participating streamer to display the graphics and interstitials directly on their own stream. The cost of this hands-off approach was a high risk of human error and inconsistency.

To help mitigate these risks, I tested each asset in OBS Studio, which is an industry-standard streaming tool that the majority of the streamers would be using. I then produced a scene template for OBS Studio to make it easier for them to include the bug and timer assets in their streams, and I wrote up instructions both for importing the template and for recreating the layout by hand.

I tuned in for a few hours of the ten-hour marathon, and took notes. At least a few streamers told the producer they’d found my template helpful but, despite contract stipulations, several of them apparently removed one or more of the provided assets, skipped over the interstitial videos, and/or played them in the wrong order. One example can be seen below.

After the event, I checked in with the producer and offered a list of suggestions for reducing these issues in next year’s event. They had some ideas of their own, and I look forward to seeing the results!

Branded Instagram Filters (Spark AR effects)

OBJECTIVES 

On two separate occasions, Streem needed a playful gift to celebrate milestones: one for a favorite customer (a popular manufacturer of wood-pellet grills) and another for Streem’s own employees celebrating the winter holidays.

We had a standing secondary goal of demonstrating knowledge and credibility in the broader field of XR technology in which Streem operates, and these projects provided a perfect opportunity to explore a neighboring technology. 

PROCESS

The customer-facing project came first, and the employee-facing one followed a very similar process. I’ll focus my account on the first project.

I participated in a short series of workshops with our Marketing UX Director and a fellow visual designer to brainstorm an appropriate gift, and we settled on a physical gift basket to be accompanied by an interactive camera experience powered by Instagram. Recipients of the physical package would access the digital experience by scanning a QR code from the included card. I was tasked with creating the effect, while other team members designed and assembled the tangible gifts. I came to a second workshop with a sketch and pitch, expressing the interactivity and motion I had in mind. After getting input from my teammates, I jumped right into production.

I’d previously experimented with Spark Studio and its competitor, Snap Studio, but I learned a lot of new skills on the fly by referencing documentation and consulting experts within my network. Some of the skills these two projects taught me:

  • Configuring particle systems to create the smoke and snowflake effects. 

  • Mapping 3D objects to a user’s face in a live video image

  • Optimizing and placing 2D animations as textures on 3D objects

  • Creating HDR textures for an environment map that a bright and crisp reflection of Streem’s logo on the user’s virtual sunglasses

  • Detecting the presence of a particular image on a printed card when it’s held up to the camera, and triggering an alternate experience in response

  • Interactively applying color transformations to a live camera feed using multiple color lookup tables

  • Dynamically controlling sound effects in response to a user’s gestures. 

  • Optimizing the experience to work on a wide range of devices and within the technical limitations imposed by the Spark AR platform

After producing a functioning prototype, I went a few rounds with my teammates and used their feedback to refine and enhance the experience before publishing it and generating the QR code for the gift card. 

DELIVERABLES

Each of the below effects can be accessed using a provided link or QR code on a mobile device, and automatically opens in the Instagram app.

Designed to celebrate a milestone in Streem’s relationship with their most active customer, this effect includes responsive sound, particle effects, and an animation mapped to the inside of the user’s mouth (I used a sphere with inverted normals)

Winter Wonderland

As part of an overall winter greeting package for Streem employees, this filter added an element of discovery by hinting users to flip to their rear camera and aim it at the companion card. When the card was recognized, it triggered a secondary effect in which the user was virtually transported into the scene from the card’s illustration.

Included as part of a winter greeting package for Streem employees, this effect includes a particle system and a secret trigger that changes the background image when the user holds up the physical greeting card that led them to the effect.

OUTCOMES

Our customer’s leadership team was impressed and excited by the first effect, and internal feedback within Streem was equally enthusiastic — as evidenced by the demand for a second effect when the holidays came around.

"The AR Minute" motion brand kit

Objective

Streem was working on a lightly branded web series wherein charismatic host Nathan C Bowser interviewed thought leaders in the field of augmented reality. The hope was that The AR Minute would draw its own audience, which would increase Streem’s profile and lead to future sales opportunities. To keep the budget low and make it easier to connect with experts across the XR field, the series would be shot in a loose DIY style — at conferences and expositions or over Zoom. I was asked to provide an original branded motion graphics kit, to be used by an editor working in Adobe Premiere Pro, which would complement that indie production style and accommodate a wide variety of footage formats.

Process

After a brief ideation phase, we agreed on a direction that used sketchy lines and a glowy backdrop — both constantly in motion to reflect Nathan’s contagious enthusiasm and the ever-changing XR landscape. Paired with a modern and energetic music bed that runs throughout each short interview, the kit fits in well with the candid interview style.

Once I had a rough useable template, I used it to personally edit the first two episodes of the series, giving myself an opportunity to refine the kit before handing it off to our contract editor, Rachel . I made additional refinements as the editor worked and provided further input to improve flexibility and polish. 

An early extra-short “teaser” episode, edited by me personally to test and refine my template

An episode being edited in Premiere Pro. The Essential Graphics panel on the right, whose contents are set up by the Motion Graphics template I provided, lets the editor modify key parameters such as the content and positioning of the lower-third elements, without leaving Premiere.

DELIVERABLES

I built the cards, bumpers, lower thirds, and captions in After Effects and generated a series of Motion Graphics Template (.mogrt) files that could be placed into a Premiere project when editing the final episodes. These allow the editor to control a robust set of parameters such as text, position, angle, color, and callout arrows without needing to edit the animations in After Effects. 

I also supervised the editing process, so I was able to make quick revisions to the templates as new needs arose. For some needs, such as a series of bullet points that appear in time with the associated lines, it was quicker for me to create a custom asset and send it to the editor rather than enable her to

Reception

At the time of this writing, my kit has been used to produce 25 episodes of The AR Minute. They’re currently published in the Vlog section of Streem’s YouTube channel, and under the two playlists linked below.

The videos have drawn attention and started conversations with leading thinkers and prospective customers in the field of XR. When I left Streem, those new connections had already begun leading to new interview prospects and increased awareness of Streem as a player in the field.

Lowe's "Measure Your Space" demo

OBJECTIVES

I was asked to produce a video demonstrating a new feature of the Lowe’s app for the purpose of raising awareness and familiarity with the feature among the Lowe’s leadership and sales teams. The Lowe’s team provided raw footage from a demo of the feature, and all of the on-screen copy.

PROCESS

Before starting this project, I requested Lowe’s brand guidelines and followed them as closely as possible throughout. I also studied their existing work, both in video and other media, and incorporated my understanding of their brand. 

The team at Lowe’s was highly engaged and opinionated, and some stakeholders weren’t looped in until late in the process — resulting in last-minute changes. I worked closely with them to refine that feedback, working to understand their underlying goals and recommending compromises to make sure I could finish the work on schedule. I also worked some late nights to give them as much of what they wanted as possible.

This experience taught me to be more thorough in identifying each project’s stakeholders and pushing to include them in review cycles – as well as setting detailed and specific milestones for feedback so it can be addressed without impacting the timeline. Client input is extremely valuable to me, so I always try to get it early enough to be implemented!

Deliverables

In the end, I provided the Lowe’s team with a quality brand-aligned video that followed their established brand guidelines.

OUTCOMES

After the new experience launched, my video was repurposed as a customer-facing instructional demo and placed on a public-facing page of the Lowe’s website. An updated version was submitted to the Augmented World Expo awards committee for their consideration. Lowe’s received the Auggie award for Best Consumer app based on the content of this video.

Streem insurance ad

OBJECTIVES

Streem’s Business Development team identified an opportunity to serve companies in the insurance industry, though our competitors were already doing so and had case studies to prove their value proposition. To make up for that lead and show these customers that Streem understands and prioritizes their needs, we decided to produce a targeted ad on a shoestring budget and a one-month timeline. Content marketer Danette Beal had already researched the insurance industry’s pain points and identified a tone and message that would speak to them. 

PROCESS

I hewed closely to Danette’s script, but she approved some light edits for pacing and flow. I collaborated with her and our head of brand UX to select a soundtrack and voice actor (Lauren Modica, who would later become my wife!).

I then broke the script into beats, and collaborated with our head of Marketing UX to select imagery and sound effects. To streamline that process, I set up a storyboard template in Figma where we could place thumbnails representing candidate video clips to go with each beat. Once we had enough options for each shot, we moved our favorites to the top and I got to work editing the video.

For the below shot, I repurposed footage from a previous video where an actor aims his phone at a wall-mounted media controller. I used After Effects to mask out the controller and replaced it with a stock photo of water damage — rotoscoping the actor’s hand so it wouldn’t be masked. Then I isolated the phone screen and applied the effect to its view, updating the phone UI while I was at it. Lastly, I cropped in for visibility and color-graded the shot to better harmonize with the rest of the video.

DELIVERABLES

The finished video is the most ambitious and emotive of my projects with Streem. From sound effects and voiceover to storyboard edits and script refinement, the piece feels sincere and knowledgeable, and you’d never know it was made in one month using only archive and stock footage.

OUTCOMES

The style process and production value of this video set a new standard for video marketing at Streem. Although my time at Streem ended before I could follow up on it, there were plans in place to produce a series of similar videos targeting Streem’s other key target markets. 

Streem winter greeting - illustration and AR experience

In the winter of 2021, Streem sent out a greeting card to thank its employees for their hard work. To decorate the card, I painted a cozy scene riddled with Streem inside jokes.

Team members were challenged to name all twenty easter eggs — which included running jokes, emoticons, product icons, slogans, team mascots, the founders’ favorite cocktail, and more.

The back of the card (designed by my teammate) contained a message from Streem’s then-CEO. Scanning the included QR code activated a custom Instagram filter that I designed and developed.

While using the Instagram filter, aiming the camera back at the card activated a secret second effect hidden within the first one.

As a final added bonus, I made a simple annotated timelapse video to share the production process with the team.

Best Buy Road Virtual Store Preview

OBJECTIVES

Streem was developing a new feature package for the Best Buy app, which would allow customers to shop in a virtual 3D environment with guidance from live sales reps. To refresh support and enthusiasm within Best Buy’s leadership, Streem project leaders tasked me and the project’s lead UX designer with creating a compelling and informative previsualization of the work-in-progress experience.

PROCESS

UX Designer Nicole Guernsey provided a loose beat-by-beat storyboard, built from her existing Figma designs. Kami Karras, a creative technologist on loan from Streem’s engineering team, chipped in 3D Animations for key segments. I selected a soundtrack, synced the assets to it, animated a faithful representation of the planned user experience, and added expressive animated text to narrate the user journey and extoll product benefits.

The project was executed on a rushed timeline, taking less than a week from start to finish. It required close teamwork, last-minute pivots, and careful negotiation with our esteemed stakeholders at Best Buy.

While the 3D assets were still pending, and not knowing whether they’d be preferred by the Best Buy team, I produced an alternate draft cut using 2D assets. Thankfully, the 3D assets worked great and we never needed this backup cut.

DELIVERABLES

At the end of the project we presented the video featured below to Best Buy’s top brass and encouraged them to distribute it within their teams.

OUTCOME

The video was distributed internally within Best Buy, who remained excited enough about the planned experience to fund its completion. After the new experience launched, Best Buy requested a new video to help their staff and customers learn and understand it. That public-facing video was simpler and more utilitarian than the above, so I’m not including it in my portfolio but I’d be happy to share it by request.

Streem feature spotlights

Streem’s 3D Arrow tool allows an expert to place a marker at a fixed position in their customer’s environment. This is difficult to visualize using 2D animation, and a quality video shoot wasn’t possible within our timeline and budget. As an experiment to solve those problems, I created the below animation using Blender.

The window frame was a stock model, whose materials I customized to create a minimalist rendering style that works seamlessly on a white background. The arrow model, which I originally modeled, is the same one used in the Streem product.

Streem loading spinner

Objective
A simple animation, reflecting Streem’s branded style, indicating activity and keeping the user company for up to a few seconds while content is loaded.

Design reasoning

Simple shapes, rounded corners, and capsule shapes are established elements in Streem’s welcoming brand style. By setting the two arcs to expand and contract as they rotate in opposite directions, I created a balance of order and complexity that holds the user’s attention without distracting them from their original intent.

Deliverables
The animation is designed to be compatible with Lottie, a vector animation library developed by Airbnb Design, allowing it to be exported as a 3-kilobyte Json file and played back at an unlimited resolution and frame rate — within a desktop or mobile app, or in any browser — as seen above.

Reception
The animation is used in Streem’s mobile applications — sometimes embedded inside a button as shown below.

Example of the spinner animation in use on the Streem iPad app

3D arrow model & visualization

Streem’s 3D Arrow tool allows a remote expert to place a marker at a fixed position in their customer’s environment. The original arrow model was built in Streem’s early development stages, by an engineer using Sketchup.

Using Blender, I modeled a new asset to better fit with Streem’s welcoming user experience.

Before

After

To quickly express the way 3D arrows are positioned in AR space, I later created the below animation using Blender.

The window frame was taken from a stock model. I customized the materials, lighting, and render settings to create a clean look that works seamlessly on a white background — then added a looping animation to show how the arrow acts when the user moves their camera.

In the end, I found that live-action video is more effective for demonstrating AR interactions — but this project taught me a lot, and I’ve used it as an example of how 3D can fit into Streem’s minimalist brand.

Streem animated logo

Objective
To add weight and expressiveness to Streem’s established mark when it appears in video and interactive media, I developed this animated version using Adobe After Effects.

Design reasoning
I took inspiration from the wash-like gradients in the static mark, which I allowed to flow and bleed as if freshly-laid watercolor. The mesh pattern evokes the Streem platform’s ability to build 3D maps of a user’s environment, transparently providing insight to the remote expert assisting them.

Deliverables
Besides being available as a video asset, the animation is designed to be compatible with Lottie, a vector animation library developed by Airbnb Design, allowing it to be exported to a 10-kilobyte Json file and played back at any resolution within a desktop or mobile app, or in any browser — as seen above.

It’s available in linear and looping forms; with and without the mesh backdrop; as a horizontal lockup with Streem’s wordmark; and in white for use on dark or complex backgrounds.

Reception
Streem has implemented the animated logo in all their products, and it appears in numerous videos — including those used by corporate partners like Best Buy and Lowe’s. See below for a few example applications.

Concept animations: Focus Quest

A gamified timer challenges players to work on their homework, novel, art practice, or whatever else they’ve been procrastinating on. Every 20 minutes of complete focus earns you a break — plus experience points, loot, and torches that add a modicum of flexibility to Francesco Cirillo’s much-loved Pomodoro Technique.

Evil Apples

A social game for mobile phones and tablets running iOS and Android.

Client: Evil Studios Limited

"As an illustrator, Pete's creativity always shines; it’s rare that he won’t bring a new idea to the table for us to consider. Add to that a strong sense of usability + efficient use of billed hours, and what results is a great finished piece at a fair price, always. He has a wide range of tools skills, and all-in-all he has hit the ground running for us, and never stopped."

—Sean Conrad, co-founder, Evil Studios Limited
  • Prepared in-game icons (some from scratch, others using stock imagery) to represent purchasable word packs
  • Produced original promo graphics to celebrate the release of each new pack.

Produced an icon and scrolling backdrop for a new "Survivor" game mode featuring a limited supply of cards.

Game mode selection modal
Scrolling backdrop

Evil Minds

A party game for mobile phones and tablets running iOS and Android.

Client: Evil Studios Limited

"As an illustrator, Pete's creativity always shines; it’s rare that he won’t bring a new idea to the table for us to consider. Add to that a strong sense of usability + efficient use of billed hours, and what results is a great finished piece at a fair price, always. He has a wide range of tools skills, and all-in-all he has hit the ground running for us, and never stopped."

—Sean Conrad, co-founder, Evil Studios Limited

Contributed a series of illustrations demonstrating gameplay. Adapted them for use in app icons, interface elements, app store preview images, and online advertising.

Rite of Harvest

A retro-inspired dodging and shooting game for Mac OS X and Windows, where players tunnel through the earth and fight huge Miyazaki-inspired monsters. Produced in about 48 hours for Global Game Jam, January 2016.

Contributed: backgrounds, animation, game design, art direction, and story. 
Additional art by Rex Waters
Programming by Dylan Bennett
Sound and music by Amos “ToyTree” Roddy
Additional game design by Corey Warning (and by all other team members)

The Case of the Mysterious Maulings

A dialogue-driven mystery game for desktop and mobile browsers, where an obvious murderer must convince characters to suspect each other instead. Produced in a few days during and following Ludum Dare 33, 2015.

Contributed: all art, ambient sounds, and some story and game design. 
Programming by Benjamin Hanken.
Characters and dialogue by Emily Madly.
Music and sound effects by Joel Merriman.