An experience redesign project by Rich Fuller (UX Design student project)

The New CINETOPIA.COM

Problem/OpportunitiesProblem:The current CINETOPIA.COM website, mobile site and process for ordering tickets do not match up with the high quality in-person experience and the luxury CINETOPIA brand.

To go beyond just doing a visual redesign and see how the entire experience might be improved.

Goal:

Problem/OpportunitiesKey Findings through user research:

Opportunity: Proposed solution:

Users hate waiting in long lines. pre-purchase tickets and scan barcode at the gate

User don’t like getting a bad seat select and reserve seats prior to arrival.

Food ordering process is clunky pre-order food is prepped and delivered to seat

Redeeming Groupons and/or coupons is tedious redeem Groupons and other coupons online

Cannot purchase tickets on mobile website Responsive website allows cross-platform purchase

After talking with users and conducting surveys and interviews. I started to see some patterns and common pain points that are experienced.

Surveys and Interview findings

•Worrying about finding a good seat

•Want to avoid having to arrive very early

•Hate long lines and waiting at the box office

•Not happy with high food/drink prices

•Appreciate when they can reserve seats ahead of time

•Food ordering/delivery process is clunky

Top Findings:

•Split about evenly between people who feel that money is not a factor and people that are concerned

with high ticket/food prices and looking for deals

•A lot of people still just purchase tickets at the box office. (reasons include: too much of a hassle,

negative user experience on website or inability to purchase on site, it’s just a habit, takes too long)

•For people who do buy online, several mentioned Fandango, Groupon or movietickets.com

•A lot of price conscious people will wait for groupon-type deals on ticket packages to come along

Common themes:

User research key findings

Competitor Analysis Top Findings

Ability to purchase on mobile site app

Membership options reduce ticket prices

Selects best seats available and allows changes

Reserved seating

Native ticket purchasing platform

Loyalty Program

Numbered seating helps food/drink delivery

Goal:

To solve several user pain points and optimize the entire experience by creating a responsive web design that includes new functionality to purchase tickets, reserve seats and pre-order food.

The new CINETOPIA.COM is a redesigned website that makes the pre-theater and in-theater experiences more cohesive and efficient.

It’s for movie theater and dining connoisseurs and features a responsive web design for previewing and purchasing tickets, selecting seats and pre-ordering food. Unlike competitors, it allows for ALL details to be handled before coming to the theater to provide for an un-rushed, stress free luxury pre-theater AND in-theater experience.

}responsive web design

cross platform ticket purchase

select and reserve seats

pre-order food

Creating the user journey

User Journey

Personas

26F Married

Brian Anderson

“Money is not a factor, I just want the ultimate experience.”

Introducing:

likes to handle as many details as possible before going to the theater

hates it when he has to wait in lines or doesn’t get a good seat

wants to show up on time and have a stress-free experience

Brian is a Financial Analyst at a well established firm in downtown Portland. When he isn’t consulting major clients on complex financial matters, he likes to unwind with friends or a date. Brian likes to handle details upfront to ensure a smooth time. Money is not a factor for Brian, he just enjoys luxury and unique experiences. He loves movies and technology and visiting luxury theaters with the highest quality video/audio and quality food and drinks.

THE EXPERIENCE CONNOISSEUR 32M Single

BRIAN CARES MOST ABOUT:

BRIAN CARES LEAST ABOUT:

Luxury, stress free, high quality experiences

How much it will cost

Laura Benson

“I just want an affordable and unique date night.”

Introducing:

Loves quality food and wine but is wary of steep prices.

hates it when she has to wait in lines or doesn’t get a good seat

hunts down good deals so she can afford fun, quality date experiences

DATE NIGHT BARGAIN HUNTER

Laura is a full time nurse at a local hospital. Her busy schedule changes weekly and oftentimes she works night shifts. This makes it hard to plan date nights with her husband. When they are able to find the time, Laura likes to go to the luxury 21 and over theater across town that serves dinner and wine. She is a bargain hunter so is always on the lookout for deals and ways to save money and still enjoy a high-quality date night experience during the limited time she gets to spend with her husband.

