My Top Movies

My Top Movies is a ranking-focused movie app that lets users rate, organize, and visually curate their favorite films through a clean, drag-and-drop interface.

Role

UI UX Designer

TimeLine

January 2025 - March 2025

Tools

Figma

Project Type

Bootcamp project, UX Academy

The Problem

Users often struggle to form habits because:

  • 🔁 Traditional apps feel rigid and overwhelming

  • ❌ Overloaded to-do lists lead to burnout or avoidance

  • ⏰ Without a sense of early accomplishment, motivation fades

  • 🧠 Long-term behavior change feels daunting without momentum

The Solution

My Top Movies makes movie tracking personal and intuitive by:

  • 🔢 Letting users rank films using a smooth drag-and-drop interface

  • 💬 Encouraging meaningful ratings with a simple 1–10 scale

  • 🧠 Helping users reflect on what they love — not just what they watched

  • 🎨 Providing a clean, customizable layout to make movie lists feel personal

The Research

For the Top Movies project, I conducted multiple forms of user research to inform the product direction and experience design. This included a competitive analysis of similar movie-list and review apps to understand feature gaps and user expectations. I also conducted user interviews with real participants to explore how people currently track and rank movies, what motivates them, and where they typically fall off. From these findings, I developed a clear sitemap that helped guide all design decisions. Finally, I synthesized the research through an affinity map, grouping user quotes, pain points, and behavioral patterns to uncover actionable insights. These combined methods ensured that Top Movies was grounded in user needs, not assumptions.

To understand how people build and maintain daily habits, I conducted interviews with 10 participants. Key findings:

User Interviews

  • 75% of users said they forget how they felt about a movie after a few weeks

  • Many people wished they could rank movies instead of just rating them

  • Users wanted a more visual and fun way to organize their top picks

Competitive Analysis

I analyzed apps ike Letterboxd, IMDb, and TV Time to identify gaps. Findings:

  • Most platforms focus on logging, not personalization

  • Ratings often feel generic (stars or thumbs-up) and don’t capture nuance

  • Users want drag-and-drop ranking and easier ways to curate top 10 lists

Below is a breakdown of each competitor’s strengths and weaknesses, paired with key screens that highlight their core functionality.

Lettboxd

Strengths

Clean, minimalist interface for logging movies

Offers visual graphs and streak-based engagement

Highly customizable watchlists and diary entries

Weaknesses

Lacks ranking functionality for top movies

The interface can feel cluttered for new users

No drag-and-drop customization or flexible rating systems

IMDb

Strengths

Detailed user ratings and reviews

Recognized and trusted by a global audience

Offers personalized watchlists

Weaknesses

No feature for ranking or organizing top favorites

Overloaded UI — feels more like a reference site than a user-first app

Limited visual engagement or customization tools

Tv Time

Strengths

Designed specifically for tracking TV show progress

Visual indicators for what’s watched, upcoming, or missed

Push notifications for airing dates and new episodes

Weaknesses

Lacks tools for rating or ranking content beyond basic likes

UI can feel overwhelming due to busy layout

No ability to customize or build curated top lists

After analyzing competitors and gathering insights from interviews, I created a sitemap to organize key screens and user actions around the core movie ranking experience.

Sitemap

This sitemap outlines the core structure of the app and how users move through different features. It shows the main paths like exploring top movies, using AI recommendations, and customizing settings. Laying this out helped me stay organized and make sure the experience felt simple and easy to follow from any entry point in the app.

To make sense of the interview data, I created an affinity map — a method for synthesizing user quotes by grouping related thoughts, pain points, and behaviors. This allowed me to organize raw feedback into clear, actionable patterns.

Affinity Map

I organized the observations into clusters like benefits, common findings, pain points, and possible solutions. This helped highlight what mattered most to users and revealed key opportunities for the product.

Insights

My Top Movies is grounded in key user research insights, including:

  • Users want a fast and effortless way to log and rate movies

  • People enjoy seeing their ratings visualized or ranked over time

  • Switching between too many platforms (IMDb, Letterboxd, notes) causes friction

  • Users are motivated by clean, personal interfaces that reflect their taste

After completing the affinity map, I moved beyond research and into the next phase — Prioritization & Roadmapping — where I translated insights into actionable design decisions.

Prioritization & Roadmapping

After identifying key insights, I organized potential features and interactions to ensure the experience stayed simple, intentional, and user-driven. This phase helped me clarify what should be prioritized early and what could be introduced later — laying the foundation for a focused and intuitive flow.

I grouped the features into four categories to guide decision-making: must-haves, nice-to-haves, delightful extras, and future ideas.

Must have

These are foundational features necessary for the MVP:

  • Account creation

  • Add and rate a movie

  • Custom alarm settings

  • Drag-and-drop list ranking

  • View full movie list

Nice to have

Features that enhance the experience but aren’t required to launch:

  • Movie tagging with custom genres

  • Watchlist reminders

  • Profile picture customization

Delightful

Features that delight and engage users but are not critical:

  • Share top list with friends

  • Comment on movie entries

  • Celebrate list milestones with animations

Future Ideas

Future enhancements to explore after launch:

  • AI-powered movie recommendations

  • Integration with streaming platforms

  • Social feed of friends' rankings

