top of page

UX/UI Design
 

Cine Connection
 

Social Movie sharing app

Untitled 2.png

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

Asset 23.png

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

Asset 20.png
Asset 21.png
Asset 22.png

UI Design Components

Color Palette

color pallete.png
typography.png

Typography

logo.png

Logo

nav bar.png

Navigation Bar

High Fidelity key-screens

feed.png
sign in.png
categories_edited.png
profile_edited.png

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.

Events Instagram Post in Black Neon Yellow Corporate Clean Style.png
feed.png

Clickable Prototype 

Click around the app here >

bottom of page