LAURA CARES MOST ABOUT:

LAURA CARES LEAST ABOUT:

Finding affordable luxury, unique date night

Planning everything ahead of time

Content analysis and card-sorting

Information Architecture

Clear grouping patterns were observed as well as hierarchy of content importance.

Content analysis and card-sorting

Information Architecture

Common categories were noted and considered for new site architecture.

Home

PreviewsNow

Showing/Tickets

Coming Soon About FAQ Press Tech.Events &

MusicArt Photos Contact Locations

Home

Now Showing & Tickets

Theater Experience

Dining Experience

About Cinetopia

Proposed new top-level sitemap:

Current top-level sitemap:

Sitemap analysis

Information Architecture

Proposed new sitemap:

Home

Now Showing &

Tickets

Coming Soon

Loyalty Program

Theater Experience

Dining Experience

Locations

Brewtopia Beaverton

Vinotopia Van. Mill

Plain

Vinotopia Van. Mall

About Cinetopia

FAQ PhotosLocations

Cinetopia Van. Mall

Cinetopia - Beav.

Progress

Cinetopia Van.

Mill Plain

Technologies Art Events

New sitemap

Information Architecture

After card sorting and content analysis it was determined that the navigation and content structure could be consolidated and refined with a clearer hierarchy and placement.

User FlowHappy Path

-choose location/theater/showtimes-reserve seats-order food-pay

CINETOPIA.COM

(responsive)

Now showing/tickets

Choose location 4 showtimes & tix

Select movie and timeslot

Browse movies/showtimes

order food?

Choose theater type

Select seats

logged in?

Signup

Make payment Make paymentOrder food/drink

no

yes

yesnoReview purchase/

Finish.

check loyalty rewards balance

view tickets/change seats

Login?

no

Login

yes

Signup?

no

yes

Initial Design Sketching

Design

Initial Design Sketching

Design

Design

1 Home Page 2 “Buy Tickets” 3 Filter Options 4 Select movie

Initial wireframe screens and prototyped user flow:

Initial wireframe screens and prototyped user flow:

Design

5 View Showtimes 6 Select theater/time“Buy Tickets” 7 Confirm time 8 Select Seats

DesignInitial wireframe screens and prototyped user flow:

9 Choose Seats 10 Order food“Buy Tickets” 11 Select Items 12 Final payment

Top findings after testing prototype with real users

Usability Testing

-Need to refine button color hierarchy

-Make the location selection more efficient (user proximity)

-Address CTA wording on several buttons

-Use popups to handle some steps versus new pages

-Change where user is sent after completing payment

-Separate buttons for “tickets showtimes” and “buy tickets”

-Font sizes to match with hierarchy

-Create sub nav menu

Purchasing Tickets

Second Iteration User Flows

1 Tickets & Showtimes Choose Movie2 Select Showtime3 One click purchase4

Selecting and Reserving Seats

1 Click to reserve seats Select desired seats2 Confirm seat selection3 Pay now or order food4

Second Iteration User Flows

Pre-Order Food and Pay

1 Choose order food Select food/drink cat.2 Add food/drink items3

Second Iteration User Flows

Pre-Order Food and Pay

4 Select “Pay Now” Submit Payment5 Success! Bar code.6

Second Iteration User Flows

Current Prototype

http://goo.gl/OnvfLN

Visual Design - Mobile

Before After

Visual Design - Tablet

Before After

Visual Design - Desktop

Before After

Visual Design

Desktop Version 960px

Mobile Version 320px

http://app.uxpin.com/69e893ff11a9da14264b6f05bfd7eed15b561562/3891744

http://app.uxpin.com/210abca4485a2391dbec1f6d3aa4c79266fc6bd3/3891874

THE NEW CINETOPIA EXPERIENCE