Case study: Design & develop a website for Superheroes (The Boys TV-series)
By: Ivano Aquilano
Tags: Product Design, Case Study, Design, The Boys Tv Series, Webflow

Brief: Imagine how Vought International, the American multi-billion dollar that manages the global population of licensed Supes in the world of The Boys, would represent themself online. Design the home page of the fictional company has it was real.

Note: This is a fictional project based on the series ‘The Boys’ by Eric Kripke, Evan Goldberg, and Seth Rogen and is for entertainment purposes only. This article is not affiliated with Amazon Prime Video in any way.

Overview

How do you imagine a Superheroes' corporate business website? I thought a lot about getting the right answer to this question and how effectively they would structure their presence online if a sick world like this ever existed.

The company is fictional. The website should not be. Watching the series twice led me eventually to dive into the company’s goals, empathizing much more with the hypothetical user needs, and asking myself how they would achieve business objectives.

During my daily job, I work mainly on tailor-made products and PWAs solutions, but I usually design a good amount of websites for clients as well; this led me to build Vought’s potential homepage on my own to push the boundaries of creativity and codeless design.

In fact, lately, (about a year or so) I discovered Webflow. This powerful tool helped me to bring my ideas to life without the struggle of coding. Having this freedom, without relying on developers, helped me take full ownership of my work, enhance my assets' quality, deliver a polished product, and eventually understand code much better. ☝ ️This is NOT a sponsored article, BTW.

Through this strong tool and with a fair amount of holidays ahead, the page was just a matter of days, however, unfortunately, I wouldn’t be able to validate the solution with real users, so perhaps I thought that an article about the design process might work nicely to get a few feedbacks.

Design Process

Every stage of my design is never sequential. Every phase I go through often occurs in parallel with another, or they overlap between each other and repeat iteratively. However, because of the limited time available and the constant-growing excitement level, I tried to break down the process for you as linear as possible.

A little backstory: When planning this idea, I was in Seville, at my girlfriend’s house. Covid was still kicking everyone in, in fact, I wasn’t able to visit properly once again the beautiful heart of the city. I wanted to get busy and quiet, I wanted to create something that I could manage to complete before leaving. Anyway, being vague and distracted has been revealed the best asset. Even noises and breaks were massively helping the flow of ideas. In a week I’ve designed and finished all the desktop view, mobile was due and I was sups-excited.

Exploring / Research

Initially, I had some ideas on the page's structure and some hypothetical content, but everything was quite blurry in my mind. I had to make room inside my head for all the bits of results I was preparing to discover.

Starting watching the series once again was the first step to review Vought’s goals, mission, and brand messaging. Finding material wasn’t so hard to be honest; the internet is packed with good imagery related to the tv show and great insights on Fandom. However, the best contribution was given from this remarkable showcase of David Blass.

Brand Communication

What does the brand look like? How does the brand speak?

Effective copy and communication are key. To clarify this matter and help myself translate ideas into messaging, I went through the analysis of the Look/Feel and the Tone/Voice or Attitude of the brand.

Overall, I would relate Vought with the current (mainly tech) big players; their thirst for power and their austere politics matched accurately. Also, Vought is ready to stoop to any form of income, doesn’t matter the price.

At this point, a full day of research was taken. I’ve arranged together different resources and useful links into my Notion workspace, and I’ve generated an extensive moodboard available here.

Empathize & Define

How would a large corporate of superheroes structure themself internally?

As a Product / UX designer, I have to consider every resource and useful asset for my scope of work. Normally I’m in charge of the product's full-cycle, from the identification of the market opportunity to the ideation and development of a proper solution for the problem defined.

Here, in a Supes business, the value proposition is crystal clear, but after the research phase, the purpose of the website and Vought’s high-view objectives are the foundations that should be evaluated.

Reasonably, the main areas I’ve narrowed down would be:

Provide a way for people seeking for help

Promote marketing & merch products

