Marvel Studios | Figma Daddy

iPhone 13 Pro Max - 1 — All Hands — Right hand with watch.png

< Back

Marvel Studio Mobile App

Project Overview

Role

UI/UX Designer

Responsibility

User Research

Ideation

Wireframing

Prototyping

Usability Testing

Tools

Figma

Google

Introduction

I created a mobile app concept for Marvel Studios that allows users to access all of Marvel's content, including movies, comic materials, and themed products, in one convenient location. This app would eliminate the need for users to go to third-party platforms like Netflix or Sony, or resort to illegal downloading websites, to access Marvel content. By providing a centralized platform for accessing Marvel's offerings, the app would enhance the user experience and make it easier for fans to engage with the brand.

Problem Statement

Marvel Studios has a large and passionate fan base worldwide, but many of them have difficulty accessing Marvel content in legitimate ways. Some have resorted to using pirated websites or purchasing pirated Marvel books, movies, and merchandise. This can be frustrating for fans and is not a sustainable or ethical solution.

Project Goals

The primary goal of this project is to design an app that allows users to watch Marvel movies and read comic books, as well as purchase Marvel-themed shirts, collectables, toys, and other materials. The app needed to have features that enable users to easily access and engage with this content.

Design Process

Just like every good design out there, there is a process using design ethics that must be followed so that it meets up with design standards. In this design, the processes I used as a guide are:

Empathize

As a UX designer, it was important for me to understand the perspective of my users when designing the product. To gain insights into their needs and preferences, I conducted some user research by asking a few Marvel Studio fans a series of questions. By gathering this information, I was able to better understand what my users wanted and design a product that would meet their needs. The results I got from the user research were:

Five out of six users agreed that they access Marvel Content from illegal websites
All the users agreed that they would love to have an All-Marvel Content mobile app
Users said that they will love a feature that enables them to purchase Marvel-Themed products like shirts or caps.
Users said that they will love a feature where they can not only watch the movie but save it for later downloads.

Define

I used my user research to create a mock user persona to make the design more user-centric. This helped me design with my target audience in mind, resulting in a better user experience.

Ideate

I started the design process by sketching out my ideas in low-fidelity form. At this stage, I also chose the colours for the design, deciding on red and black to match the industry standards of Marvel Studios. This step allowed me to identify and correct any mistakes that I might have made when creating the high-fidelity prototype later on. By sketching out my ideas and carefully selecting the colours, I was able to ensure that the final design would be visually appealing and aligned with the branding of the company.

Prototype

I opened my Figma app and began designing the high-fidelity prototype. While working on the design, I made a few errors, but because I had already completed a rough sketch during the ideate stage, these mistakes were minor and easy to fix. I quickly noticed the errors and was able to correct them, ensuring that the final prototype was as accurate and functional as possible. The ideate stage had been crucial in helping me identify and address potential issues, allowing me to create a smooth and seamless prototype that would ultimately provide a great user experience.

Understand

I wanted to understand how users would interact with the app, so I asked a few friends to test its usability. Through this process, I observed that some users struggled with certain areas, such as clicking to view a movie. Additionally, users preferred clickable areas, such as a bottom navigation bar, to a hamburger menu. As a result, I had to return to the prototype stage and address the issues that the testers had identified and raised as concerns.

Take a look at the video below to see how the application works.

Conclusion

The design of the app enhances the user experience by providing access to high-quality and exclusive content. Through my work on the app, I discovered that many people have a common issue that they hope Marvel can solve, which would increase their affinity for the entertainment company. I also learned that to retain users, companies must pay attention to their needs and create ways to improve the user experience.