MovieDesi App UX UI Design

movie desi cover image
The primary objective of this project is to develop a user-friendly and efficient mobile application tailored for Indian movie screening theatres in Canada. By incorporating features such as notify , seat selection and digital ticket delivery, the goal is to enhance accessibility and convenience for patrons, ultimately revolutionizing the way audiences engage with Indian cinema in Canada. I’ve decided to develop this project as a Figma clickable prototype. This approach allows me to showcase the app’s flow and functionality in an interactive manner.
As a part of my third-semester program in Emerging Multimedia, I am required to select a technology relevant to my field of study and intended career path for the future. Given my interest in pursuing a career in UX/UI, I have decided to design an app prototype  

WHAT was I AIMED IN THE FINAL PROTOTYPE

Key features and functionalities

  1. Browse Browse Movie Listings
  2. Showtime Selection
  1. Movie ticket booking
  2. Multiple theatres integration
  3. Movie description and cast information
  4. User accounts

Final Prototype  
Final high fidelity prototype screens designs
Landing Page
movie desi high fidelity screens
  • Detail
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
Login Page
movie desi high fidelity screens
  • Detail
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
Home Page
movie desi high fidelity screens
  • Detail
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
Theatre Page
movie desi high fidelity screens
  • Detail
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
Movies Page
movie desi high fidelity screens
  • Detail
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
Cast Info
movie desi high fidelity screens
  • Detail
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
Profile Page
movie desi high fidelity screens
  • Detail
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
Theatres Page
movie desi high fidelity screens
  • Detail
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
Movie Page
movie desi high fidelity screens
  • Detail
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
Booking
movie desi high fidelity screens
  • Detail
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
Payment Page
movie desi high fidelity screens
  • Detail
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
Student Profile Section
Old Version
Redesigned Version
humber current student profile before
humber current student profile after
  • Issues
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
  • Resolved
  • Added a button to access meeting feature
  • Simplified  card designing
  • Adjusted spacing between cards for pleasing look
Student Profile Section
Old Version
Redesigned Version
humber current student profile before
humber current student profile after
  • Issues
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
  • Resolved
  • Added a button to access meeting feature
  • Simplified  card designing
  • Adjusted spacing between cards for pleasing look
Student Profile Section
Old Version
Redesigned Version
humber current student profile before
humber current student profile after
  • Issues
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
  • Resolved
  • Added a button to access meeting feature
  • Simplified  card designing
  • Adjusted spacing between cards for pleasing look
Student Profile Section
Old Version
Redesigned Version
humber current student profile before
humber current student profile after
  • Issues
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
  • Resolved
  • Added a button to access meeting feature
  • Simplified  card designing
  • Adjusted spacing between cards for pleasing look
Student Profile Section
Old Version
Redesigned Version
humber current student profile before
humber current student profile after
  • Issues
  • Lack of meeting feature
  • Inconsistent card designing
  • Inappropriate spacing between cards
  • Resolved
  • Added a button to access meeting feature
  • Simplified  card designing
  • Adjusted spacing between cards for pleasing look

design process

design process steps

Empathize

Navigation
Accessibility
Mobile Experience
Responsiveness
Visual Design
humber current audit navigation
humber current audit accesibility
humber current audit mobile experience
humber current audit responsiveness
humber current audit visual design

Why I chose this theme?

As a movie enthusiast and an immigrant in Canada,I've encountered significant challenges in findingIndian movie screenings. The absence of a dedicatedapp and the poor user experience on existing websites led me to focus on this project.
The existing large theatres like Cineplex don't screenmany Indian movies, especially my regional films. So whenever I try to find information about moviescreenings, it takes a lot of time and effort.
“ Approximately 5% of Canada’s total population is of Indian descent, with Ontario accounting for around 13% of its population having Indian roots.”
humber craft competitor analysis

Findings

humber craft competitor analysis findings
humber craft competitor analysis findings
humber craft competitor analysis findings
humber craft competitor analysis findings
humber craft competitor analysis findings
humber craft competitor analysis findings

