Design the app you want to have

Introduction

The Marvel Cinematic Universe is a beast. With over 22 films, four phases, and more than 5 television shows, it can be daunting for fans to approach, especially those that are interested in the comics. In response, I designed MARVEL+, an engaging and informative companion app for Marvel Cinematic Universe (MCU) shows, movies, and comics that would enhance the Marvel experience of any kind of fan.

Here how I created an app that I would want to have using my design process:

Deciding the Features

The most essential part of the design process for the MARVEL+ app was deciding what features that the prototype would and wouldn’t have. Knowing that I wanted to make the app an engaging and useful experience, instead of just a show piece, I developed four main features for the app to have:

This Moon Knight page breaks down shows by their essentials: Episodes, Characters and comics.
  • Show by Show Breakdown- There’s a lot to keep track of when shows come out, and I thought that it would be helpful to have several categories audience members can learn more about based on their interests, so there isn’t information overload. The three categories that are included on show pages: Episodes, Characters, and Comics. I loved having the character cutout of Moon Knight.
  • Comic Recommendations- As an avid Marvel fan, I think one of the greatest things that MCU fans miss is the rich, comic history and references that heavily influence the shows. This scrollable comic book feature would also allow greater exposure to the comics and create an additional stream of income and help audience become connected with and purchase the comics that inspired the shows or televisions,
This incredible timeline places all MCU properties in proper watch order
  • An Interactive Timeline- A large issue MCU fans face is knowing where to start or how to begin watching the franchise. This Timeline feature would sort all shows not by release date, but by when they occur in the MCU timeline. Even though it was the feature I was most excited about, especially knowing how useful it could be for new fans, it was the last feature that I implemented because I wasn’t sure how to best design it. The design solution I found came from a user on Reddit, whose fun handwritten details help the design feel more organic, and became the crowning detail of this app experience.
This moldboard of existing properties in different apps, as well as branding assets, helped create a cohesive and styled experience that looked like it belonged to Marvel

Sticking to a Theme

When I was designing this app, I knew that I wanted to draw inspiration from existing Marvel properties, and design the app with an automatic dark mode. The app has an overall sharp, polished appearance with angled elements, and deep colors, instead of a standard black image. It also has gradient scrims, usage of red or navy blue elements as accent colors, with fresh text that is inspired by the MCU style guide.

To make this app as realistic as possible, I captured existing assets of movie posters and characters, using interesting design shapes to break up the visual design. Its main interaction is scrolling back and forth between carousels of MCU content or comic books in a portrait form.

These images from the Home screen show how assets are utilized and shapes break up the visual language of the app.

Meeting the Audience

I created for the app for MCU fans subscribed to the Disney+ service in their twenties who may be unfamiliar with or want to better understand the lore of the universe, the characters, and the comics that inspired them. In other words, I created an app for users like me.

New or avid users can better understand MCU lore in interactive and accessible ways by content, character, comics, or timeline, as organized and structured in the app. With the app I created, I wanted a way to hook the audience by allowing them to catalog watchlists and interact with carousels of content, and give them ways to share the interactive, smooth experience with the people they love and know.

Here is an overview of all of the complete prototyped pages available for viewing

The Takeaway

Developing an app with your interests gives apps a better sense of design, and understanding of the audience, and can become more polished because of the vested interest in the product. I’m proud of how MARVEL+ came to being, and I hope to create more apps with the same personal process for a better outcome.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store