Embedded Files
Socializing movies.
Socializing movies.
Introducing Cineverse, the perfect app for movie lovers! Cineverse is designed to provide users with a seamless movie-finding and booking process, making it easy for you to plan your next night out. With features like splitting payments, ordering movie snacks on the app before you arrive, and social features that allow you to watch trailers with friends, vote on movies and discuss the movie you're about to see or already watched, Cineverse is the perfect way to upgrade your movie-going experience. With Cineverse, you'll never have to worry about the hassle of booking tickets or finding the perfect film again.
Click here if you would like to see the prototype and use it yourself!
Overview
Overview
Background:
This project started out as an app prompt from sharpen. As soon as i saw the prompt, "create a movie trailer app for a movie theater," i felt drawn to create a product that fit. In university, my major was in film, so film has been a part of my life in a big way. For this prompt, I created a brand and conducted several rounds of research to give me an understanding of the competition, who my target audience is and what their pain points are, so that i can have an idea of where to begin when it came to designing a product.
Role:
Product Designer
Visual, Interaction and Motion Designer
User Research
Prototyping
The Problem:
People who are busy don’t have a straightforward way to watch trailers and arrange tickets, share/join in on plans with groups or have an open discussion about different movies
Timeline:
February 2022 - March 2022
Goal:
Design an app for ‘Cineverse’ to take users through a simple process of watching trailers and booking tickets, allowing them to easily make joint plans with friends and socialize in app
Research
Research
User Research:
Going into this project, i had the assumption that everyone would have the same problems that i have when looking for movies to watch. That they would get overwhelmed with choice.
So i conducted multiple interviews with a range of different movie lovers and everyone mentioned many other points that i didn’t even think about. Such as saving time and wanting to better their social life. It really opened my eyes to the fact, we’re really designing for a wide range of people and have to keep their points front and center.
Personas
Personas
Steve
Steve is an older movie enthusiast that loves spending time with family. He wants to be able to find out what movies are on at his nearest cinema, and purchase tickets for his family and have it be a straightforward easy process as he isn’t tech savvy.
Michelle
Michelle is a busy working adult that enjoys escaping into movies and watching with friends. She wants be able to quickly join in or to arrange plans as she usually doesn’t have much time to do so.
User Journey Map
User Journey Map
Mapping out Steve’s User journey showed how a beneficial it would be for a user to have a easy straightforward user experience from the Cineverse app
Competitive Audit
Competitive Audit
I performed an audit of competitors products and services to aid in the development of the 'CINEVERSE' app. The audit provided us with gaps in the market and opportunities to fill them with 'CINEVERSE'
Low-Fidelity Designs
Low-Fidelity Designs
Paper
Paper
Rough design
I started by creating an overview wireframe that displayed all the pages i could think of that i wanted to include at the time and i created a very rough design for them .
Focused design
Next i went through the rough design and one by one created iterations of individual pages. Choosing what i thought worked well or what needed to be improved
Digital
Digital
First Iteration
I wanted to base my design on user research right from the beginning. With this first wireframe i wanted users to find what they were looking for as soon as they open the app
I used sizing to make aspects stand out to the user. Since its a movie app i wanted those features to be front and center
I didn’t want users to have to do one thing to access another so i wanted to use buttons to give them options for quick and easy access
Second Iteration
Ease of access was key. I looked for ways to save the user time and found that nav bars and the ability to sign in can help. This way they don’t have to swipe for ages to find what they like, instead it's all in one place and in some cases, the app will already know what they like and show them.
Low-Fidelity Prototype
Low-Fidelity Prototype
After completing the first draft of wireframes, i created a Low fidelity prototype to show the main user flow of watching a trailer to buying tickets and navigating around. I then conducted a usability study to see areas of the flow to refine.
This was my first project and the one where i realized Interaction design was my favorite part of the design process
CLICK HERE If you want to try it out!
High-Fidelity Designs
High-Fidelity Designs
Prototype
Prototype
After creating the flow in the first prototype and confirming a usability score with users, i went and made a new prototype with the new designs, recreating certain aspects of the flow and fine tuning the connections and animations.
CLICK HERE if you would like to try it out!
Iterating on Designs
Iterating on Designs
After completing the first usability study, i came up with the Version 1 designs. But as it's known, one is not the end. So, i conducted another usability study to see if the areas i improved after the first study had been successfully addressed. Below are High Fidelity mockups show casing my design choices before and after the second usability study
(Version 1)
Home Page
Changed colours from blue to purple
Added film categorization
(Version 2)
Home Page
Darkened the purple which gave it a sleeker feel
Added recommendation features
changed menu button
made nav and logo bar smaller
(Version 1)
Trailer Page
Added page titles
(Version 2)
Trailer Page
Some users described the page titles on some pages as blocky and distracting so i tucked it away a bit
Added cast and reordered the movie description for a cleaner feel
Accessibility & Inclusion Considerations
Accessibility & Inclusion Considerations
When designing the app, i wanted to ensure that users of various abilities and backgrounds abilities would be able to use it without issue.
I included a light/dark mode switch so that users with any visual impairment that causes issues with light sensitivity can switch to a darker version of the app and navigate more comfortably
i included language options here and in the menu in the image on the left so that users can navigate the app and find movies in their native language.
I also added options for users who are deaf/hard of hearing or visually impaired so that they can find movies with subtitles or audio description
I included an embedded map from Google that will allow users to see locations that are good for people that require mobility assistive devices such as wheelchairs and prosthetics
With the colour scheme, i took into account people with different types of colour blindness. So i chose colours that aren't difficult to differentiate. I also made sure use colours that pass the Web Content Accessibility Guidelines (WCAG). My colour scheme has a contrast ratio of 14.99:1, which means the two main colours are light and dark enough to be able to receive on screen information easily.
also have plans to make it possible to operate the app and search functions through voice.
Conclusion & Takeaways
Conclusion & Takeaways
Lessons Learned
Lessons Learned
While designing this app and conducting research, i learned that keeping your designs user centered really helps improve every iteration. I had a lot of fun doing this project and will definitely take it further. This was my first full project using figma and it was a learning process but i'm always looking to learn and will continue to learn, design and iterate!
Two quotes from user feedback
Two quotes from user feedback
“i really like the features, i feel they really help with immersion and getting people excited for the movie experience”
"as someone that doesn’t usually use apps, it showed me how useful apps can be. I can see how it is functional and meets the purpose it was designed for"
Thank you for checking out my case study for Cineverse!
To check out other projects, click the button below!
Page updated
Google Sites
Report abuse