OVERVIEW

Jineplex

Jineplex is a great app where you can purchase movies tickets in all local Jineplex cinemas! Buy new tickets as well as the used one to add to your collection. Choose a movie and the best seat locations, receive a ticket, scan at cinemas and enjoy the movie!


/ ROLE

UI/UX

/ TEAM

Jason Chong

/ TOOLS

FigmaPhotoshopIllustrator

/ DURATION

1 day

Need

Problem

Movie goer needs a repeatable mobile method to browse and purchase movie tickets on the go because they don’t always have a desktop computer available to them and they are afraid that movie tickets may sell out before they arrive at the theatre.

Solution

Product

Mobile Application that allows user to browse through different movies and buys movie tickets.

Target

User base

User who goes to this movie theatre to watch movie

Jineplex

A native application that offers user to buy tickets at nearby theatres

See my design decision

Planning

Time frame

Understanding the primary goal is to complete within the time frame of 4 months I kind of divide the whole process and show you how I think this project would go within the 4 months duration.

Me and my team would start off by understanding the challenge and the problem, what are we trying to solve and achieve with the end product. The main goal is to create a mobile app to browse and purchase movie ticket on the go.

We would also set deadlines on different phases of the process and also assign different roles to different team members. So that would take about a week or less.

Research

Who am I designing this for?

I took a lot of assumption due to time limitations of the project. Usually the research phase would take much longer, but in this case I took about 40 minutes to brainstorm the type of the users whose goals and characteristics represent the needs of a larger group of user.

I created user persona to help me to create understand and empathy with the end users.

Thanks to personas I can understanding who I am designing this for. The goal is to design a product that satisfy users’ needs and solve their concerns and meet their expectations.

I took a lot of assumption due to time limitations of the project. Usually the research phase would take much longer, but in this case I took about 40 minutes to brainstorm the type of the users whose goals and characteristics represent the needs of a larger group of user.

I created user persona to help me to create understand and empathy with the end users.

Thanks to personas I can understanding who I am designing this for. The goal is to design a product that satisfy users’ needs and solve their concerns and meet their expectations.

So Hugo who is very immersed in world of cinema, and it’s definitely important for him to receive alerts on upcoming movies, and it frustrates him that he can’t be one of the first few who watch the movie before his friends.

Angela who is always commuting to school, she love to watched movies but she always missed the time to grab tickets because she doesn’t always have her laptop with her. She is also the type that watch movie that based on ratings. 

And Joseph is a dad that love to bring his kids to the cinema, he wants to quickly and filter out movies that are suitable for his kids to watch. He is also very busy, and would like to quickly find the suitable movie playing at theatre near him. 

Requirements

How does the app works?

With all the data I kind of gathered I set the requirement on what particular functions I should divided into when it comes to the iteration phase.

A best way for me to understand the challenge was to also compare the different movie apps and see what they are doing good on and stuff that can improve. In this case I looked at Cineplex, and other movie theatre app at other countries.

Then it comes to the whole architecture on what the platform should include.

We would jump back into the research and understanding phase at any time if needed, but after that it

When it comes to the wireframes, and prototyping, there would be a lot of user testing, and working closely with developers to see if there are things that are possible to build or not. So this part might also with the technical research. 

This is the part where I try and feel how the app should look like with in wireframe. 

High Fidelity

Making everything pixel perfect

With the wireframes built I start applying colours and details to the high fidelity design. And this is the final outcome of the project.

Why this and why that

Decision making

The reason why I put the search function and theatre location button at the top of the screen, is because based on the user insights and goal of this challenge, this is a common features that is used most users when interacting with a movie app.

Under it I included a promotional slider, where the theatre can put any sort of movie promotion or Half Price events or any relevant marketing banners which can help promotes a particular events.

Then under the slider, it shows movie that is currently playing now in theatre, and movie that are coming soon. User can horizontal drag the different movies, or click the see more button which shows the entire list with a filter option.

At the bottom, is a fixed menu bar that is there across the whole app which includes, the main explore page, theatres, your tickets, and accounts.

This can definitely be fine tuned, when the theatre decided what other functions they want to include in future. Features like Ordering food, or checking card balances. But for this design I just made an assumption that Jineplex don’t have that yet and would be further develop after this product is launched, since we only have 4 months at the moment.

Let say the user is searching for a movie and they tab the search bar, the search bar would animates and user would see this screen.

User then can either type on the movie, or tap the popular search filter hot keys under it, under it I also put some search suggestions, like nearby Cinema near the user and trending movies nearby, so the user can browse through if they are not sure what they are looking for.

And lets say the user know the movie and just typed “Jungle Cruise”. And bam the movie comes out, which gives a brief description on the movie genres, the duration of the movie and a rating from IMDB. 

Under it, you can see the showtime of the movie at theatre near you. It tells you a brief introduction of the playing time, which then you can dived into booking the movie right away.

This definitely saves time for people like Joseph, where he can go to the checkout page once the time and location match what he is looking for.

But if the user want to see more details on theatre that is playing, they can definitely do that by clicking the see all button.

And lets say the user just want to see what’s playing at the theatre, they can definitely do that by clicking the location pin button earlier, or they can click the theatre icon at the Bottom of the menu.

On the theatre screen, it shows the favourite theatre user bookmarked before, or nearby theatre, and last visit theatres. There you can also filter out the different theatre, or by typing your postal code or location at the top.

You can also see how far away the theatre away from your location.

At any time you can filter out the theatre by the different features they have. You might want to go to a movie theatre that only has D-box, or vip so you can do that with the filter function, and also see what’s playing at that theatre when you tap the theatre card.

At any time at the movie listing page from the main page, Now Playing or Coming Soon, the user can filter out the movie. The user can sort the movie listing by popularity, rating or new release.

And at the single Movie page listing, it starts with a trailer, or movie scenes, the rating pulled from IMDB. Movie descriptions, and then under it you can filter out the different time or location you want at the bottom.

For users like Joseph who are planning to buy more than one tickets, I put a features like a blue alert message at the time, where it tells the users theres only few spots left, so it can alert the user to book asap.

Once the user tap the time, it gives a brief intro on the time and location details of the movie user are booking. 

Then it shows a seat selection if the movie theatre has the options to choose seats. 

Then after is the payment process, which when the user successfully purchased the ticket, it will shows the ticket at the my Tickets page. The user can share the ticket to the people they are watching with, or add them into apple wallet. He can also get the direction to the movie theatre at the ticket page. When the user are at the theatre they can just have the staff scan their ticket on app and then the user can enjoy the movie. 

Through out the app, if the user set alerts on upcoming movies, or they purchased a movie, the movie will also send notification to user to remind them on the movie. 

If the user iPhone is set as a dark ui mode, the app would default go with the dark ui, but anytime the user can change the ui in the setting to a light UI.

The dark mode of the application allows user to focus more on the movie and content, and a more unique interactive experience.

Conclusion

Definitely if I have more time I would want to create every screen of the app, and I want to add features like membership rewards, food ordering features, and also a preview of the first 10 minutes of the movie if the user is late to the theatre.