top of page

Cinema Website Wireframes - Redesign


Overview

The Original Wire Frames were part of a Module from second year in college. It was used as practice for our final graded unit. This was a website development course which meant no UX research was conduct during the creation of the website. The redesign was based on UX principles and was inspired by other Cinema websites such as the Odeon and Vue. They were chosen for redesign as they did not meet the standards necessary for my future job aspirations. The brief stated we had to design and develop a Cinema website based in the Lothian region of Scotland. The users had to be able to contact the Cinema through a contact form, learn about the cinema through an about page, book tickets (purchase system was not required), watch trailers and they also wanted the user to make an account to book tickets. An admin page was also required to add movies, times and edit user accounts.


Old Wireframes

The original wireframes were very poorly designed and underdeveloped. I left massive parts of the website out. For example, the contact page, booking page, search page, ticket page, etc. If this was a professional setting the developer would not be able to successfully develop a site based on these wireframes. At the time I was more focused on becoming a website developer instead of a designer whereas I have now decided go down the route of User Experience (UX) design. The original wireframes were made because we needed to make them for our final hand in and I wanted to get started on the development phase as soon as possible, as opposed to wanting to design an attractive website. This led to a poor rushed job using minimum effort to create these wireframes.


New Wireframes

The New wireframes were designed with UX principles in mind and were created to provide an easy and useful experience for the user. Jakob's Law of Internet User Experience was used to created good UX throughout the wireframes. These aspects are icons such as: social media Icons that easily indicate to the user what social media is being linked to. A lot of inspiration was taken from other cinema websites such as Vue Cinema. These similarities are: the search icon which is a small magnifying glass; hamburger menu for mobile design and the use of movie posters as buttons to link to further information about the films. Fitts law was also used during the design process. Fitts law states


Desktop Wireframes


tablet Wireframes


Mobile Wireframes




bottom of page