Cinema Classics

Mobile app for a business phone system

Who is Grobot?

Case Study

Contact

Who is Grobot?

Contact

Case Study

Design Portfolio

Responsive Web - Portfolio Project

Overview

Problem:

The current ticket purchase flow is outdated and does not include seat selection

Goal:

Create a modern, relatable ticket purchase flow

What I learned:

Components are a great way to make repeatable elements, but they take repetition and careful iterating. Using auto-layouts and component variants in Figma, I was able to create many repeatable elements for this design including the movie poster cards as well as a working seat selection tool.

What I would do differently:

The issue I ran in to while working on this project was scaling. Figma prototypes can be a bit deceptive because they can scale to a selected screen size. If I were to start this project over, I would keep an eye on the font sizes and general scale of the website.

User Research

For this project, I conducted several usability studies and multiple rounds of interviews after each iteration of the design. Research participants were given the opportunity to provide feedback after each round of questions.

Pain Points

1 Accessibility

Users of all ability levels go to the movies, and high contrast, large fonts, and easy to navigate flows are paramount for a good experience

2 Seat selection on small screens

Usability on all device types is a must

3 Easy Scheduling

User want the ability to see all available scheduling and seating options

Persona

"Classic movies are my escape. I love watching the movies from my childhood."

Age

Gender

Female

Family Status

Married

Children

Two children

Job Title

Service Manager

Most used device

Tablet

Grace

Art credit: Framui

Grace

Background

Grace is a mother of two and a total movie buff. She can quote any line from any old comedy movie, and she makes a point to do so at every family function at least once, or maybe five times. Classic movies mean the world to her because they remind her of her experience as a young girl. She would visit her grandparents after school and when they fell asleep, she had the chance to turn on the TV and watch the channels she wasn’t allowed to watch at home. Going to the classic theatre is her favorite leisure activity, and now she gets to share it with her own children, although they rarely find old movies funny.

Goals

• Get a chance to relax after a long week in the office
• Re-watch old movies in theatre, since its just “not the same” on her iPad

Frustrations

• Using a computer after work, since her job requires her to sit in front of a computer all day
• Not many classic theatres have websites optimized for tablet screens

User Journey Map

Persona

Goal

Action

Tasks

Emotions

Opportunities

Grace

Book a Movie Night for the Family

Make a Plan

Pick a Movie

Book Tickets

Drive to the Theatre

Get Snacks

• Talk to her husband
• Check the kids’ school schedules

• Open website
• Browse movies
• Make a selection

• Select tickets
• Confirm and enter payment information

• Get directions
• Get the family in the car

• Locate the snack bar
• Purchase snacks

• Find seats

• Excited

• Thoughtful

• Curious

• Nostalgic

• Excited

• Rushed

• Determined

• Happy

• Calendar integration

• Group voting feature

• Navigation link

• Snack delivery to seat

Starting the design

When selecting a project, I opted to use a randomly generated prompt to simulate working with a client or employer. This allowed me to research other movie theatre websites to see how they usually arrange their user flows and page elements.

Having just finished the Connect PBX app, I decided to make as many reusable elements as possible. Learning to use components significantly improved the speed at which I could complete this project.

Digital Wireframes & Lo-Fi Prototype

The original design implemented a sidebar as well as repeatable movie cards. The sidebar was later changed to a more traditional navigation bar.

The mobile version is recognizable as an adaptation of the desktop site, but the text has been moved under the featured movie

Per the Google Design Certificate Course's instructions, there were several ways to complete the user flow. The movie details page can be skipped by proceeding directly to the seat selection page.

View Lo-Fi Prototype

Usability Study & Design Iterations

Study Findings

1 The sidebar took up to much space and did not add enough utility to justify taking up so much space

2 High contrast would be necessary for the final product

3 Forward and backward navigation must be made very obvious and clear for users

Some ideas are worth letting go

The sidebar was the first element to receive an overhaul to a more standard header-style navigation. Below is an early version of the header. Additionally, the coming soon section was moved to a dedicated filters bar over the movie cards

Keeping a flow familiar helps people use it properly

After a comprehensive study, I settled on this as the final layout for the home page.

Screen Size Variations

Accessibility Considerations

1 Large font was one of the first considerations for older or visually impaired users

2 A high-contrast color scheme was a consideration early in design

3 Large, easy to understand buttons were implemented based on user feedback

HI-Fi Prototype

I consider my first ever prototype to be a huge accomplishment. Learning what is available in UX design software was an exciting endeavor, and at this point in my learning, I felt I could make anything. The reality was that I still had a lot to learn after completing this project. Moving forward, I learned about making components and using existing elements and layouts to expedite the design process and create more organized structures.

View Hi-Fi Prototype

Back to Portfolio

To view more, please use desktop mode :)