Project 3 design_document_rich_fuller


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Project 3 design_document_rich_fuller

  1. 1. An experience redesign project by Rich Fuller (UX Design student project) The New CINETOPIA.COM
  2. 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. 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. 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 •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. 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. 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. 7. Creating the user journey
  8. 8. User Journey
  9. 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. 10. Content analysis and card-sorting Information Architecture Clear grouping patterns were observed as well as hierarchy of content importance.
  11. 11. Content analysis and card-sorting Information Architecture Common categories were noted and considered for new site architecture.
  12. 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. 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. 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. 15. Initial Design Sketching Design
  16. 16. Initial Design Sketching Design
  17. 17. Design 1 Home Page 2 “Buy Tickets” 3 Filter Options 4 Select movie Initial wireframe screens and prototyped user flow:
  18. 18. Initial wireframe screens and prototyped user flow: Design 5 View Showtimes 6 Select theater/time 7 Confirm time 8 Select Seats
  19. 19. Design Initial wireframe screens and prototyped user flow: 9 Choose Seats 10 Order food 11 Select Items 12 Final payment
  20. 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. 21. Purchasing Tickets Second Iteration User Flows 1 Tickets & Showtimes Choose Movie2 Select Showtime3 One click purchase4
  22. 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. 23. Pre-Order Food and Pay 1 Choose order food Select food/drink cat.2 Add food/drink items3 Second Iteration User Flows
  24. 24. Pre-Order Food and Pay 4 Select “Pay Now” Submit Payment5 Success! Bar code.6 Second Iteration User Flows
  25. 25. Current Prototype
  26. 26. Visual Design - Mobile Before After
  27. 27. Visual Design - Tablet Before After
  28. 28. Visual Design - Desktop Before After
  29. 29. Visual Design Desktop Version 960px Mobile Version 320px