After finalizing the feature set, I mapped out key task flows to visualize how users would interact with each core function. This helped ensure each experience was intuitive, focused, and aligned with the app’s purpose.

To support the core features of the movie-ranking app, I mapped out task flows for two key user actions: adding a movie from the AI Gallery and adding a movie manually to the Top Movies List. Each flow was designed to reduce friction, support user decisions, and keep the experience light and intuitive. Mapping these out helped ensure that every path — whether simple or dynamic — felt purposeful and seamless across the app.

Task Flows

Adding a Movie to Your Top Movies List

Adding a Movie from the AI Gallery

With priorities and flows locked in, I moved into branding and wireframes — shaping the look and feel to match the app’s calm, motivational purpose.

Branding and wireframes

With the product direction defined, I turned my focus to shaping how the movie app should look and feel. I began by exploring logo concepts that reflected the app’s identity — expressive, personal, and curated. Once the visual direction felt aligned, I sketched lo-fi wireframes to quickly map out structure and interaction. These early layouts helped clarify the core flow without getting caught in visuals. From there, I built a UI kit to define the full design language — color, typography, and components — and brought it all to life through high-fidelity wireframes and a clickable prototype.

Before designing the logos, I reflected on the name My Top Movies — a title that highlights the personal nature of sharing your most-loved films. I wanted the branding to visually convey that sense of personality, ranking, and taste. The final identity leaned into simplicity, vibrancy, and hierarchy — giving users space to feel ownership over their top picks.

Logos

I selected the popcorn bucket design because it struck the right balance of personality, nostalgia, and fun. Its bold, playful shape instantly signals movies while feeling approachable and memorable — helping users feel excited to share, rate, and organize their favorite films.

With the brand direction in place, I sketched out key screens to explore layout and user flow. These lo-fi wireframes helped me quickly test structure and interaction without focusing on visuals—laying the groundwork for the high-fidelity design phase.

Lofi Sketches

Once the structure felt right on paper, I shifted to shaping the visual language that would define the experience.

Before jumping into high-fidelity design, I built a UI kit to define the visual language of My Top Movies. I focused on bold typography, vibrant accents, and modular components that felt modern, clean, and expressive — aligning with the app’s playful, opinionated tone while ensuring visual consistency across every screen.

Ui Kit

With the UI kit in place, I translated my ideas into high-fidelity wireframes. This step brought structure and style together, allowing me to refine layout, interaction, and flow — ensuring each screen felt purposeful and aligned with the uplifting Just One experience.

Hifi Wireframes

uig.png
cc.png
qqz.png
qwertg.png
1234.png

View Prototype

These high-fidelity wireframes brought the app to life — clean layout, bold visuals, and purposeful interaction. Every component was designed to support fast ranking and clear decision-making, making the experience feel fluid and satisfying.

With the experience fully mapped, it was time to test how it held up in real use. I ran iterations focused on usability — refining touchpoints, reducing confusion, and making sure My Top Movies felt just as intuitive in action as it looked in design.

Iterations and Testing:

Once the high-fidelity designs were complete, I moved into usability testing by interviewing and observing real users as they interacted with the prototype. The goal was to uncover friction points, see what felt intuitive, and hear honest reactions to the flow and features. I combined task-based testing with quick interviews to get both behavioral insight and verbal feedback. These sessions revealed what was working and what still needed refinement — helping me prioritize meaningful improvements backed by real usage.

To clearly capture insights from these sessions, I created a scorecard to track task success, timing, and direct user comments.

Usability Test Scorecard

From this testing, it became clear that while users found the core flow intuitive, there were meaningful opportunities to improve personalization and motivation. I focused my iterations around three areas that directly addressed user feedback: adding more control with alarm customization, enabling recurring alarm scheduling to support habit consistency, and improving progress tracking visuals to keep users engaged and aware of their growth. These changes were designed to make the experience feel more supportive, flexible, and aligned with real user needs.

Iterations

1. Confirm Save Interaction

Users mentioned feeling unsure if their updated movie rankings had been saved, especially after rearranging items on the list. To address this, I introduced a confirmation modal that appears after making changes. This simple interaction reassures users that their actions were successful, while adding a layer of clarity and control to the overall experience — enhancing trust without interrupting flow.

Conclusion

Designing My Top Movies was about more than building a ranking tool — it was about creating a personal, expressive experience that encourages users to reflect on the movies that shaped them. Every decision, from visual tone to interactive flow, was guided by a desire to make sorting and reviewing feel effortless and enjoyable. Through testing, feedback, and iteration, My Top Movies evolved into an app that helps people define and celebrate their taste — one title at a time — and that’s exactly the kind of impact I aim to create with every project.

Next steps

  • Introduce smarter suggestions based on users’ past ratings and genre preferences

  • Add social features for sharing top lists and comparing with friends

  • Explore collaborative list-building for shared movie nights or group rankings

  • Continue testing onboarding and ranking interactions to make the experience smoother for first-time users

Key Takeaways

Simple, focused interactions (like rating one movie at a time) can keep users engaged without overwhelming them

  • Visual clarity and smooth microinteractions help build user confidence in editing and ranking flows

  • Real feedback surfaced unexpected friction, leading to helpful additions like save confirmations

  • Letting users personalize their lists reinforces ownership, making the app feel more meaningful