Monedia

The Client

Monedia is a mobile application designed for tracking and cataloging media. It assists users in organizing and managing media content they are interested in or wish to save. The app offers information about saved media, including purchase or streaming options, runtime, and creator details. Additionally, Monedia provides recommendations for new media based on users' saved and liked content.

The Goal

Monedia required the development of the entire application, including branding and a logo. It also needed an onboarding process to assist users in creating a personalized recommendation section based on their preferences. A direct and user-friendly feature was necessary to enable users to easily save media to their lists for later access. The list page had to efficiently display saved lists for various types of media, such as movies, TV series, books, and video games, while clearly distinguishing between each section. Monedia also aimed to prioritize customizable push notifications, allowing users to determine when or if they wish to receive notifications regarding items on their list.

My Role

My role in this project was as a UI designer.

The Constraints

The Monedia site timeline was for a total of about 13 weeks to complete the brand identity and a functional prototype for a mobile application.

User Interviews:

The first step was to begin the process of identifying participants for user interviews and preparing interview questions. The primary objective of my research was to understand how individuals currently track media that interests them and identify ways to simplify and streamline this process. Additionally, I aimed to gather insights on the features users would desire in a media tracking application and the specific information they would want to access. I successfully recruited five participants for this case study. From the interviews I conducted this data was collected:

Motivations

- Saves various types of media for future consumption.
‍
- Values having a centralized and organized system.
‍
- Prefers recommendations and easy access to information.

User's Needs

- Desires a unified platform for saving and organizing media.

-Would like recommendations based on preferences.

-Seeks detailed information about media.

-Appreciates reminders for long-ignored saved items.

Frustrations

- Easily loses track of screenshots and bookmarks.

- Lacks efficient organization options.

- Would like more structured information about saved media.

Competitive Analysis:

After completing the user interviews, I proceeded to conduct comparative and competitive research. Since there are no direct competitors offering the exact same service, I drew insights from research on more tangentially related options. Specifically, I examined Steam, Goodreads, and Pinterest as reference points. Each of these platforms includes a saving feature for its respective type of media: Steam for video games, Goodreads for books, and Pinterest for saving images from across the web. In this analysis, my primary focus was on understanding how each platform saved and cataloged their respective media.

User Persona:

The persona I created was for an explorer who is always seeking out new movies and TV series, but was struggling to keep track of what she was interested in. Her love for discovering new content was hindered by the lack of an efficient way to organize and remember her media preferences.

User Empathy Map:

The empathy map was created to have a deeper understanding of the user's headspace and what they might be thinking as they go through the process of searching and saving media on the platform, enabling me to design with a user-centric approach that prioritizes their needs, emotions, and expectations throughout the user journey.

I began the designing process with a sitemap to lay out what pages were needed. A sitemap was essential to establish a clear and organized structure for the website, ensuring that all necessary content and functionalities were accounted for and facilitating efficient navigation and user experience.

After I had created the sitemap, I moved on to creating a task flow for the application's onboarding process to define the specific steps users would take to get acquainted with the platform and start adding media to their lists. This task flow was essential for ensuring a seamless and user-friendly onboarding experience.

Once the task flow was completed and defined the necessary features, I proceeded to sketch wireframes. Once I had created a sufficient number of sketches, I advanced to develop a mid-fidelity prototype to ensure the application's functionality closely matched the design. The design was optimized for mobile, resulting in a total of 35 prototype pages.

After creating the mid-fidelity pages, I began developing the logo and brand identity for Monedia. My aim was to craft a clean and modern logo design. In terms of the overall branding, I aimed for a clean appearance with vibrant colors to capture users' attention. I opted for a dark mode in the site design, considering that many of the users I interviewed expressed a preference for a darker screen to reduce eye strain. Ensuring legibility and accessibility was of utmost importance.

For the app's color scheme, I selected dark grays and a bright gradient for buttons. I strived for a color palette that was clear and not too overwhelming, considering the abundance of images in various colors within the application.

With the UI Kit created, I proceeded to develop the high-fidelity designs for the site using Figma. The user research revealed that images would need to be a significant focal point in the design and layout of the application's pages. Additionally, other key objectives for the project included implementing an onboarding process to enable users to start adding media to their lists from the beginning. In the end, a total of 41 pages were designed

Usability Testing and Interactions

After completing the prototype, I conducted usability tests with seven participants. These participants were instructed to go through the onboarding process and then add an item to their media lists. The outcomes of the usability tests enabled me to create an affinity map, which highlighted the aspects of the design that were effective and areas that needed improvement.

Based on the results of the usability tests, I made several improvements to the high-fidelity designs. This included ensuring that light-colored background images had lower opacity to enhance the legibility of white text. I also made smaller changes, such as modifying the series header to read 'TV Series' for greater specificity and clarifying that the user rating was being used for the Rotten Tomato rating.

Additionally, there are more substantial changes planned for implementation in the future. These changes involve reorganizing the navigation bar to create a new homepage and replacing the settings icon in the navigation with a slide drawer icon. The new homepage will emphasize 'Featured' and 'You Might Like' content.

Learning & Takeaways

This case study highlights the process of designing a phone application, starting from thorough research and extending through branding and application design. It reinforces the importance of user-centered design principles, demonstrating how research insights informed a compelling branding strategy and ultimately resulted in the creation of an intuitive, visually engaging mobile application. Thanks for reading.