SWOT Analysis

I have selected two companies for SWOT analysis out of four options, which will be used for competitive analysis. They are:
Joss & Main
humber craft SWOT 1
Etsy
humber craft SWOT 2

Pain Points

After conducting an audit of the existing website, I have identified the following pain points.

Design Challenge

How might we design a more user friendly, consistent visual flow website for this product. How might we establish effective communication between students and graduates?

Possible Solutions

  • Redesign buttons, program and event cards , home page banner, student profile page etc.
  • Change the placement of sections; for example, the copy about Humbercurrent currently located in the footer should be moved to the banner section of the homepage.
  • Change stock photos/graphic designs especially program thumbnails.
  • Adding a meeting session feature so that aspiring students can engage in virtual meetings with current students.
  • Redesign the events section.
  • Adding a gallery page to showcase students' work.

Define

User Persona

My potential audience consists of individuals either of Indian origin living in Canada or those who have a passion for Indian cinema.

Target Audience

Apps used

  • Immigrant students, employees
  • 20-40 age group people
  • Indian origin community
  • Mostly tech-savvy people
  • Cineplex
  • BookMyShow
  • Ikea
  • Joss & Main and more..
Persona 1
movie desi user persona

Empathy Map

Based on the target audience and their application usage, I have created two user personas. I assumed that both personas belong to the student category, but from different age groups and educational backgrounds. These user personas are:
movie desi empathy map

Ideation

User Flow

Based on the target audience and their application usage, I have created two user personas. I assumed that both personas belong to the student category, but from different age groups and educational backgrounds. These user personas are:
movie desi user flow

User Journey Map

Based on the target audience and their application usage, I have created two user personas. I assumed that both personas belong to the student category, but from different age groups and educational backgrounds. These user personas are:
movie desi user journey

UI Kit

Based on the target audience and their application usage, I have created two user personas. I assumed that both personas belong to the student category, but from different age groups and educational backgrounds. These user personas are:
movie desi UI Kit

UI Kit

humber current UI kit
humber current UI kit
humber current UI kit
humber current UI kit

Low Fidelity Sketches

I have primarily drawn inspiration from Cineplex’s flow and navigation and adapted it to suit my requirements.
humber craft low fidelity sketches
humber craft low fidelity sketches
humber craft low fidelity sketches
humber craft low fidelity sketches
humber craft low fidelity sketches
humber craft low fidelity sketches

Prototyping

Mid Fidelity Prototype

humber craft mid fidelity screens
humber craft mid fidelity screens
humber craft mid fidelity screens
humber craft mid fidelity screens
humber craft mid fidelity screens
humber craft mid fidelity screens
humber current mid fidelity screens
humber current mid fidelity screens
humber current mid fidelity screens
humber current mid fidelity screens
humber current mid fidelity screens
Figma Prototype

Testing

Usability Testing

I have conducted usability testing with 5 participants for three specified tasks.
  • Participants

  • 5
  • Tasks

  • 4
  • Success Rate

  • 81%
Tasks:
  • Browse catalogue without sign in/ sign up
  • Browse and add to favorites
  • Add to cart and place an order
  • Search through text prompt or camera feature
I have received following feedback from testing
Based on feedback, I fixed the issues and created a high-fidelity prototype.

High Fidelity Prototype

movie desi high fidelity mockup
movie desi cover image
movie desi high fidelity screens movie desi high fidelity screens movie desi high fidelity screens
humber current cover image
humber current high fidelity screens

Figma Prototype

Reflection

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

View More Projects

humber current thumbnail

Humbercurrent Website Redesign

UX & UI
I revamped the Humbercurrent website, ensuring responsiveness across both mobile and desktop platforms.
View Case Study
humber craft thumbnail

HumberCraft iOS App Design

UX & UI
As part of my academic project, I was tasked with creating an iOS app for Humber College's industrial students venture, which specializes in selling furniture products.
View Case Study
kishansri logo