Graphic Illustrations
UX/UI Design
Cine Connection
Social Movie sharing app
Summary
Role: UX/UI Design
Company: Design Lab
Project Overview: A mobile app and website designed for movie lovers to connect, review and share their favorite movies.
Toolkit: Figma, Adobe CC
Project Breakdown
For my UI design course through the Design Lab, we were tasked with creating an app concept in order to understand the ins and outs of UX/UI design.
I created the app Cine Connect - A movie sharing app that wants to be modern but also bring back the vintage nostalgia of what it means to meet up with friends and loved ones and talk about a really good movie.
UX Research
Before working on the design phase, I conducted extensive user research to gain insights into the needs and preferences of film enthusiasts. Through interviews, I uncovered a common sentiment among users: a desire for more personalized movie recommendations, which were lacking in their current apps. Additionally, I discovered the significance of community engagement for many users. Integrating social features such as user reviews, ratings, recommendations from friends, and discussion forums emerged as crucial for enhancing engagement and providing valuable insights into movie choices. Lastly, users expressed interest in accessing movie news updates and exclusive content, such as interviews with actors or behind-the-scenes videos.
-
Intuitive search and filtering options for finding movies.
-
Personalized recommendations and curated lists.
-
User reviews and ratings.
-
A movie news feed
8 people were Interviewed, age ranging from 19 - 32.
Among them - people with varying levels of familiarity with movie sharing apps. This included avid movie enthusiasts who frequently use similar platforms, casual users looking for occasional entertainment, and individuals new to movie sharing apps seeking easy use and accessibility.
-
UX Overview
Based on these findings, prominent features to include should be:
Intuitive search and filtering options for finding movies.
Research Findings
Personalized recommendations and curated lists.
A movie news feed for social integration;
sharing and discussing movies.
User Flow
It was clear based off the research and findings during the UX phase that I needed to design a user flow before creating my wireframes.
Click to enlarge
Wireframes
Once I finished creating the user flow chart I started building my low-fidelity wireframes.
Key screens include: Sign in / Profile / Home / Categories / Feed
UI Design Components
Color Palette
250902
Primary
BA1200
Secondary
DA2C38
Typography
Logo
Navigation Bar
High Fidelity key-screens
Problems/Solutions
-
Intuitive search and filtering options for finding movies.
I tried to make the search functions and navigations for users to find diferent...
Users have convenient access to a search bar located on every page of the app. Additionally, a dedicated tab on the bottom navigation bar enables users to swiftly search for movie showtimes by theater location, movie title, and showtime preferences.
-
Personalized recommendations and curated list
When users first sign up they will be prompted to take a small movie questionnaire to get better aquatinted with the user, in order to recommend personalized movie suggestions..
-
A movie news feed for social integration; sharing and discussing movies.
To address the issue of social integration, a user feed has been implemented to facilitate interaction with followers. Within this feed, users can engage with their audience, share movie reviews, and post videos expressing their opinions on films or discussing various movie-related topics, including conspiracies.
Clickable Prototype
Click around the app here >