Enchanted Cinemas

Tools

Figma

Role

UI Designer

Timeline

October - December 2023

Deliverables

Prototype

Project Overview

For my project, I created an interactive cinema website to purchase movie tickets, named Enchanted Cinemas.

This project was created in an advanced prototyping class and was built utilizing auto layouts, interactive components, variants, variables, expressions, and conditional logic.

Goals

  • Learn Figma’s newest tools — variables, expressions and conditional logic with variables
  • Practice utilizing Figma’s interactive components to create a movie website
  • Make a digital site that is simple, cohesively designed, and easy to navigate

Process

Research

Before starting on my prototype, I researched well-known movie ticket websites, including AMC Theatres, Fandango, NCG Cinema, and Movie Tavern Theatres. These websites were the basis for my design and provided guidelines on how the prototype should function.

AMC Theaters
NCG Cinema
Fandango
Movie Tavern Theaters

Technical Proficiency

To complete this project, I learned auto layout, interactive components, variants, variables, expressions, and conditional logic properties in Figma. Variables, expressions, and conditional logic are currently in open beta production when this project was completed. Here are explanations of the advanced prototyping techniques:

  • Auto Layout is a design property to create designs that maintain proportions and grow/fill/shrink as the content changes.
  • Interactive Components are reusable elements across your design with interactions between variants in a component set.
  • Variants are similar components within a component container that helps to simplify your designs. The variants can be slightly modified from the original design and easily interchangeable from the menu bar.
  • Variables are values that can be applied to design elements and prototyping actions (similar to code).
  • Expressions are a way to use variables (and their values) with basic operations and arithmetic operators (addition, subtraction, multiplication, and division).
  • Conditional Logic is a rule that defines if an action should occur, written with if/else statements.

Utilizing these techniques, I was able to create a live prototype that allows users to select a desired movie, date and time, seats within a theatre, ticket prices (according to age), and a checkout process.

Prototype Example

One example of how I used the advanced properties is in the seats selection interaction. For this interaction, I created three “state” variants of the seat button: Available, Hover, and Selected. The three variants work together interchangeably, with each prototype interaction affecting one another. I created two variables for this section, a seat counter, named seatsSelected, and a button display, named showSeatButton. The seat counter increases/decreases dependent on the user’s selection, and the button will display after the first seat has been selected.

Movie Seats
Seat Variables

Note: Variables in Figma start at the index of 0 instead of 1. I had to account for that in my conditionals. Also, for the seat selection page, we were tasked with allowing users to select no more than 9 tickets to prevent ticket scalping. If a 10th ticket is attempted, the user will be given an error message and will not be able to select an additional seat.

Let’s break down how the full prototype process for the “Hover” state seat:

1. When a user hovers on the “Available” variant, the “Hover” state is activated.
2. When a user clicks on a seat, the “Selected” state is activated.
3. If the variable seatsSelected counter becomes greater index 0, it will display the showSeatButton.
4. If the variable seatsSelected counter is less than index 8, once selected is activated, the seatsSelected variable increases by 1.
5. If the variable seatsSelected counter equals 9, the Error Ticket overlay will open and the counter will not increase past index 8.

"Hover" Prototype Process

The same goes for the “Selected” state seat:

1. When a user unselects a seat, the “Available” state is activated, and the seatsSelected counter will decrease by 1.
2. If the variable seatsSelected counter becomes less than index 0, it will hide the showSeatButton (if no seats are selected).
3. If the seatsSelected variable becomes greater than index 8, the Error Ticket overlay will appear (this is an edge case to make sure that Figma makes the popup appear for the counter when it is greater than 9).

"Selected" Prototype Process

Design Implementation

The design idea for Enchanted Cinemas was to create a magical cinema experience, similar to Walt Disney.

Color Palette

For the color palette, I wanted to use rich colors that evoke an “enchanted” theme. Purple is known to represent creativity, mystery, and magic, concepts that embody my idea perfectly.

The secondary colors I used in this design were white and black. These colors complement purple in a clean and minimalist way and add to the enchanted theme.

Typeface

For all headers, sub headers, and body text the typeface used was Fraunces, using font weights ranging from light, regular, semibold, bold, and italic, with font sizes ranging from 15 to 40px. The main logo typeface was created using WindSong, with a font weight and size of medium and 45px respectively.

Layout

For the layout, I utilized a 10px grid to keep my content aligned, organized, and consistent across all pages. I also kept the overall design very simple, modern, and minimalist, to eliminate unnecessary content and keep the navigation easy to use.

Final Prototype

Video Walkthrough

Retrospective

After completing this project, I have learned so much about prototyping in Figma - many of these new advanced skills gained from trial and error lots of YouTube videos. In particular, this project challenged me to learn interactive components, which are now important aspects of my future designs. They save so much time and energy when using icons, imagery, and different size and states for element. It also pushed me to learn variables which can take my prototype to the next level - as close as possible to a live site.

From this experience, I gained skills that are transferable from Figma to development with variables, expressions, and conditional logic. I have a better understanding of how variables work, how they store values, and how they are used in user click options.

I look forward to applying my new knowledge and techniques in future projects and explore further prototyping capabilities in Figma.