Cinemaniac - Movies & TV Series App (UI/UX Case Study)

Cinemaniac is an entertainment app for you to explore everything about movies and TV series, and news about it... and create playlists of that, rate it, follow friends, amomg other features.

Problem: There is no app dedicated to movies and series that is aesthetically pleasing and corresponds to the current needs of the user, who wants to keep himself informed and his contents of interest organized.

Challenge: To create a modern digital product, with a good user experience, allowing the user to access the content he wants in a fast and effective way.

I started by creating the visual identity of the brand, logo, typography, colors, icons. Then I focused on the visual presentation and aesthetics of the visible UI, mainly on the following elements: information hierarchy, color theory and application, typography, effects, and layout and visual composition. Paying attention to proper spacing between elements, good typographic implementation, good color application to create depth, among other aspects.

I designed low and high quality wireframes. And after all these steps I created the app prototype, using figma.

With the results of the usability tests I did with 27 people, I could identify some problems in the interaction, I could better understand the user's behavior, and realize where I had opportunities for improvement.

So I cleaned up and made the navigation more effective. I changed some aspects, took others out. For example, I removed a menu that I had called "Discover", which was for people to discover new content. Instead, I spread that possibility in several ways across the various menus, Home, News, Movies, and categories.

One of the things that after understanding the users' needs and current UI standards I realized would be interesting to implement, was the feature in the movie page, where by dragging the movie cover to the sides you can either rate the movie, or add it to your personal list. I also brought the idea of gamification, including levels of knowledge in the user's personal area.

Another important need that I gathered from the interviews, was that the user has difficulty knowing on which streaming service the movie/tv series is on. So I put that information and link on the movie/tv series page.

Please, try the prototype here: https://www.figma.com/proto/TN0R3xplXSuLA44fBRUZ6n/projeto-design-multimedia---cinemaniac?node-id=1-2&starting-point-node-id=1-2