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
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.
Low fidelity desktop mock-up
Low fidelity mobile mock-up
UI Design Components
High Fidelity Mock-ups
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
Clickable Prototype
Click around the app here >
