Moviemark
Movie Dashboard
Team: (Personal Project)
Role: UX/UI Designer
Time: 2024
“Moviemark” is designed for movie enthusiasts to seamlessly track their viewing habits, discover new releases, and manage personalized watchlists. The intuitive analytics and visualizations enhances their movie-watching experience and engagement.
INTRODUCTION
A Cinematic Dashboard for Movie Lovers
The goal of this project was to design a tablet-sized dashboard focused on data visualization with diverse measurable metrics. I chose movies as the theme due to my passion for cinema and the challenge of managing my viewing records and tracking new releases. This dashboard aims to provide movie enthusiasts with a centralized, intuitive platform for organizing movie-watching habits and discovering new films.
THE PROBLEM
Managing Movie-Watching Challenges
Movie enthusiasts often face challenges in managing their viewing habits and discovering new films. Despite the wide range of streaming services and cinema releases, there isn’t a centralized platform to organize and track their movie experiences. Through research, I identified three main pain points for this audience:
Difficulty Tracking and Discovering New Releases: Users struggle to stay updated on the latest films across platforms, leading to missed releases.
Managing Viewing History: Many enthusiasts wish to archive and reflect on their movie-watching history, including ratings, genres, and favorite actors or directors.
Overwhelming Choices and Decision Fatigue: With so many options, users often face decision fatigue, making it hard to select what to watch next based on personal interests.
Corresponding Possible Metrics
This dashboard is both for movie lovers who go to theaters and those who mainly watch movies online.
Watch lists with progress;
Upcoming movies with ratings;
Movies watched: numbers by time periods / genres / directors;
Movie ticket prices;
... ...
TARGET USERS
For the Passionate Movie Buffs
The primary users of this dashboard are young adults aged 18-40 who are passionate about movies and enjoy both online streaming and theater experiences. These users are:
Movie Enthusiasts: They love discovering new films, revisiting classics, and keeping up with the latest releases.
Engaged Reviewers: Many enjoy rating and reviewing movies to share opinions and remember their viewing experiences.
Archivists of Viewing History: They want a way to keep track of what they’ve watched, including details like genres, directors, and personal ratings.
Data-Driven Viewers: They are interested in seeing insights about their movie-watching habits and trends.
This audience seeks a centralized platform that simplifies tracking viewing history, provides insights, and connects them with new movies they’re likely to enjoy.
DESIGN EXPLORATION
Light, Camera, Cinema
Ticket to Nostalgia
With a nod to classic cinema, this design uses film reel motifs on the opening page and a movie ticket shape for the main page. Popcorn icons represent metrics, inviting users to dive into the data with a sense of nostalgia and familiarity.
Opening
Homepage
Playful Cinematic Twist
This concept is all about fun and friendliness. The opening page features an animated eye blinking over the logo, setting a lively tone. A striped background and drink cup icons bring a casual, snack-friendly vibe to the main page, making data exploration feel more engaging.
Opening
Homepage
Spotlight Focus
Inspired by the ambiance of a movie theater, this design uses a dark background with a spotlight effect to display the dashboard logo on the opening page, giving it a theatrical touch. On the main page, lightbulb icons highlight key metrics, drawing the user's attention as if they’re watching a show unfold.
Opening
Homepage
FURTHER REFINEMENT
Bringing the Cinema to Life
Based on feedback, I chose to develop the first “light” design further, enhancing its immersive cinema atmosphere. I incorporated iconic movie elements—film reels, strips, popcorn, drinks, chairs, and tickets—to represent various metrics, creating a cohesive and engaging visual experience. Additionally, I designed a login page to set the tone right from the start, welcoming users into the cinematic dashboard experience. Each section of the layout was carefully crafted with a modular dashboard structure in mind, using well-considered margins and gutters to enhance readability and maintain a polished, unified look. This design now feels like a true theater-like experience, where each element contributes to the overall charm.
Opening
Login
Homepage
STYLE GUIDE
Lights, Colors, Action!
To ensure a cohesive and visually appealing user experience, I developed a comprehensive style guide matching with the cinematic theme.
Based on feedback, I replaced the initial "Bookman Old Style" font with Libre Franklin, a modern sans-serif typeface offering versatility and clarity across 9 styles. With a warm, nostalgic color palette and clean, it balances playfulness with functionality. Film-related elements like tickets and reels are incorporated to enhance the theme while maintaining visual harmony and usability.
FINAL DESIGN
Rolling the Final Cut
After the application of the style guide and some tweaks, the final design was completed.
Logo & Landing Page: A filmstrip-inspired logo is spotlighted on the landing page, simulating a theater ambiance with animated lighting.
Login Page: A clean, minimal design with warm colors maintains usability while staying on theme.
Homepage: The homepage combines playful movie elements like popcorn, reels, and tickets with functional sections for watchlists, new releases, and user stats. A simple onboarding tutorial introduces key features.
The design over all balances creativity and usability, delivering a vibrant and engaging movie-tracking experience.
Landing page
Login page
Part of the tutorial
Homepage