Movement

animation

User's hand

You are here

Film poster

Film poster

January

Upcoming

Movies

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida

Film poster

Film poster

Logo

Nordiske

Film

Biografer

Cinemas

Events

Upcoming

Tickets

Logo

Nordiske Film

Biografer

Choose cinema

Use GPS

Jylland

København

Sjælland

Sjælland og øer

Aalborg City Syd

Aalborg Kennedy

Århus C

Splash / Cinemas page.

You are immidiately asked to choose the cinema you want to go to. Pressing "Use GPS" will show a list of all the cinemas, ordered by proximity. The choice on this screen is saved for return visits. You can also return to this page by clicking "Cinemas" in the bottom navigation menu.

Name

Email

Log in / Log out

Bonus Points

FAQ

Customer Support

Contact Us

My Tickets

Transaction History

Biograf

Events

Premierer

 3.  4.  5.  6.  7.  8.  9.  10. 11.

Logo

Nordiske

Film

Biografer

Welcome

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

Pick Date

Film poster

Film poster

Cinemas

Århus C

Events

Tickets page.

This will be where you find yourself, if the site already knows which cinema you usually go to. The films should be immidiately visible. The "select date" is a horizontal drag interaction, very close to the center of the screen. Movie images are immidiately obvious.

Upcoming

Cinemas

Events

Upcoming

Tickets

Film poster

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.

Logo

Nordiske

Film

Biografer

Upcoming

Events

Film poster

January

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida

E-Sports

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.

Sports livestream

Cinemas

Events

Upcoming

Tickets

Biograf

Events

Premierer

 3.  4.  5.  6.  7.  8.  9.  10. 11.

Logo

Nordiske

Film

Biografer

Welcome

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

Pick Date

Film poster

Film poster

Cinemas

Events

Upcoming

Århus C

Tickets

Biograf

Events

Premierer

Cinemas

Events

Upcoming

Swipable carousel

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. Proin gravida dolor sit amet lacus accumsan et viverra justo.

Tickets

2h30m l Action, comedy

16:30

17:30

18:30

19:30

20:30

21:30

Logo

Nordiske

Film

Biografer

Århus C

Movie title

Click the seat(s) you want!

3 Seats selected

3 x 110,- = 330,-

Logo

Nordiske

Film

Biografer

Århus C

Cinemas

Events

Upcoming

Tickets

Biograf

Events

Premierer

 3.  4.  5.  6.  7.  8.  9.  10. 11.

Logo

Nordiske

Film

Biografer

Welcome

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

Pick Date

Film plakat

Film plakat

Cinemas

Events

Upcoming

Tickets

Århus C

Aliens 3

3/3/2017

Århus C

18:30 (ends 20:30)

Row 6, seat 1, 3, 5


Logo

Nordiske

Film

Biografer

Århus C

Cinemas

Events

Upcoming

Nearly there!

Reserve

Tickets

Buy

Great! Just to make sure...

Movie

Place

Date

Time

Tickets

Price

 

Aliens 3

Århus C

Today

18:30

3

330,-

 

NFbio wireframes

1: Overview - This is where I show you the main menu screens.

Upcoming movies page.

My research showed that, on the existing site, users (3/4) were unable to even find upcoming movies, in spite of it being the THIRD MOST LIKELY reason for the site visit (based on preliminary research). Nothing fancy here, just scroll to see upcoming movies, sorted by date.

Events page.

Very similar to upcoming movies, but with large headers placed before the image (by western reading direction) and a description, because "events" at a cinema are not self-explained like upcoming movies are. Clicking one will take you through the ticket-purchase process, as below.

Cinemas

Events

Upcoming

Tickets

This is the bottom nav.

The reason I chose this navigational style is simply because it is much more practical to access when using your phone. Ideally, I would like to have done an open card sort to figure out if the names of the menu items make sense, but that will have to wait for another project. Remember, the site is actually in Danish, so don't think too much about the actual labeling throughout. A hamburger menu at the very top of the screen allows users to access features like account information, support etc.. Each of these menu items will have an icon.

2: Scenario - This is where I show you the process of ordering a ticket. The user has not been to the website before.

1: Cinema choice

My primary persona is a little hesitant to let anything access his GPS, so he chooses the cinema closest to him manually. Note that this choice is saved, but can always be changed. By letting choose the cinema first, he gets confirmation that he is in the right place.

2: He picks his date, and film

I wanted to make sure that it was immidiately obvious where the films are, for what date you are browsing and rely on as few dropdown menus as possible. The movies change, depending on the date selected. Cinemas rarely have their programs set for more than 1 weeks in advance.

3: He picks the time

This is where the user journey goes from a browsing experience, to a goal-focused task. I wanted to be sure that the interactions required are obvious, and that the user has very few choices to make per screen. He picks his time slot and clicks the confirm button.

4: About the  animation...

The entire site becomes vertically swipable. Swipe down, go back to the previous screen. To clue the user to this, each step (forwards or backwards) is animated. When moving on, the new screen comes from the bottom. When pressing the back arrow or swiping down, you go one step back.

Logo

Nordiske Film

Biografer

Choose cinema

Use GPS

Jylland

København

Sjælland

Sjælland og øer

Aalborg City Syd

Aalborg Kennedy

Århus C

Biograf

Events

Premierer

Swipable carousel

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. Proin gravida dolor sit amet lacus accumsan et viverra justo.

2h30m l Action, comedy

16:30

17:30

18:30

19:30

20:30

21:30

Logo

Nordiske

Film

Biografer

Århus C

Movie title

Cinemas

Events

Upcoming

Tickets

5: Seat choice

Alright, so I intend to segment the cinema seats into quadrants. Press one quadrant, zoom in on that. That should make large enough for touch. The amount of seats you select, the enough of tickets you order. At this point, you can show the amount to pay.

Logo

Nordiske

Film

Biografer

Århus C

Cinemas

Events

Upcoming

Click the seat(s) you want!

Tickets

3 Seats selected

3 x 110,- = 330,-

6: Again, animation!

This panel is just here to really drive home how I feel that that animation can help the user feel like he is progressing, and that he knows where his choices "went." Also, if I didn't include this panel, we would be down to an odd number of panels, which would throw the aethstetics out of whack. ;)

7: Confirm all of that

Alright, so this is where he chooses to buy or reserve. It also just makes him sure exactly what he is paying for, which is always important.

8: Done! Tickets to the face

So an issue on their existing site is, that it is really, really difficult to figure out where your tickets are. So long as you are logged in and the tickets are "valid", why not put them right there, over the welcome message that they have already read?

Legend

u620_seg0 u620_seg1 u620_seg2
u621_seg0
u622_seg0 u622_seg1 u622_seg2
u623_seg0
u624_seg0 u624_seg1 u624_seg2
u625_seg0 u625_seg1 u625_seg2
u626_seg0
u627_seg0
u628_seg0

For the past two months, I have been working on this Danish cinema website as part of a portfolio project. I initially did a usability test and found out about some serious usability issues. Fixing those were fairly straight-forward, but I wanted to actually make a redesign, just for the practise of it. The site allows for you to buy tickets for 22 cinemas across the country. Feedback is HIGHLY ENCOURAGED. I want to learn, alright? So let her rip.


Treat this as an android-based app. The size of the screen is 640x360 px (LG G5, Samsung Galaxy S7).


This is where you go first.

That's it! Thanks for taking a look, I look forward to hearing ANY criticsm. Reply to me directly or send it to david@davidskodt.com