Personal Project
MCU Streaming App Concept
2021
Product Designer Wannabe
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. Open HTML prototype.
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 17 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.
Mockup
Screenshot of mobile and desktop wireframe artboards within Sketch
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. 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.
Branding and text used throughout the app
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. View visual designs.