CineStar

In the digital age, people love talking about shows. For example, talking about the heartwarming bond in Friends, the tea in Gossip Girl, the scandals in Breaking Bad. People bond with through shows. Today, many viewers discover and choose shows based on their popularity and the traction they gain across social media platforms. Cinestar reflects this trend, connecting movies with social connection.

Problem

Hundreds of movies and television shows air each year on a multitude of streaming applications and in theaters. As the popularity of this form of entertainment continues to grow, it becomes more and more difficult to sift through what to watch. Often, people are only seeing the most popular films, barely scratching the surface of all of the content that is available.

Solution

We have utilized clear requirements, a structured method, interviews, and comparisons to create an application that serves as a solution for these problems. This application takes a unique approach for users to browse and save all of their movies and television shows in one place.

Process

My Role:

UI/UX Designer

Duration:

Original: March 2024 - June 2024
Redesign: Dec 2025 - Feb 2026

Tools:

Figma, VS Code

Research

User Interviews
Establish Requirements
Personas
Competetive Assessments

Design

Wireframes
Cognitive Walkthrough
User Feedback
Flow Chart
Interactive Prototype

Evaluate

User testing
Takeaways

Research

Interviews

Our app is garnered toward college students, and young adults of all backgrounds, who might be searching for something to watch in their free time. To get an idea of what this group of people might be looking for, we chose to conduct interviews of other college students or young adults, and ask them questions about what they would be interested in having in an application of this sort. Gathering information directly from the type of people we will be building this for, proved to be most effective and useful.

Based on input from our interviewees, we got plenty of good ideas and thoughts about what to include in our app. We found that the most important thing to them was an extensive filtering system. Most feedback we received was based on finding new ways to filter out movies and shows, to get the user something to watch that fits their mood perfectly. We also found that people would like pieces and parts of other applications they use on a daily basis for other mediums - such as reading or music streaming - included in an app for films and shows. We got suggestions for playlist-like groupings of shows/movies based on mood, a tagging system for finding shows with similar themes or tropes, and even a “Goodreads”-like function where you have a journal of what you have watched and want to watch.

Establish Requirements

Our Application Must:

- Allow the user to easily access video media data
- Allow user to use filters to narrow their search
- Provide search function for user to find video media based on keywords
- Users can find newly released media
- All information featured on site is up to date and correct
- Information is clear and well organized for the user
- Important information is easily accessible on video media description page: Title, Director, Time/Length, Year released, Cast, Rating

Our Application Should:

- Encourage engagement between users and video media
- Allow users to leave reviews and ratings for video media the user has watched
- Allow users to organize video media in their own custom lists
- Allow smooth interaction with other users
- Allow users to see reviews and ratings from other users
- Allow users to see other users’ lists
- Allow users to add other users to a “friend list” for easy accessibility to other user profile 

Our Application Could:

- Allow users to create custom tags for video media
- Allow users to better organize their video media consumption
- Users can section video media into three categories: “Want to watch”, “Currently Watching”, and “Watched”
- Reel type experience
- Expand user’s video diversity

Competitive Research

Letterboxd

Letterboxd is an online social network created for users to catalog films they have watched, save films they want to see, and share their taste in films with friends.

+ social media app
+ interact with friends

- cluttered with ads and excessive information

Netflix

Netflix is a subscription-based streaming service that provides users with TV shows, movies, and other entertainment content.

+ algorithm geared for the user
+ clean design

- harder to discover new media outside of user algorithm
- limited film selection

Rotten Tomatoes:

Rotten Tomatoes is an online platform for film and TV enthusiasts, providing a database of reviews and ratings from both critics and watchers.

+ unique rating system, combines reviews from professional critics and general audiences
- extensive amount of reviews to oversimplify nuanced opinions and disregard individual perspectives
- black-and-white scale of the "Tomatometer scale" with films being labeled either “Fresh” or “Rotten”
- it can be hard to capture the complexity of a movie, leading to misinterpretations of the film
- old-fashioned design

User Personas

Mary the Film Connoisseur

Background
Mary Smith is in her fourth year as a film student at the University of Iowa. In her four years here she has been actively involved in the Student Video Productions club on campus and works at Filmscene on the weekends. Mary is passionate about production and hopes to be a star director one day. Because of this, she watches productions nightly. Whether she is watching a critically acclaimed movie to study for class or one of her friend’s short films, Mary loves being engrossed in a good movie.

