Marvel Cinematic Universe (MCU)

Streaming Service App

Overview

The Marvel Cinematic Universe (MCU) streaming service app is a conceptual digital product intended for Marvel fans seeking a streaming service dedicated to the MCU lineup of movies and series. Admittedly, the main reason this project exists is to illustrate some of my UX, UI, product, and visual design skills that I am unable to showcase elsewhere in my portfolio.

My role.

Everything from start to finish.

Why is this app needed?

Sometimes paying customers don’t want to pay for more than they want. For example, some restaurants have meals that are too large to finish in one sitting while also costing more than a smaller meal would. Sometimes customers just want smaller meals at reasonable prices, like paying less for a more niche streaming service without having to pay extra for content they don’t want. This platform can also be utilized to create a community-focused Marvel experience in future releases (see: “Community” tab).

Wireframes

Like most digital products this concept began with wireframes, which I completed using Sketch. The wireframes are intended to act as a launching point for quick layout and functional iterations that are used as skeletons for the final designs (see: Visual Design section). My wireframe style is somewhat flat due to a combination of my own taste and getting a sense of the gravity the elements together will have that is not always accurately communicated using more line-based wireframes. The wireframes may contain minor errors like spelling mistakes, but these are meaningless since most of the polishing takes place in the design and prototyping phases.

Marvel MCU Streaming App Sketch wireframes screenshot

Screenshot of mobile and desktop wireframe artboards within Sketch.

Visual Design

This is where the product begins to take shape. Using the wireframes as a guide, visual designs for all key screens of the initial launch are completed down to the pixel. Just like the wireframes, I used Sketch to create the designs, though I could’ve also used either Figma, Adobe XD, or Photoshop since most design layout programs function the same. The wireframes document is 76 pages whereas the design document is 79 pages because additional design pages were needed to complete the prototype and those additional pages did not require additional wireframes since they did not introduce any new functionality.

Marvel MCU Streaming App branding and text

Branding and text used throughout the app.

Prototype

I know I already posted links to the prototype at the beginning for those who just want a basic idea of how the app functions without reading paragraphs of text, but here is where we product design nerds who have made it this far get to discuss the prototype. I first used Sketch to build the InVision prototypes and then used the Craft plugin to upload them to InVision to showcase. I then used BBEdit to build a higher fidelity prototype in HTML, CSS, and JavaScript to illustrate functionality, subtle animations, and other interactions that cannot be illustrated using InVision (eg, fixed elements, hover effects, videos, and dropdown menus).

Challenges

Some design challenges include but are probably not limited to: dealing with spoilers, making a full-bleed user interface (UI) work, designing an expandable minimum viable product (MVP), and compiling the best profile and account features.

An example of how this app deals with spoilers is illustrated on page 15 of the design document (or this page of the prototype). When users go from viewing the main cast to viewing the full cast they are presented with an interstitial message warning them that viewing the full cast may contain spoilers.

Regarding the full-bleed interface, I had a project at a previous company in which I was tasked with creating a streaming service with a full-bleed interface. The company eventually scrapped the project so I am utilizing this side project to put the UI concept to practice. On page 9 of the design document you will see the full-bleed thumbnails, which can only work if each thumbnail has a dark gradient at the bottom to allow white text to go on top of the thumbnail since text cannot go anywhere else.

When first conceiving this project, I imagined a streaming service featuring a robust feed of MCU news and a bustling social network of community members reviewing movies and beginning potentially endless conversations about any MCU topics they want. However, these features require more extensive design research and implementation that go beyond what is necessary for an MVP that only requires features enabling users to sign up, log in, and watch films. So the “Future” and “Community” links are included in the initial release but the users will be greeted with “Coming Soon” messages if they click one or the other. I will eventually get around to adding these features since they would separate this streaming service from most of the ones on the market at the moment as of May 2021.

To compile the best profile and account features I audited current streaming service apps on the market and cherry picked concepts for features that will streamline the process for users to create accounts, edit account information, and edit payment information while keeping their information secure and accounting for special use cases. Here is an example of a special use case: if a user no longer has access to the email connected to her/his account then that user will need an additional option to access or edit her/his information that doesn’t require that user to respond to a confirmation email from that email address. See page 29 of the design document or go to this page in the prototype to see the different options the user has to confirm her/his identity before changing the email connected to the account.

Conclusion

This app concept doesn’t reinvent the wheel, but 99.9% of the time design isn’t about creating something generational. It’s about utilizing best practices to solve fundamental problems that may inhibit users from most optimally reaching their goals. And in this case it’s about finding an idea that can illustrate a wide range of digital product design skills so all of you recruiters and hiring managers have something to judge me by without seeing work I’m contractually obligated not to show publicly. Thanks for stopping by!