top of page

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 

For my UI design course through the Design lab school. 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.

Steps & Thought Process 

User 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.

​

Based on these findings, prominent features to include in the app could include:

  • Intuitive search and filtering options for finding movies.

  • Personalized recommendations and curated lists.

  • User reviews and ratings.

  • Social integration for sharing and discussing movies.

  • A movie news feed

Wireframes

I initiated the development process by creating wireframes. To kickstart the design exploration, I made basic, low-fidelity mock-ups, aiming to establish the framework for the app's layout. Starting with the mobile version, I reasoned that it's more efficient to scale up complexity than to simplify a design later. So once I was done with the mobile, I proceeded to develop the desktop version.

LF mock up.png
LF desktop wireframe.png

Low fidelity desktop mock-up

Low fidelity mobile mock-up

UI Design Components 

brand identity.png
desktop FINAL.png

High Fidelity Mock-ups

hf mobile mock up USE.png

Pain points/ Solutions

​

  • Personalized recommendations and curated lists.​​

After signing up users will be prompted to take a small movie questionnaire to better designed to get better aquatinted with the user after they sign up, in order to recommend personalized movie suggestions.

​

  • Social integration for sharing and discussing movies.

​

  • Intuitive search and filtering options for finding movies.

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.

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.

Final High Fidelity

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

Clickable Prototype 

Click around the app here >

bottom of page