Logo
Nordiske Film
Biografer
Which cinema would you like?
Cinema web-app wireframes 2.0
Hello! I'm David, and I'm pretty new at this. I learn by doing and from getting feedback on my work online. Feedback is highly appriciated.
These are the wireframes for the mobile version of a cinema website. This is an unsolicited project for my personal portfolio. The actual site services 22 cinemas across the country. My prior research shows that people go to such a website to do one of three things.
1: To see what movies are showing currently
2: To see what movies are coming out
3: To order a ticket
The reason that I propose a splash screen is because I make two assumptions.
1: Most visitors to the site already know in which geographical area they want to to go to the cinema
.
2: In most instances, on a return visit to the site, people go to the same cinema that they did the first time.
Of course, these assumptions aren't always true. The choice of cinema can be changed through the drawer menu.
Name
Log in / Log out
Bonus Points
FAQ
Contact Us
My Tickets
Transaction History
Sign up
Change cinema
THE SPLASH
The country has been catagorized into regions. These catagories are culturally general knowledge. The cinema names are based on city, associated building or name. I have kept the catagories from the existing design.
This card pops up when you click a region. The user then chooses and enters the site. The choice is remembered for repeat visits.
København
Jylland
Sjælland
Fyn
Øer
Dagmar
Falkoner
Field's
Lyngby
Palads
THE PAGES
Logo
[Cinema name]
Tickets
Upcoming
All
Action
Drama
Comedy
Horror
Title
Runtime
8.5
Title
Runtime
7.4
Title
Runtime
Title
Runtime
9.2
5.1
There are two main views. "Tickets" and "Upcoming".
Users first see the "tickets" tab. This has a grid view of the posters of current films showing. Directly below are some filtering options. I will probably make the tabs larger.
Tickets
Upcoming
Film poster
Film poster
January
Upcoming
Movies l Events
16/1 Title
18/1 Title
Film poster
21/1 Title
Film poster
30/1 Title
Tickets
Upcoming
Upcoming
Movies l Events
E-Sports 15/1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor.
January
Baby Event 19/1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor.
The drawer menu.
This is where the user finds the "change cinema" option at the top, as well as other useful features.
The toolbar.
The toolbar displays the name of the cinema selected. Clicking the name (or selecting change cinema in the drawer menu) allows the user to change to a different cinema. The toolbar hides when scrolling down, and reappears when scrolling up.
"Upcoming" covers upcoming MOVIES and upcoming EVENTS.
They each have different layouts, but like the rest of the site, they both encourage scrolling. Movies coming out seems pretty self-explanatory, which is why I propose a grid with posters.
Events require a bit of an explanation, a long with an image to give the user a peak into what they can expect from the event.
BUYING A TICKET
Nevermind
TITLE
Cinema
13. January
21:30
3 Seats
Pay for tickets
at cinema
Reserve
Pay for tickets
now
Buy
You now have two options
Nevermind
Let's go!
3 Tickets = 315 DKK
Pick your seats
8.5
2h30m l Action, comedy
TITLE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.
MON
13. Jan
TUE
14. Jan
THU
16. Jan
WED
15. Jan
FRI
17. Jan
SAT
18. Jan
DATE
TIME at [cinema name]
17:30
19:30
21:30
22:30
Nevermind
Let's go!
ALL DONE!
Logo
[Cinema name]
Tickets
Upcoming
All
Action
Drama
Comedy
Horror
Title
Runtime
8.5
Title
Runtime
7.4
Title
Runtime
Title
Runtime
9.2
5.1
This is where I take you through the process of ordering a ticket.
My goal was to make the process of ordering a ticket as easy as possible by making each choice easy and by having as few steps as possible.
Thank you so much for taking your time to look my project over. Feedback would mean the world to me. PM me, or email me at david@davidskodt.com
A wild progress bar appears!
The amount of tickets is determined by the amount seats selected.
Users can drag across a row if they choose.
For the largest of theatres, I imagine choosing a zone to zoom in on is a better choice than trying to make a choice
I know that there is a step "missing".
I chose not to dive too deep into accounts and payment to save myself time and to put my focus elsewhere. Ideally, the process should be easy, information inputs should use native functions, and the site should accept any format the user throws at it.
Reservations can be made with email or phone number.
Tickets should be immidiately visible as long as relavant.
The existing site makes it really difficult to find tickets you've already ordered. Fixed it. I hope.
Logo
[Cinema name]
Tickets
Upcoming
All
Action
Drama
Comedy
Horror
TITLE
Århus C
13. January
21:30 (ends 22:30)
Row 6, seat 1, 3, 5
The dimensions I am working with are 411x731 dp.
That's the size of a Nexus 6 or Google Pixel
I want to focus on mobile, for now.
The web-app should be responsive
Use my location
I havn't quite decided what type of interaction that the switch between these two will be.
Either way, I will make sure that it is clear that it can be interacted with.
Selecting an event will take a person through the same process as when ordering a ticket. See below.