top of page

CINEPHANT

I love movies, and I have always been a huge film buff, both as a filmmaker and film lover. I believe movie theaters are magical, holy places, and we should go there and interact with other people. However, we need a movie ticketing app to find the best place to watch movies and easily buy tickets. When I use movie ticketing apps, I notice they are complicated, dark, and confusing.

Overview

That is why I created my movie ticketing app to make it easy to choose a movie, a theater, and order tickets.

iPhone 11 Pro Mockup.jpg

During my research, I found that some participants don’t use movie ticketing apps or just temporarily download an app because they don't have a clear reason to use them. They also cited terrible payment and usability experiences. 

Problem Statement
Solution
The “CINEPHANT” app offers multiple payment options and and thoughtful UX. 
My Role

UX designer

 

Timeline

Two weeks

 

Tool Used

Pen and paper

Figma

Adobe Illustration

Project Type

Personal Project

The Design Thinking Process 

Empathize

Define

Ideate

Prototype

Test

Competitive Analysis

I evaluated FANDANGO, ATOM, and AMC. I use these apps often and dove into their design and features.

Most features among competitors were similar; the main differences were:

– Easily accessible vs. not easily accessible

– Complicated screens vs. simplified interaction

– Dark / distracting Interfaces vs. minimalistic bright interfaces

– One payment option vs. multiple payment options.

Fandango_2014.svg.png
amc.png
atom2.png
User Flow
userflow.jpg
Interviews and Empathy Maps
Research

I did my research with five participants. I used my social media accounts to find people.  All of the participants were from different backgrounds and industries, and the age range was between 25 and 55.

I asked the following questions:

  • What is your expectation from a movie ticketing app?

  • What do you usually check before making a movie purchase?

  • How long does it take you to get a ticket?

  • What is the problem you face when buying tickets?

  • Do you think apps are easy or difficult to use?

I got different responses from the participants:

  • "I want to choose my seats quickly!"

  • "Some of the apps have complicated interface."

  • "I'm hesitant to use my credit card, and some apps don't accept PayPal or Venmo!"

  • "I'm especially looking for IMAX and Dolby sound system."

How Might We?

I used "How Might We" questions to open the brainstorm session, it allowed me to explore helpful ideas to solve the design challenges.

• How might we improve the user flow?

• How might we implement multiple payment methods?

• How might we keep the users engaged with the app?

diagram.jpg

I used an affinity diagram to separate the data into groups of tasks which were further categorized by high-level goals for improvement Paint Point, Goals, Suggestions, Satisfaction, and Habits. Recognizing the conflicts of interest from each participant allowed me to focus on shaping user goals and how those goals would in turn also affect the business' goals.

User Pain Points
Payment

Limited payment options

Usability

Complicated and slow payment flow

Information

Unnecessary information about movies, discounts, and commercial.

                                                                   

I created two personas. They both come from different backgrounds, and love to watch movies every day.

Persona
son2.jpg
selo twice.jpg
Wireframes
                               

After sketching some paper wireframes, I finally came up with improvements that addressed the users' paint points.

wire frame 2.jpeg
Creating the Logo

The elephant logo was born from a play on words in two different languages. In Turkish (I'm from Turkey), "cinephile", is written as "cinefil". And "fil", happens to mean elephant. 

I liked this play on words, but after talking to users I saw that people rarely saw the connection. So, I changed the name to "Cinephant". 

fil.jpeg
LOGO PAGE copy.jpg
wireframes cinema app.jpg
Low-Fidelity Wireframes
Usability testing

I shared my low-fidelity wireframes, and got further feedback.

  • Users want to read and explore the sections.

  • Users want a quick and easy flow to purchase the movie.

  • Users want to see more payment options.

  • Users want to mark and list their favorite movies.

  • Users want more visual options as an  IMAX or  3D.

mobile-usability-testing-lead.jpeg
hig fidelity cinema app_3x.jpg
High-Fidelity Wireframes
Some Experiments

Before my final prototype, I tried a lot of different design styles. Sometimes I changed the color, image, background, and some features. At one point, it was tough to decide which design I should keep. After looking back at my goals, I reduced some ideas and pages and honed in on what was most relevant.

Landing page.jpg
Showtimes.jpg
Movies.jpg
Pick Date Page.jpg
Details.jpg
Add ticket.jpg

Testing

After completing the revisions, I updated my prototype with the revised design.

Key Learnings

Cinephant was my first UX project.  As a filmmaker, I put my heart into it.  I spent two weeks bringing my ideas to the page. I did a lot of research and watched a lot of design tutorials to make this happen. I was trying to share my vision with my participants. This was my first time using the goal-directed design process, and I can see it being useful in future projects.  HMW processes help me understand users and their problems better.

bottom of page