Digital Signage
2022 - 2024
Overview
Use a template-based design to ensure consistency in components, their placement, and overall visual style.
Tools
How might we
Develop a template-driven framework to ensure uniformity in components, placement, and visual design for both Guests and Cast.
~100 one-off signs with inconsistent hardware & design
~100 one-off signs with inconsistent hardware & design
Media and designs are outdated and need to be modernized
~100 one-off signs with inconsistent hardware & design
Problem
The fleet consisted of over 100 unique signs that featured inconsistent hardware and design, unclear and hard-to-read content, as well as outdated media and aesthetics.
Whenever updates were required for the paper or digital signage regarding menu items, hours, or planned activities, Crew Members had to submit a change request or rely on another Crew Member in the print shop to edit and re-print the materials, which was a time-consuming and labor-intensive process.
Proposed Solution
Following a multi-day in-person workshop facilitated by design, the suggested solution was to develop a uniform template system for the port and fleet, incorporating content, visuals, and patterns.
These signs would be linked to a centralized network, allowing shore-side developers to implement real-time updates whenever changes are required onboard.
In collaboration with Walt Disney Imagineering, I created a process for designing and delivering numerous signs for the fleet.
Hours Template
Activity Template
Menu Template
Design Process
Step 1: Designing & Developing Templates
All of the templates that were decided on also needed to be built within Figma as a component and within production as code.
Working closely with the engineering team, I created skeleton overlay components within Figma that could be slightly manipulated using auto-layout. This strategy aligned the closest to how the team would build the production code and stay consistent from template to template.
I created a mini UI kit for the initiative that allowed me to swap logos, backgrounds, colors, text, etc. in and out easily and efficiently. This provided an easily scalable solution when I designed for the other 4 ships.
Step 2: Style Guides
Once all the template types were determined, technology, product, and Imagineering collaborated with the design team to develop each template using a variety of components.
For the Disney Wish signage, I utilized style guides provided by Imagineering. These guides outlined typography, patterns, colors, media, and layout. I incorporated each of these elements into the Figma templates to assemble each sign.
Step 2.2: Sans Style Guides
For the Disney Dream, Fantasy, Magic, and Wonder, I was not provided with style guides from Imagineering. While the ship was docked at Port Canaveral, Florida, it was my duty to organize a tour of the ship, take photographs, and observe environmental elements that I wanted to incorporate into the digital signage design.
Using these photos, I created my own style guide with color palettes, textures, patterns, and venue logos.
Step 3. Applying Style Guides to Templates
I started with a blank frame of the appropriate size in Figma and positioned the template component on top. If I had an official style guide, I would import the assets directly into Figma to start designing the sign. In the case of creating my own style guide, I would collect additional inspirational images and create assets using Adobe Photoshop, Illustrator, or directly Figma.
Step 4. Review with Imagineering
After finalizing the design, I convened with Imagineering partners to evaluate the signage to the surrounding ship environment, imagery, and assets. Based on the review, I would make any necessary adjustments. This process would continue until all parties were pleased with the final design.
Step 5. Delivery & In-Person Review
The delivery of each sign required exporting assets and collaborating closely with development partners to ensure the sign was presented as intended. I performed a detailed review of every sign with my team at the Orlando digital signage lab prior to production.
On board the ship, I worked with Imagineering to conduct a final walkthrough, evaluating how environmental elements such as carpet color and wall patterns affect signage design. I used my iPad to take photos and note any visual defects I observed on the signs, which I later used to create tickets for my development partners in JIRA.
Reflections
In a span of two years, my team and I developed digital signage for five ships, covering 189 venues and 494 variations using 19 templates. Most of the signs feature my original designs, tailored specifically for each ship's venue. This project significantly improved my abilities as a visual designer.
Additionally, I had the chance to board the Disney Dream and Disney Magic, as well as participate in the Disney Wonder Dry Dock to implement visual adjustments.
As the fleet expands, I anticipate that labor costs for each project will significantly reduce, allowing for more time to focus on creating beautiful, uniquely Disney designs.