Needs and Desires
This user had several ideas on how to better cater the app to both film enthusiasts and casual viewers. She expressed a need for several filters and a search bar to discover movies in an efficient way. One of the filters she was particularly passionate about was one to discover movies during a specific time period. Mary explained to us that many people enjoy seeing the newest movies coming out, whereas other people aim to see movies from a particular decade for the purpose of nostalgia. She also mentioned adding a section where users could discover independent movies that do not have as many accolades, but are still quality films.

Context
The aesthetic of an app is important. Mary emphasized that her generation is drawn to apps that have an easy-to-use, aesthetically pleasing interface. This is a necessary feature to gain as many users as possible. A modern, sleek design that promotes the same comfort and high emotions as watching films is a must. Presentations involving the app should be engaging and set in a comfortable place.

Jacob the General Show-Watcher

Background
Jacob Johnson is a freshman in college and is busy getting used to his new life with new challenges. When he has free time during his day, he will sometimes spend it watching a show in his dorm room. He would utilize an app that shows him where to find a good show based on ratings, that is available in the streaming services that he currently has. 

Needs and Desires
Jacob isn’t crazy about shows or movies, but he would like an app that would show him what is currently trending and has good reviews. He thinks it would be nice to have an app with lots of filters, to cater to finding a show or movie for the night. A couple of things he would prioritize are ratings/reviews and maybe a time filter so he could find something to watch in the amount of time he has. He sometimes can get sucked into a show or a movie series when he is free on the weekends, and would like a way to find shows when he is having a day like that. 

Context
For Jacob, he finds that he only uses apps that are intuitive and easy-to-use. He isn’t super technologically literate, so he doesn’t like when an app takes a long time to figure out. Especially since he isn’t super into shows and movies, he would likely only use an application that is easy and provides lots of options to watch right away. He generally watches things that are popular and trending, and doesn’t get too deep into niche shows or movies that have specific themes. 

Sarah the TV Show Binger

Background

Sarah Beckman, a high school senior, is a social butterfly. She’s currently in the theater club at her school.  She loves chatting about new movies and shows with her club friends. With college applications done and easy classes this semester, she's got plenty of free time on her hands.

Needs and Desires
Sarah stressed the importance of a watchlist feature, where users could add shows they plan to watch. She also likes when streaming services show shows similar to the show she just watched when she finished it. She stated that these features allow her to smoothly continue her tv show binges. She said that it was really disappointing to watch a final episode of a show and that these features would help users quickly find a new show to binge. A section that showed new and trending shows was also important to her. 

Context
According to Sarah, it’s really important that the application she uses to find new shows is current and up to date. The application needs to be consistently updated with new released media. Part of why Sarah likes to binge watch tv shows is because she likes talking about them with her friends. So, it’s important for her to keep up with the new shows coming out. 

Design

Final Design

Original Design

This project began as a group assignment in my Human-Computer Interaction course. I was particularly drawn to the concept, so I decided to revisit and refine the design beyond the scope of the class. Through this project, I gained valuable experience applying the UX design process, from user research and ideation to prototyping and evaluation. As part of the course, my team also developed a functional implementation of the application using HTML, CSS, and JavaScript, allowing us to translate our design decisions into a working product.

Evaluate

Cognitive Walkthrough

- Users found the collections feature difficult to understand and navigate intuitively.
- The filtering interface felt cluttered, and users wanted additional tags to improve content discovery.
- Participants suggested adding an introductory landing page to better showcase key features and guide first-time users.

Key Takeaways

Limit Scope

During the design process, my group determined key concepts to focus on then created a design with room for flexibility. However, I think our group should have thought more about the coding aspect when creating our design. Once we began coding, it became clear that we may have set our expectations too high. We became caught up with our lofty ideas. But, because of the flexibility we allowed for in our design, we were able to make changes and pivot in slightly different directions.

Collaboration

I learned how necessary collaboration is. We initially assigned different parts of the website to each group member, but found that we needed to help one another with several of the functions in order to complete our project

Record & Reflect

Reflecting through writing helped identify areas for growth and future improvements. It was helpful to have a clear timeline and phases to guide us, in order to understand the process of building a website and to keep our group going at a reasonable pace.

Moodle Analytics DashboardDiaquest