UX/UI case study

Tara Nawi & Maayan Harari

UX/UI case study

Tara Nawi & Maayan Harari

Introduction

As part of the UI/UX studies, we were asked to choose a movie released over a decade ago and 'bring it back to life.' The task was divided into two parts: selling tickets to an event where the audience could watch the movie on a big screen or purchase the movie for home viewing. The goal was to make people who have already watched the movie to watch it again as well as to make those who are unfamiliar with the movie to watch it for the first time.

useabillity features

Learnability

The way to a perfect watching experience in a click of a button. We provide an explanation to each option and make sure that the process of buying a ticket is short and easy.

Design

We selected a design that harmonizes with the film, carefully matching its characters and color palette. The chosen colors are visually pleasing and create an overall aesthetic that complements the movie's tone and enhances the viewing experience.

Efficiency

Instead of waiting in line at the cinema or finding out that the tickets are sold out, we make it possible to enjoy an unforgettable watching experience at a prestigious event or from home with three bundles, suitable for everyone.

Memorability

The site's colors are taken from the posters of the movie which makes it more eye catching for users who have already watched it. For new viewers, we make sure to be consistent with our colors usage for different elements.

pain point

Aging Film: Released in 2013, it may feel outdated compared to newer, more advanced films.

Seen as a "Sequel": Some viewers may dismiss it as just a prequel to Monsters, Inc., lacking its own standalone value.

Shifting Viewing Habits: With the rise of streaming and quick content, longer animated films may struggle against faster-paced series and movies.

New Audience, New Preferences: Younger viewers might not feel nostalgic or connected to the original film’s world and themes.

Oversaturation of Animation: Audiences could feel overwhelmed by the sheer number of animated films and may overlook it.

As part of our research on Monsters University and its relevance today, we reviewed several key websites such as Rotten Tomatoes, IMDb, and industry animation blogs. We analyzed user reviews, critic feedback, and audience engagement metrics, which provided us with valuable insights into viewer responses and how perceptions of the film have evolved over time.

UX research

about the movie

Tittle: Monsters University

Director: Dan Scanlon

Genre: Animation, Adventure, Comedy, Family, Fantasy

Wireframes

Home packages

The first one blah blha

Home packages

The secand one blah blha

Home packages

The third one blah blha

Style guide

typography:

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPKRSTUVWXYZ

1234567890*&%$#@!

Monster AG

Title font

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPKRSTUVWXYZ

1234567890*&%$#@!

Poppins

Text font

H1

53 X 64

regular

H3

SemiBold

96 X 159

H2

Regular

96 X 159

Colors

Monster blue

#217CC0

The blue color represents the official color of the university that Mike and Sulley attend in the movie. It’s a symbol of Monsters University, where they train to become professional scarers. Throughout the film, the blue is used to convey the school's identity, pride, and tradition, as seen in their uniforms and various banners around the campus.

Colors from the black and white scale are primarily utilized for extended text blocks, ensuring readability and clarity on web pages. They are also commonly used as background colors on websites to create a neutral, unobtrusive foundation, allowing other elements to stand out. Additionally, grayscale tones are effective for highlighting specific sections without overwhelming the viewer's attention, offering subtle contrast that supports the overall design and user experience.

Monster

black

Monster

white

000000

FFFFFF

Buttons

DEAFULT

PRIMARY

SECONDARY

HOVER

BTN

BTN

BTN

BTN

To the website

thanks for watching

Back to category

Maayan Harari | Maayane39@gmail.com

Introduction

As part of the UI/UX studies, we were asked to choose a movie released over a decade ago and 'bring it back to life.' The task was divided into two parts: selling tickets to an event where the audience could watch the movie on a big screen or purchase the movie for home viewing. The goal was to make people who have already watched the movie to watch it again as well as to make those who are unfamiliar with the movie to watch it for the first time.

useabillity features

useabillity features

Learnability

The way to a perfect watching experience in a click of a button. We provide an explanation to each option and make sure that the process of buying a ticket is short and easy.

Efficiency

Instead of waiting in line at the cinema or finding out that the tickets are sold out, we make it possible to enjoy an unforgettable watching experience at a prestigious event or from home with three bundles, suitable for everyone.

Design

We selected a design that harmonizes with the film, carefully matching its characters and color palette. The chosen colors are visually pleasing and create an overall aesthetic that complements the movie's tone and enhances the viewing experience.

Memorability

The site's colors are taken from the posters of the movie which makes it more eye catching for users who have already watched it. For new viewers, we make sure to be consistent with our colors usage for different elements.

Aging Film: Released in 2013, it may feel outdated compared to newer, more advanced films.

Seen as a "Sequel": Some viewers may dismiss it as just a prequel to Monsters, Inc., lacking its own standalone value.

Shifting Viewing Habits: With the rise of streaming and quick content, longer animated films may struggle against faster-paced series and movies.

New Audience, New Preferences: Younger viewers might not feel nostalgic or connected to the original film’s world and themes.

Oversaturation of Animation: Audiences could feel overwhelmed by the sheer number of animated films and may overlook it.

pain point

pain point

UX research

about the movie

Tittle: Monsters University

Director: Dan Scanlon

Genre: Animation, Adventure,

Comedy, Family, Fantasy

As part of our research on Monsters University and its relevance today, we reviewed several key websites such as Rotten Tomatoes, IMDb, and industry animation blogs. We analyzed user reviews, critic feedback, and audience engagement metrics, which provided us with valuable insights into viewer responses and how perceptions of the film have evolved over time.

Wireframes

Home packages

The first one blah blha

Home packages

The secand one blah blha

Home packages

The third one blah blha

Style guide

typography:

Title font

Monster AG

ABCDEFGHIJKLMNOPKRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890*&%$#@!

H1

53 X 64

regular

Text font

Poppins

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPKRSTUVWXYZ

1234567890*&%$#@!

H2

Regular

96 X 159

H3

SemiBold

96 X 159

Colors

Monster blue

#217CC0

Maayan Harari | Maayane39@gmail.com

Maayan Harari | Maayane39@gmail.com

The blue color represents the official color of the university that Mike and Sulley attend in the movie. It’s a symbol of Monsters University, where they train to become professional scarers. Throughout the film, the blue is used to convey the school's identity, pride, and tradition, as seen in their uniforms and various banners around the campus.

Monster

black

Monster

white

000000

FFFFFF

Colors from the black and white scale are primarily utilized for extended text blocks, ensuring readability and clarity on web pages. They are also commonly used as background colors on websites to create a neutral, unobtrusive foundation, allowing other elements to stand out. Additionally, grayscale tones are effective for highlighting specific sections without overwhelming the viewer's attention, offering subtle contrast that supports the overall design and user experience.

Buttons

BTN

BTN

BTN

BTN

thank you

for watching