The Marvelous Mrs. Maisel

The goal was to give fans a way to connect with the show between seasons, especially as COVID was extending the off-season. We designed an experience for fans to remember favorite moments, and for new audiences to get excited about discovering the series.

- Hello Design Team

Can you describe your project and the concept behind it?

The Marvelous Mrs. Maisel is one of Amazon Studios’ most critically acclaimed series. Hello partnered with Amazon to design a digital destination for existing and prospective fans of the show. We brought the world of The Marvelous Mrs. Maisel to life, featuring best-in-show moments, highlighting the cast and creative team, building an online hub for the latest news and events, and creating a visual language that was entirely unique to the series.

What influenced your chosen technical approach, and how did it go beyond past methods?

To support the series, the site needed to be media-rich. We wanted to make sure it wasn't over-architected on the technical side and remained easily manageable. The approach was to utilize a framework to lessen development time, but output a static site that was performant and provided accessibility support.

What web technologies, tools, and resources did you use to develop this?

NuxtJS was used for the framework, together with the headless CMS Storyblok. Semantic HTML5 and CSS were used to define the layout and styling, Lottie Animations were used to bring the illustrations to life, mp3 and mp4 files were used for the audio and video clips, and YouTube videos played inline. Due to the richness of the media, our team made a large effort for content to load only when it scrolls into view, helping the initial loading time.

When did you experience a breakthrough or an "a-ha" moment during this project?

The site’s visual language needed to stand up to the vibrant and period-inspired look of the series. We incorporated the world of The Marvelous Mrs. Maisel into every detail to surprise and delight fans with each interaction. 60s-inspired illustrations come to life with a color palette pulled from the wardrobe and microinteractions inspired by thematic moments. Spin records, get your fortune read, and scan the airwaves for Midge’s radio ads.

How did you balance your own creative ideas and technical capabilities with a fair representation of the client’s brand?

Technology enables us to bring concepts to life. To bring out the energy and magic of the series, we added a layer to the core of the Maisel brand — the show’s clips, music, audio, characters, set, and wardrobe designs — with interactive discoveries and original illustrations throughout. The technical aspect of a lean, efficient-loading site optimized for video and audio enables the user experience behind the scenes.

How did the final product meet or exceed your expectations?

The goal was to give fans a way to connect with the show between seasons, especially as COVID was extending the off-season. We designed an experience for long-time fans to remember favorite moments and for new audiences to get excited about discovering the series. On average, visitors spent more than 10 minutes on the site, 400% more than industry average, and we frequently saw users scrolling to the bottom to engage with the entire page.

Why is this an exciting time to create new digital experiences? How does your team fit into this?

Hello is rooted in digital and we’ve always believed in its impact — it is all around us in our everyday lives. Especially in the past year, as we’ve all been physically distanced by the COVID pandemic, digital has become even more relevant as a way for people to connect. By creating digital experiences that provide moments of delight and discovery, we provide new ways for people to celebrate and share their favorite show and characters.

See More Projects

World AIDS Day 2020 - A National Conversation -

The National AIDS Memorial

World AIDS Day 2020 - A National Conversation -

View the Project
In Event of Moon Disaster

MIT Open Learning/Center for Advanced Virtuality

In Event of Moon Disaster

View the Project
Frontier Development Lab: Solving NASA’s Toughest Challenges with Google Cloud × Intel

MediaMonks

Frontier Development Lab: Solving NASA’s Toughest Challenges with Google Cloud × Intel

View the Project