IMDb
INDEPENDENT PROJECT
Product
Feature add-on
Industry
Entertainment
My Role
UX/UI designer, user researcher
Length
80 hours
Tools
Figma, FigJam, Google Suite, Notion, Optimal Workshop, Maze, ChatGPT
Disclaimer: This project was undertaken for academic purposes only and is not associated with IMDb.
IMDb stands as the go-to online hub for all things entertainment, spanning movies, TV shows, video games, and celebrities. While the platform excels in delivering comprehensive details about productions, including cast and crew specifics, plot summaries, and ratings, there's a noticeable gap when it comes to movie and TV soundtrack information. Ever found yourself wondering about that catchy tune from a film or show? That's precisely the puzzle I set out to unravel with this project.
Problem
IMDb's mobile app lacks comprehensive information on movie and TV soundtracks, limiting users' ability to discover and explore music associated with their favorite productions.
Solution
An advanced search filter tailored for media soundtracks, providing users with a seamless way to unearth soundtrack-related information.
Design Process
1. Discover
-
Competitive Analysis
-
User Interviews
-
Affinity Map
-
Heuristic Evaluation
2. Define
-
POV/HMW
-
User Persona
-
Task Flow
-
Low-fi Sketches
3. Develop
-
Mid-fi Wireframes
-
Style Tile
-
UI Kit
-
Hi-fi Wireframes
4. Deliver
-
Prototype
-
Usability Tests
-
Iterations
1. Discover
Exploring User Needs and Competitive Landscape
Competitive Analysis: Exploring Entertainment Databases
In the initial phase, my goal was to understand how users feel about finding soundtracks and what other websites/apps offer in terms of soundtrack features.
Insights from the Competition
I checked out popular entertainment databases like IMDb to see how they handle soundtracks. Here's what I found:
-
Rotten Tomatoes, Letterboxd, and Metacritic: These platforms lacked soundtrack info and had limited search capabilities.
-
IMDb: While IMDb does provide some info on movie/TV soundtracks, it's tucked away in the specific info page and lacks details. The advanced search feature is robust but doesn't allow users to search for songs or music in movies/TV. Music video details are available, but not soundtrack specifics.
User Research
With these insights, I created a plan to dig deeper into IMDb users' needs and challenges. This groundwork set the stage for a user-focused design approach.
Research Goals
-
Identify user needs and preferences when seeking soundtrack information in movies and TV shows.
-
Understand how users currently discover new music and explore how the new feature aligns with their existing behavior.
-
Explore user preferences for browsing and filtering search results related to soundtracks in movies and TV shows.
-
Identify pain points or issues in the current IMDb mobile app that might impact the adoption and use of the proposed soundtrack feature.
Key Research Questions
-
How do users currently search for songs and soundtracks in movies and TV shows?
-
What are the primary use cases for users searching for music in movies and TV shows?
-
What features or functions do users desire in a music search feature for movies and TV shows?
-
What pain points or issues exist in the current IMDb mobile app that might hinder the adoption and use of the new soundtrack feature?
User Interviews and Heuristic Evaluation Findings
I engaged in one-on-one moderated user interviews with a total of 7 participants, carefully selected among IMDb users and movie/TV enthusiasts. Following the interviews, I synthesized my observations into an affinity map to discern common patterns and user sentiments.
Common Patterns:
-
100% of participants expressed eagerness for a dedicated soundtrack feature within IMDb.
-
100% rely on streaming music apps for their music discovery needs.
-
Consensus on the IMDb app being cluttered and busy.
-
Desire for advanced search filters, especially by genre, for soundtracks.
Additionally, a heuristic evaluation of IMDb's iOS mobile app uncovered notable strengths and areas for improvement.
Strengths:
-
IMDb demonstrated good organizational structure, with clear information and appropriate headings.
Areas for Improvement:
-
UI Design
-
Identified issues with UI design, including crowded screens due to an abundance of information and insufficient white space.
-
Inconsistencies in button design and spacing across the application.
-
2. Define
Enhancing Entertainment Discovery on IMDb
Point-of View Statement
I wanted to explore ways to help IMDb app users to enhance their entertainment experience by easily discovering songs and artists featured in movies and TV shows, because of their reliance on external apps like Shazam and Google for music identification, their preference for genre-based browsing, and their interest in expanding their knowledge of the entertainment industry through curated playlists and related filters.
How might we . . .
-
simplify the process of searching for music featured in films and TV shows within the IMDb app?
-
streamline the search functionality within the IMDb app to allow users to effortlessly discover and identify music featured in films and TV shows?
-
design a user-friendly interface that enables intuitive browsing and exploration of music content within the IMDb app, making it easy for users to find songs and artists associated with specific movies or TV shows?
User Persona
Meet Carmen, a dedicated movie and TV enthusiast eager to delve into the intricacies of how soundtracks intertwine with visual storytelling. Carmen faces the frustration of resorting to multiple external apps and websites to find soundtrack information, and the absence of relevant search filters, especially in terms of genres.
Task Flow: IMDb Soundtrack Search
I conceptualized a task flow tailored for IMDb users to employ an advanced soundtrack filter for searching music featured in movies and TV shows. The flow aims to provide an intuitive and efficient user experience, addressing my persona’s pain points.
Search for a Song
Low-fidelity Sketches: Designing the Experience
Taking pencil to paper, I sketched out low-fidelity designs for key screens along the task flow. The emphasis was on ensuring the filter's accessibility and presenting soundtrack information in a clear and informative manner, including details about the soundtrack item and its appearances in movies/TV series.
3. Develop
Crafting the IMDb Soundtrack Feature
Mid-fidelity Wireframes: A Digital Blueprint
Using Figma, I translated the initial sketches into mid-fidelity digital wireframes. This transformation aimed to maintain consistency with IMDb's current iOS app organization, ensuring a seamless and intuitive experience for IMDb users. These wireframes serve as the foundational blueprint for the upcoming stages.
Style Tile: Harmonizing with IMDb's Brand
In developing a new feature for an established product, adherence to brand guidelines is paramount. The style tile aligns with IMDb's current brand guidelines (as of January 2024). This cohesive visual representation ensures a unified and recognizable aesthetic within the IMDb app.
UI Kit: Streamlining Design Elements
To expedite the design process and maintain consistency, I created a UI kit of key components in Figma. This kit encompasses repeating elements such as buttons, icons, and various card types. By establishing a component set, design efficiency is heightened, facilitating a smoother transition from concept to implementation.
High-fidelity Wireframes: Elevating the Visual Experience
The transition from mid-fidelity to high-fidelity wireframes marked the infusion of color and detail into the design. The goal here was not to revolutionize IMDb's current UI but to seamlessly integrate the new soundtrack feature. The hi-fi wireframes present a visually enriched representation, showcasing how the IMDb app can evolve while maintaining a familiar interface.
4. Deliver
Bringing the IMDb Soundtrack Feature to Life
High-fidelity Prototype: Navigating the Experience
The culmination of efforts resulted in a fully functional and interactive hi-fi prototype, weaving together the various design elements into a cohesive user journey. This prototype served as a tangible representation of the envisioned IMDb soundtrack feature, ready for testing and refinement.
Usability Testing: Evaluating the User Experience
To assess the effectiveness of the task and designs, unmoderated usability tests were conducted using Maze for efficiency. Two distinct user paths were identified, with a total of 10 responses.
What Went Well
-
50% awarded the experience 5 stars, while the remaining 50% gave it 4 stars.
-
Participants universally perceived the task as "straightforward."
-
Appreciation was expressed for the clarity and simplicity in the design.
-
An impressive 90% found the feature helpful and useful.
-
A participant remarked, "I thought it worked out great! Really cool idea and the functionality was executed well."
Additional Observations
-
Overall, no major hiccups were reported.
-
Two participants expressed the desire to add a live sound-identifying feature, akin to Shazam or Soundhound.
-
One participant noted that the advanced search screen felt crowded due to the abundance of filter options.
These insights affirmed the positive impact of the IMDb soundtrack feature on the user experience, with users finding it intuitive, beneficial, and well-executed.
Iteration: Enhancing User Interaction
In response to user feedback and to optimize the advanced search screen, a few minor iterations were implemented. Notably, adjustments were made to enhance clarity and hierarchy, addressing concerns about the screen feeling crowded due to an abundance of filter options. These refinements aim to create an even more intuitive and user-friendly experience.
Wrap-Up
Lessons Learned
Through this project, I gained valuable insights into maintaining consistency with an existing product's brand and design guidelines. The challenge was enriching and added depth to my design proficiency. I also continued to improve my Figma skills.
Impact
-
Enhanced User Experience: The IMDb soundtrack feature has the potential to significantly enhance the user experience by providing a seamless and integrated platform for discovering songs and artists associated with movies and TV shows.
-
Competitive Edge: The inclusion of a live song recognition feature could set IMDb apart, offering a unique functionality akin to popular apps like Shazam or Soundhound.
-
Increased User Engagement: As users find a centralized solution for their entertainment and music discovery needs, IMDb may experience increased user engagement and satisfaction.
Next Steps
-
Iterative Refinements: Continue making iterations based on user feedback and testing to refine the IMDb soundtrack feature and ensure optimal user satisfaction.
-
Developer Handoff: Facilitate a smooth handoff to developers, providing comprehensive documentation and support to bring the feature to life.
-
Feature Expansion: Explore opportunities to add additional soundtrack-related features, such as a live song recognition feature, to further enrich the user experience and cater to evolving user preferences.