Promote stock market opportunities

Highlight the benefits of their services

Information Architecture

True, it’s only one page, but it has to be thorough in order to be pertinent. Information Architecture is crucial to get a sense of logic and navigation throughout the website, (even if will not be possible) and two elements were containing most of it: navbar and footer.

Content Strategy

Books taught me that Content Strategy has to be done Yesterday.

So the challenge wasn’t just to prepare an effective hero section or give a reason to the primary CTA, but create content that would be appropriate and exhaustive at the point that felt real. Images and videos are fundamental, but a good copy helps strengthen the core of the identity.

With time I’ve understood that the biggest benefit of a working understanding of content strategy doesn’t need to be to carry out the work but to bring about a greater prominence and distinction to the importance of content during the full project cycle. Create and manage content is actually one of those things that interest me a lot. I’m one of those designers that love (English) copywriting, even if English is not my mother tongue.

A first brief paper sketching to delineate the shape of every key section of the page helped me to start writing about their services’ descriptions and define the ideal content to highlight. This led me eventually to extend the page with the support of three modals that would help enrich the content.

The very first sketch and some early notes

Ideate & Design

Visual clarity has to be accurate. Look & feel has to be powerful. Scrolling through the page has to be engaging. It’s a real business of Supes we’re talking about.

I’ve kicked off the high-fidelity design straight away. Over time I’ve found wireframes to be less and less relevant in some cases. Having a black and white page that acts as a “skeleton” of the final outcome could be an essential step in the process of complex UX solutions, but this wasn’t the case. The focus is not centered on usability but aesthetics, hierarchy, and the right content.

Hero section

Navbar is settled. How about the very first section?

A hero with heroes (a pun very well intended) posing in line was too granted, too basic. Showing a big Vought’s logo, since almost every single item in the Vought tower is branded, was more appropriate. Also, I don’t want the website to be redundant; everyone should know who Vought is and what it represents, is not necessary to display The Seven from the beginning of the page, better to let people see them later on.

Logo references

Redesign of the original logo

First Hero design — Successively, the purpose of the main CTA has been connected with Section 2.

First section: Latest news / Merch & Movies

The first section under the hero is a mix of mainstream stuff, merchandising of magazines, video ads, and movies. It’s a section that would be easy to manage, edit, and/or filled with more content at any moment through CMS collections.

The first section before developing

I thought that using Starlight as the first image to empower women would be smart, just like Vought does to reach a female audience, also because usually is male ones who are more accustomed to like superheroes. (presumed goal: get more female audience)

Second section: Golden Pass

Attracting the audience with an event, a prize, a draw, or anything that would push people to take action. It’s like Willy Wonka’s golden ticket: codes would be hidden in Vought’s products and shipped out into countries all over the world. This is probably my favorite one. A flashy and sparkly ticket to finally meet those bas****s.

The second section — Before before developing

Third section: Become a Shareholder

At this stage, right after the younger audience seeking a chance to meet their heroes, I’ve introduced a reason for a senior and wealthy audience willing to buy Vought shares. Let’s see how’s going the market right now, let me see some benefits of investments.

The third section before developing

Fourth section: Vought’s services

What do they do for us? What Vought is constantly working on besides fancy merch and movies?

The fourth section — Vought is much more than The Seven: is the company that leads them

Modals

I was going quite far with the modals and to be honest without them wouldn’t be the same.

Getting help / Details of the prize draw / Benefits of opening an account with Vought

Warnings, instructions, and catchphrases enriched the overall feeling IMO. Special care was given to the subtle texts (is not a bloody corporate if doesn’t have them!).

… Oh BTW, there’s an easter egg somewhere 👀

Developing

No code, but hey! Webflow is still developing.

Let’s roll up my shirt sleeves (purely figurative, at the time in Spain was hot even in November) and do the work. Developing resulted in a bit tricky because I’ve planned many interactions and was better trying to complete them as soon as each section was done.