Creating a landing page for
The Defender of the Universe
UX
Web Design
Overview
Client
Voltron was introduced to the world in 1984 with the animated TV program Voltron: Defender of the Universe. Since the original airing, Voltron has stayed popular, spawning multiple toylines, a 1990s CGI-animated series, and numerous comic series.
The objective was to create a new landing page suitable for the Defender of the Universe.
My Role
UX/UI Design Lead
Project Goals
Showcase the awesomeness of Voltron
Inspire potential producers with franchise assets
Guide users to online store
Incorporate the Instagram feed
Research
The first phase of any project is the research phase. First, we researched direct and indirect competitor’s landing pages to compare how they talk about their franchises. Then we dug deep into different Voltron mediums to gather a catalog of references that we could use while designing the landing page.
The objective was to create a new landing page suitable for the Defender of the Universe.
Competitor Research
While researching competitors we noticed that not many websites had interactive elements. We saw this as an opportunity to set the Voltron landing page apart. We also noticed that most franchises had created live-action films. Since this aligned with one of our objectives (to inspire potential producers) the idea of including 3D assets within the landing page started to cultivate
Gathering Resources
Since the franchise had so many different shows and mediums, we made sure not to tunnel vision too much into one series. Shown are some of the comics books that I purchased to better educate myself on the franchise.
.gif)
We also watched a lot of Voltron... for research!
The origin story
When the pilots find the five keys to their lions, they’re then able to form Voltron. The sequence of the team forming Voltron is a staple of the show, so it only felt right to include that into the landing page.
Formulating a strategy
We wanted to give users an interactive experience. What if we could provide the user the experience of initiating the startup of their own lion?
The execution
With the concept in place, we got to work on the 3D assets. The models were created and animated in Blender, then brought into After Effects to composite the different animations together.
Landing page
With all of the 3D assets complete, it was now time to create the rest of the content.
The objective was to create a new landing page suitable for the Defender of the Universe.
Legacy shows
It was essential to show the legacy of the Voltron franchise. We created a timeline that displays the different versions of Voltron from each show and provides the user with links to episodes.
In memory of Ted
Tragically at the start of this project, the man who had brought us Voltron, Ted Koplar, passed away. We wanted to include something sentimental on the landing page to remember him and his legacy. The cross and crown were inspired by the Voltron crest.
