Velvet View Cinema Hero Image

Velvet View Cinema - A cinema experience

Tools Used

Figma Logodocs logo

Duration

1 Month

My Role

UX Research, UX/UI Design

Project Overview

A cinema movie shopping experience website for a single cinema, a fictitious client, called Velvet View. A website that provides a unique,  smoother, and painless ticket shopping experience to users.

Problem Statement

Users struggle to have a smoother experience in a cinema movie: long  queues that lead to being late for the movie, difficulty in choosing  seats they want, high ticket prices, and noise in the movie room.

Design Thinking Process

Design Thinking Process

Research/Empathise 

Research/Empathise 

I began the research/empathize phase by conducting individual interviews  to understand the users' needs, pains, and challenges when movie ticket  shopping, as well as how users typically book their tickets. I  interviewed 5 individuals, aged 20-30, both male and female, who enjoy  going to see movies. I defined 3 research goals and 7 qualitative  questions.

Research Goals

  1. I want to understand user needs and frustrations as they relate to the product I’m designing;

  2. I want to understand the processes and emotions that people experience around the problem my product is trying to solve;

  3. Understand the precise challenges users might face in the search/navigation and booking confirmation process.

Interview Questions

  1. How often do you go to the cinema?

  2. How do you decide which movie to see and where?

  3. How do buy your ticket?

  4. What problems do you face when buying a movie ticket?

  5. What experiences would you like to have when buying a movie ticket online?

  6. Describe an experience you would like to have at the cinema.

  7. What problems do you face in going to the cinema?

By conducting research and insights obtained from the interviews , I was able to dicover 4 pain points, such as, long queues at the cinema; noise; expensive tickets and seat selection.

Define

Synthesizing the data from the interviews, I formed 2 user personas  along with their pain points. I then combined the users' experiences and  problem statements to build a journey map, tracking the general  experience the user goes through to complete their goal.

User Persona: Afonso

Problem Statement

Afonso is a busy primary school teacher who needs a user-friendly app to buy a movie ticket, watch trailers, choose snacks, book a seat, and enjoy promotions. He doesn’t want to miss the beginning of the film while waiting in long lines to buy tickets and snacks.

User_Persona_Afonso

User Journey: Allie

Goal: A smoother and painless way to buy movie tickets.

User journey_

Ideate

In the ideate phase I conducted competitive audits, brainstorming approaches like "how might we". This phase is where we transition from learning about users and the problem to coming up with solutions.

Competitive Audit

I conducted a competitive audit research to identify my competitors’  strengths and weaknesses, understand how they position themselves in the  market, and learn more about their products. I examined their visual  design, explored interactions on their website, and analyzed their  content. After gathering and analyzing data, I identified the following  gaps and opportunities.In the ideate phase I conducted competitive audits, brainstorming approaches like "how might we". This phase is where we transition from learning about users and the problem to coming up with solutions.

Gaps

  1. No voice recognition or screen readers;

  2. No breadcrumbs, search bar or site map.

Opportunities

  1. Offer an app with voice recognition, screen readers, changing language;

  2. Offer good navigation options.

Design Question

How might we provide a more intuitive shopping experience for a theater website?

User Flow Chart

User_flow_chart

Paper Wireframes

Prototype

Digital Wirefarmes

As I progressed through the design phase, I created digital low-fidelity  wireframes aimed at designing simple screens to provide users with a  smoother and painless movie ticket shopping experience.

Digital wireframes

Test

Usability Study

I conducted an unmoderated usability study where users were asked to perform tasks using a low-fidelity prototype. The study included 5 participants (2 males and 3 females) aged between 20 and 60. It was conducted remotely in Portugal, with each participant given 10 minutes.The objectives of this study were to assess the ease of website navigation and gain insights from the user flow, which encompasses the sequential steps users take to complete a process.

Findings

  1. Users experienced difficulty finding what they needed, especially when required to scroll down on certain pages. Condensing some pages could improve the user experience;

  2. Creating smaller components may enhance usability.

Design System

Colors

Background

#1E1F27

Other Elements

#F5B510

Text

#0E799B

Text

#000000

Text

#FFFFFF

Typography

This is heading text

H1 - 40px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

All P - 32px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

All P - 32px

Buttons

Icons

Velvet View Cinema Icons

Refining the Design

After conducting the usability study, I refined my designs. I added an icon to indicate the need to scroll down and improved the layout to reduce the page size. I reduced the size of the components so that the layout is more harmonious.

Mockups
Mockups
Mockups

Accessibility Considerations

  1. Used placeholder images to help users better understand the designs;

  2. Employed icons to facilitate navigation. Implemented a hierarchy of headings with ample text sizes to ensure the website is easy to read;

  3. Implemented high contrast, which makes designs easier to read, and used bolder colors for text that stands out against the backgrounds.

Going Forward

Impact

This website makes users' lives easier when buying movie tickets.  Usability test feedback is positive, as is peer feedback, which makes me  feel like I did a good job.

What I Learned

While developing the website, I learned to always prioritize the user. I  learned that the research process is very important and useful, as well  as usability testing. Seeing the interactions work was really  rewarding. I had a great time designing this website.

Next Steps

  1. Conduct another round of usability studies to validate whether the pain points users have experienced have been addressed, and conduct more research;

  2. Implement nice features like a reward points system, seat delivery of food, and others.