1. An experience redesign project by Rich Fuller (UX Design student project)
The New CINETOPIA.COM

2. Problem/Opportunities
Problem:
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:

3. Problem/Opportunities
Key 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.

4. 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

5. 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

6. 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

7. Creating the user journey

8. User Journey

9. 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

10. Content analysis and card-sorting
Information Architecture
Clear grouping patterns were observed as well as hierarchy of content importance.

11. Content analysis and card-sorting
Information Architecture
Common categories were noted and considered for new site architecture.

12. Home
Previews
Now
Showing/
Tickets
Coming Soon About FAQ Press Tech.
Events &
Music
Art 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

13. 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
Technologi
es
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.

14. User Flow
Happy 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
yesno
Review purchase/
Finish.
check loyalty
rewards balance
view tickets/
change seats
Login?
no
Login
yes
Signup?
no
yes

15. Initial Design Sketching
Design

16. Initial Design Sketching
Design

17. Design
1 Home Page 2 “Buy Tickets” 3 Filter Options 4 Select movie
Initial wireframe screens and prototyped user flow:

18. Initial wireframe screens and prototyped user flow:
Design
5 View Showtimes 6 Select theater/time 7 Confirm time 8 Select Seats

19. Design
Initial wireframe screens and prototyped user flow:
9 Choose Seats 10 Order food 11 Select Items 12 Final payment

20. 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

21. Purchasing Tickets
Second Iteration User Flows
1 Tickets & Showtimes Choose Movie2 Select Showtime3 One click purchase4

22. Selecting and Reserving Seats
1 Click to reserve seats Select desired seats2 Confirm seat selection3 Pay now or order food4
Second Iteration User Flows

23. Pre-Order Food and Pay
1 Choose order food Select food/drink cat.2 Add food/drink items3
Second Iteration User Flows

24. Pre-Order Food and Pay
4 Select “Pay Now” Submit Payment5 Success! Bar code.6
Second Iteration User Flows

25. Current Prototype
http://goo.gl/OnvfLN

26. Visual Design - Mobile
Before After

27. Visual Design - Tablet
Before After

28. Visual Design - Desktop
Before After

29. Visual Design
Desktop Version 960px
Mobile Version 320px
http://app.uxpin.com/69e893ff11a9da14264b6f05bfd7eed15b561562/3891744
http://app.uxpin.com/210abca4485a2391dbec1f6d3aa4c79266fc6bd3/3891874

30. THE NEW CINETOPIA EXPERIENCE