SPIN MASTER VIDEO WALL

ROLE

Product & Motion Designer

YEAR

2018

Spin Master wanted to create a “WOW” moment for their new Toronto headquarters, which would captivate and leave a memorable impression for those visiting the office. The team and I brainstormed and presented various ideas with different execution levels and scopes to the company founders. However, our concept for an interactive video wall would not be beaten. After a few iterations to refine the objectives, some video and interaction animations, and prototyping, we changed what was seen as a risk by the founders into a fully funded and backed initiative. 

We created a small, versatile crew to bring the project to life, and partnered with Globacore to develop the software. As the creative lead, I began crafting the interaction design and user experience (UX) while incorporating the evolving Spin Master style into the UI. I also created motion graphics and animations with the team.

SPIN MASTER VIDEO WALL

ROLE

Product & Motion Designer

YEAR

2018

Spin Master wanted to create a “WOW” moment for their new Toronto headquarters, which would captivate and leave a memorable impression for those visiting the office. The team and I brainstormed and presented various ideas with different execution levels and scopes to the company founders. However, our concept for an interactive video wall would not be beaten. After a few iterations to refine the objectives, some video and interaction animations, and prototyping, we changed what was seen as a risk by the founders into a fully funded and backed initiative.

We created a small, versatile crew to bring the project to life, and partnered with Globacore to develop the software. As the creative lead, I began crafting the interaction design and user experience (UX) while incorporating the evolving Spin Master style into the UI. I also created motion graphics and animations with the team.

Video Wall Interaction

To create an engaging and memorable experience, we first identified our Spin Master user – the visitor. We knew each user would interact or use the tool in their own unique way: new visitors, existing employees, investors and inventors, and children. To keep things focused and user-friendly, the Interactive Wall flow can be broken down into three main modes: WOW, Entice, and Explore Mode.

Video Wall Interaction

To create an engaging and memorable experience, we first identified our Spin Master user – the visitor. We knew each user would interact or use the tool in their own unique way: new visitors, existing employees, investors and inventors, and children. To keep things focused and user-friendly, the Interactive Wall flow can be broken down into three main modes: WOW, Entice, and Explore Mode.

1) Visual Style / Design System

Championing the new visual style of Spin Master in previous projects with the Digital Creative Director, I incorporated and added to the growing Spin brand. I tested and created numerous new elements and styles – including fonts and video/photo treatments while receiving approvals from the founders (Big 3). These newly created visual elements added to the Spin Master creative ecosystem (e-comm, digital signage, and internal collateral).

Visual Style / Design System

Championing the new visual style of Spin Master in previous projects with the Digital Creative Director, I incorporated and added to the growing Spin brand. I tested and created numerous new elements and styles – including fonts and video/photo treatments while receiving approvals from the founders (Big 3). These newly created visual elements added to the Spin Master creative ecosystem (e-comm, digital signage, and internal collateral).

Spin Master Colour Palette

Visual Card System

While crafting the user experience, we uncovered a few limitations in the software scope. Our first limitation was on our forms of media and how to quickly identify them. To rectify this issue, I incorporated and templated our social icons and their primary brand colour into the thumbnail visuals.

WOW Mode

To continuously show motion, drive engagement, and hype, a sequence of looping video clips play when no one interacts with the Video Wall. The video content ranges from television commercials (TVC), app highlights, toy reviews, PR events, and more. Once a user/visitor approaches the wall/screens, Entice Mode is activated, stopping the content’s loop.

WOW Mode

To continuously show motion, drive engagement, and hype, a sequence of looping video clips play when no one interacts with the Video Wall. The video content ranges from television commercials (TVC), app highlights, toy reviews, PR events, and more. Once a user/visitor approaches the wall/screens, Entice Mode is activated, stopping the content’s loop.

Entice Mode

Entice Mode consists of a 4-step video process: the intro, outro videos, touch indicator, and background vignette. Entice Mode is activated as a user/visitor approaches the wall/screens. The intro video provides a CTA to engage with the wall and how (ex: Touch the screen). Once triggered, the touch indicator video/animation takes place in full-screen, signaling to the user that their action has been read. Once the touch animation ends, the outro video automatically kicks in, revealing the background vignette and leading the users into Explore Mode with our main navigation.

Entice Mode

Entice Mode consists of a 4-step video process: the intro, outro videos, touch indicator, and background vignette. Entice Mode is activated as a user/visitor approaches the wall/screens. The intro video provides a CTA to engage with the wall and how (ex: Touch the screen). Once triggered, the touch indicator video/animation takes place in full-screen, signaling to the user that their action has been read. Once the touch animation ends, the outro video automatically kicks in, revealing the background vignette and leading the users into Explore Mode with our main navigation.

Explore Mode

Explore Mode allows the users/visitors to navigate and engage with Spin Master’s brands, videos such as TVC’s and select brand episodes. PR events, social channels, and popular posts. Visitors can also see up-to-date stock information, office locations, photos, and Spin Master’s corporate initiatives and events.

Explore Mode

Explore Mode allows the users/visitors to navigate and engage with Spin Master’s brands, videos such as TVC’s and select brand episodes. PR events, social channels, and popular posts. Visitors can also see up-to-date stock information, office locations, photos, and Spin Master’s corporate initiatives and events.

Kid Zone

Tailored and designed for children, this hidden experience can only be activated by a user swiping up on any of the Interactive Wall’s bottoms four screens. This section’s goal was for children to engage and play with the latest Spin Master brands. We included popular videos and episodes, microgames, and photo galleries to keep it fresh and exciting.

Kid Zone

Tailored and designed for children, this hidden experience can only be activated by a user swiping up on any of the Interactive Wall’s bottoms four screens. This section’s goal was for children to engage and play with the latest Spin Master brands. We included popular videos and episodes, microgames, and photo galleries to keep it fresh and exciting.

Announcements

To inform current employees and visitors alike of office events (ex: Bagel Day), we created the Announcement Mode. This Mode utilizes the lower right corner of the Interactive Wall, displaying custom messages and visuals. The Announcement Mode changes in scale depending on other activated Modes.