UI/UX design process for a Movie Booking App for Flickbay
Important Links
- Wireframes: https://sketch.cloud/s/9lQYx
- UI Design file: https://sketch.cloud/s/713Zb
- Interactive Prototype: https://sketch.cloud/s/Mm31w/all/1-movies-discovery/1-1-movies-home/play
Concept
Flickbay is a movie ticket booking service, providing bookings in all theaters across the country. Design the booking flow screens for a user to book seats for a movie through the app.
Persona Definition
Conversion Goals
- Book movie(user already know which movie he wants to book) tickets within 45 seconds.
- Add movies into a wishlist.
- Quick way to search for a Cinema.
- Hassle free selection of seats.
- Manage movie tickets within the app.
- Look at movie trailers and movie details such as rating, cast etc within the app.
Ideation Process
Once the Persona and Goals for the app has been defined, it’s time to ideate about the app starting with the user-journey of the app. I generally use tools such as Balsamiq Mockups to quickly create low fidelity wireframes for ideation process but because of the lack of time, this time I used only paper sketches for this part.
In the current design, I’ve made few assumptions and have skipped few screens. I’ve started designing from Movie Discovery screen and I’ve skipped the Login/Signup for this prototype. However, if I’ve to do the signup process, the flow would be something like Sign up with Mobile number -> Take user preferences such as Genre Preference, Show Time preference, Language Preference. So, the movie discovery screen is also designed under these assumptions that we’ve already asked users about their preferences and we just need to give them a quick way to change preferences.
I referred already famous apps such as BookMyShow, Paytm and PVR app as a benchmark and also referred to www.dribbble.com for some fresh ideas.
Following are few images/rough sketches of my ideation processes:
High Fidelity Wireframes
During this part, I basically finalized everything starting from layout to icons except the images, final content and branding. Wireframes helps to find out any usability flaws in the structure of the app. Once the wireframes are done, I used Sketch’s prototype option to quickly make a clickable version of the small user flow to test it. Following are the wireframes of couple of flows along with the clickable prototype in the end.
The complete sketch file of wireframes can be viewed and downloaded using the link https://sketch.cloud/s/9lQYx . Please have a look at the file to understand how I organize my files.
1) Movie Discovery Flow:
I’ve provided user the options to change their location, see their favorite movies list and change their movie preferences within this screen itself. Also, there is an easy way to change filters applied.
2) Movie Booking Flow:
Booking flow starts from selecting a movie, then choosing preferable Cinema and time, then selecting seats and making payments. In the end of the flow, a ticket is generated which user can access anytime.
UI design
You can find the complete sketch file for UI part at: https://sketch.cloud/s/713Zb
1) Light vs Dark color scheme
For the Flickbay, I had two options: Either to go with darker color scheme or choose the Lighter. From my observation on the branding of Flickbay, I liked lighter version because it enhances the Flickbay logo. The darker background seemed to me creating noice for the Flickbay logo.
2) Movie discovery and Filters:
3) Movie Booking Flow
Prototyping
I usually prefer to make high fidelity prototype on a tool more powerful than sketch prototyping or Invision. I use proto.io but for this project, I have to use the sketch prototyping only because of the lack of time.
The final interactive prototype can be accessed at: https://sketch.cloud/s/Mm31w/all/1-movies-discovery/1-1-movies-home/play
