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

Email

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.



u364_seg0 u364_seg1 u364_seg2
u366_seg0