Seat Reservation App
A cinema seat-booking app concept that helps people find the nearest theater, spot discounts and book seats in a few taps, then enter with a QR-code ticket.
- Role
- Researcher, Designer
- Timeline
- Mar – Jun 2022
- Tools
- Figma, paper sketching
- Context
- Personal portfolio project · Istanbul
Guti is a cinema seat-booking app concept. It helps people find the nearest theater, spot discounts and book seats from their phone, then walk straight in with a QR-code ticket.
Overview
With Guti users can easily book seats for movies and theaters. The app is also hassle-free: people find a nearby cinema, pick a time and seat, pay, and enter with a QR code. The goal is to make going to the movies as convenient and enjoyable as possible.
What I did
- Researched the market with a competitive analysis of three existing cinema apps
- Built 5 user personas to understand needs and pain points
- Mapped the journey with storyboards and a user flow in Figma
- Moved from paper sketches to low-fidelity to high-fidelity designs
- Ran two rounds of user testing and refined the design after each
- Built a clickable, animated Figma prototype
The problem
People who try to book cinema seats struggle to find the nearest theater with the right showtime.
What is happening
- More and more people buy movie tickets from mobile apps.
- Many existing apps share the same issues: high service fees and poor-quality service.
What Guti aims to do
- Remove the problems users hit in current apps and make cinema services easier to reach.
- Make users happier by reducing the service fee.
- Help users find nearby theaters and the ones offering discounts.
Research
Competitive analysis
I identified competitors, studied their products and customer feedback, and compared them with what Guti could offer. This showed where existing apps fall short and where there is room to do better.
Cinemaximum
- Lets you reach nearby cinemas and find cheap tickets.
- Buy 8 tickets and get an extra one free.
- Sometimes you can’t see your ticket.
- Buying a ticket can fail.
Biletinial
- A third-party site selling tickets for many theaters, indie movies and venues.
- With a membership you can also buy tickets for sports, theatre, concerts and other events.
- The search feature doesn’t work.
- The app has too many errors.
Biletix
- Shows trailers and comments from different platforms.
- A strong all-round entertainment app.
- You can buy gift cards.
- Sometimes you can’t see your ticket.
- Buying a ticket can fail.
- No real mobile app: the app is the mobile version of the web page.
Who I designed for
I created 5 personas to understand users’ worlds and needs. Two of them are shown here.
Muhammed Rûdanî
Muhammed is a software developer just starting his career. He is passionate about learning and self-improvement, and spends free time at local coffee shops with friends and watching educational videos.
- Can’t find nearby cinemas with free seats.
- Afraid to buy tickets in cinema apps because of their errors.
- Find cheap movie tickets.
- Go to a movie using only his phone, without waiting at the box office.
Nalin Rupelda
Nalin is a mother of two daughters. She would like them to enjoy the cinema but wants to be sure they don’t see nude or violent content, so age-appropriate suggestions and clear ratings matter to her.
- Wants her daughters to go to the cinema but worries about nudity and violence.
- Wants to protect them from inappropriate content while still letting them enjoy films.
- Find age-appropriate films that match her values.
- Find other ways for her daughters to enjoy movies in line with those values.
Ideation
Storyboard: the big picture
Xebat is looking for a ticket to the latest Batman movie but can’t find a suitable time and place.
He remembers an app that helps people find the closest theater and book tickets.
He uses the “around me” feature to find the nearest theater.
He books tickets for himself and his girlfriend.
He books two tickets successfully.
He shares an image of the tickets with his girlfriend.
Storyboard: close-up
Xebat opens the app and logs in with just a few clicks.
A banner for the latest Batman movie catches his eye; one tap opens the movie details.
“Show on Map” lets him find the nearest cinema showing the movie.
He chooses a format: 2D, 3D or TORîMAX.
He enters card details, reviews his order and pays securely.
The app generates a QR code for entry, and he grabs popcorn on the way in.
User flow
I mapped the steps a user takes to book a ticket in Figma. This helped me spot potential pain points early and optimise the experience, alongside the competitor research above.
Design
Paper wireframes
I sketched each iteration on paper first so the digital wireframes would address real user needs. For the seat-selection screen I focused on a streamlined, intuitive layout where people can quickly review available seats and choose with confidence.
Low-fidelity wireframes
After testing the paper prototypes with users, I built low-fidelity digital wireframes and updated the design based on their feedback.
Seat selection
The seat screen is a vital step that shapes the whole booking experience. I used simple, modern elements such as colour-coded seat availability and easy-to-read seat labels, so users can see at a glance which seats are free.
High-fidelity design
In the second round of user testing I asked participants to buy a movie ticket: search for a movie, check theater locations and reviews, and complete the booking. This exposed some critical mistakes in my first design.
What testing changed
- Fixed the mistakes found in the booking task and added missing sections.
- Refined the icon design and corrected linking between screens.
- Used a high-contrast colour scheme, clear typography and simpler navigation.
Colors
Typeface
The quick brown fox jumps over the lazy dog. 0123456789
Prototype
I built a high-fidelity prototype in Figma with clickable screens and animations, so the booking flow and features can be tested like the real thing. Use the button at the top of this page to open it and share feedback.
Key takeaways
- Research came first: a competitive analysis and five personas shaped every decision.
- The design improved through iteration, from paper to low-fidelity to high-fidelity, with user testing at each stage.
- Testing the full booking task revealed real mistakes, which I fixed before the final design.
- Seat selection is clear at a glance, using colour-coded availability and readable labels.
- The result is a clickable Figma prototype with animations that anyone can try.