A local theater does not have a advanced and a functional booking system on desktop and mobile version of its website.
Goal: Designing a responsive website to help users easily select plays, read reviews, book preferred seats in the theater, and purchase tickets
Project duration: September-October 2022
Tools: Figma, Photoshop
My role: UX researcher, UI/UX designer
The project twas a part of Google's UX Designer certification program. Therefore throughout the process I have completed all stages and of ux project, from research to final user interface design.
Standing in line for movie tickets can be a source of frustration. With today's technology available to us it is more obvious that the digital solution shall be instantly embeded online.
The local modern theater wants to offer something that makes them competitive and allow users to experience seamless booking online that would increase satisfaction and number of visits at the venue.
My first step was to conduct basic research. I reviewed various theater websites as well as cinema/theater tickets booking apps. I have read reviews to understand users needs and pain points. I have also asked a couple of potential users about their so far experience with online ticket-booking systems. After I sorted my insights and came with the essential notions.
Based on my research, I defined a couple of user types that could correspond with the features of the responsive website I was creating. I decided to focus on two personas since their profiles seemed the strongest and compatible with my project vision.
The core part of this stage was to gather the insights from already existing theaters websites, through comparative analysis.
This process was focused on pros and cons of UI of the concurrence websites, which led to prioritizing the content and structure of my future layout. I did some searching online and found a few competitors of the same profile. Then I started to analyze and compare the good solutions on their websites and features that were missing. This process led to defining the core structures and functionality of the design.
The first step in the process of mapping out a design was to prepare a structured sitemap with all the subpages.
That was the necessary stage before preparing low fidelity wireframes of desktop and mobile version of the website.
I have defined four main colors and extended the palette into more values having in mind possible future design applications.
16px is the minimum size for body text when it comes to most websites.
It is the text size browsers display by default and 16-pixel text on a screen is about the same size as text printed in a book.
Hi Fidelity Prototype | Animations
I based my design on numerous animations to give a modern feel to a website that would at the same time correspond with dynamic character of the venue.
Apart from animated slider on the homepage, photos and text were consequently animated on each subpage.
For capturing my animations I have used gifcap (by João Moreno) which is a great tool to use for the presentation purposes, but obviously due to limitation of 256 colors, gifs could not reflect the quality and smoothness of my gradient animations in the background.
Once the low fidelity prototype was finalized and all subpages linked into clickable prototype, I subjected a few users to verify the website in order to receive feedback and pinpoint potential problematic issues.
The time of completion the task and conversion rate was measured. The methodology was based on drop-off rate and error rate. As the website layout is simple and intuitive there were no special issues with functionality and navigation while completing tasks.
After the study I reviewed collected results and made the last iterations and improvements of my design.
The project was very challenging as I had decided to base all my layouts on multiple animations. I had to dive deep into Figma and create numerous variants and states for each element and group of elements. It was really time-consuming,
but overall very rewarding process, that led to expand my knowledge about designing and constructing dynamic layouts.
HTML Website Builder