Sonia Sharifi - Ticket Website Redesign

Ticket Website

Audit & Redesign

Note: For better experience please check out the FigJam version here.

PROJECT OVERVIEW

In this project, I reviewed the entire purchase flow of an online ticket website. After conducting a thorough audit to identify necessary changes, I redesigned the flow and pages to provide an easier and smoother experience for users.

My Responsibilities

Audit Website
Redesiging and Wireframing

Industry

Entertainment and Sales
B2C

PROBLEM STATEMENT

The current website suffers from a lengthy and unoptimized purchase process, leading to user frustration and drop-offs. Multiple points within the process are prone to preventable errors, causing further inconvenience. As the primary objective of the website is to facilitate ticket purchases, optimizing this process is vital. By addressing these issues, we can significantly improve the user experience, increase transaction completion rates, and ultimately drive more sales.

FIRST STEP: AUDITING

In the first step, I collected screenshots of the purchasing process and documented user needs and wants for each screen and step. This allowed me to analyze the current flow and identify its flaws. The audit focused on the following key stages:

Ticket Detail and Registration:
- User Needs: Clear ticket information, easy access to registration options, straightforward navigation.
- User Wants: Quick access to ticket details, seamless transition to registration, minimal data entry requirements.
Seat Selection:
- User Needs: Intuitive seat map, easy seat selection process, clear pricing information.
- User Wants: Visual representation of available seats, ability to select multiple seats easily, clear display of seat categories and prices.
Checkout Page:
- User Needs: Simple and secure payment process, minimal form fields, clear summary of purchase.
- User Wants: Quick payment options, trust signals (e.g., security badges), immediate confirmation of purchase.

Below are the detailed notes and screenshots I made at every step of the process:

AUDITING THE EXISTING WEBSITE

Ticket deatil page.

Seating chart.

A long register form.

Selecting seat step, for each seat you have to come back to this page. So if you want 3 different tickets you have to go back and forth 3 times.

A sample of poor error prevention and handling.

Tickets page, here you can check the selected tickets and add more.

This page is for choosing delivery type.

After selecting the delivey type, you need to add your invoice information.

Checkout page, here there are some agreements that need to be signed. Can change the delivey information.

SECOND STEP: REDESIGNING THE FLOW AND PAGES

USERFLOW

Old purchasing flow.

To illustrate the changes made in the purchase process, I created user flow diagrams. Here is the initial user flow of the website:

Initial User Flow

Issue: The purchase process is long and inconsistent, causing user frustration and drop-offs.
Register/Login Flow: Maintained as is, but optimized the amount of information collected and reduced the number of screens.
Focus Area: The purchase process from clicking the "BUY" button to the "PAYMENT" button.

Redesigned User Flow

Check out the new flow below to see the improved design:

Suggested flow for the purchasing process.

Key Improvements in the New User Flow:

Simplified Navigation: Reduced the number of steps and streamlined the process.
Consistency: Ensured a consistent look and feel across all screens to avoid user confusion.
Clear Instructions: Provided clear and concise instructions at each step to guide users through the process.
Error Reduction: Implemented better form validation and informative error messages to minimize user mistakes.

By implementing these changes, the new user flow offers a more efficient and user-friendly experience, increasing the likelihood of users completing their purchases smoothly.

WIREFRAMES

Registration Process

After designing the flow, the next step was to create wireframes to visualize the changes. Below are the wireframes for the registration process and the key improvements made:

Register with Socials: Added the option for users to register using their social media accounts, making the process faster and more convenient.
Quick Registration: Simplified the initial registration process to require only essential information, with the option to add more details later. This reduces friction and encourages more users to sign up.
Interest Options: Introduced an option for users to select their interests during registration. This helps in personalizing email marketing content, making it more relevant and engaging for users.

Ticket Detail and Seat Selection Screen

For the Ticket Detail and Seat Selection screen, I implemented several key changes to enhance usability and reduce user frustration. Below are the wireframes showcasing these improvements:

Consolidated Information: Gathered related information together on the screen, making it easier for users to find what they need without excessive scrolling or searching.
Shortened Rule Section: Moved the rules section next to the important information, keeping it concise and accessible without overwhelming the user.
Interactive Seating Chart:
- Seating Chart Improvement: Introduced an interactive seating chart that allows users to hover over seats to see the prices. This eliminates the need for users to go back and forth between different sections, reducing frustration and improving the selection process.
- List View Option: Maintained the option for users to see a list of seats and prices in a single place, catering to different user preferences.

Seat Selection and Ticket Management Screen

I focused on simplifying the selection process and consolidating steps to enhance user experience. Below are the wireframes illustrating these improvements:

Simplified Seat Selection:
- Improvement: Provided two options for selecting seats—using the interactive seating chart or a form to add tickets. This dual approach caters to different user preferences and ensures a smoother selection process.
- Eliminated Long Lists: Removed unnecessary long lists of items, which often add clutter and confusion. Users now see only the necessary inputs, streamlining their choices.
Combined Ticket Management Steps:
- Improvement: Combined the step for adding tickets with the ticket list, so users don’t have to navigate back and forth to edit or add more tickets. This integration reduces the number of steps and potential errors, enhancing overall efficiency.

Checkout Screen

The initial two-step checkout process was a UX disaster, so I implemented several key changes to streamline and improve the user experience. Below are the wireframes illustrating these changes:

Removed PDF Warning: Eliminated the intimidating PDF warning. Instead, we provided users with the option to change their email or phone number, as there is typically only one method (e.g., PDF) to receive tickets purchased online.
Improved Invoice Form: Designed a better-looking form for collecting invoice information, making it visually appealing and easier to fill out.
Rules and Payment Integration: Moved the rules acceptance section closer to the payment button, as they are directly related. Users can now see a pop-up module when they check the rules, allowing them to quickly and easily activate the payment button after entering all required information.
Enhanced Review and Edit Options: Kept the ticket information visible on the page for users to double-check before payment. Added the ability to change ticket details if needed, ensuring users can correct any mistakes without leaving the checkout process.

HOW TO MEASURE SUCCESS?

Conversion Rate: Compare the conversion rate before and after the redesign. This is a direct indicator of the success of the new design.
Time to Complete Purchase: Measure and compare the time users take to complete the process before and after the redesign.
4. User Error Rate: Reduction in the number of error messages displayed and the nature of errors (e.g., form validation errors) before and after the redesign.
Support Requests: Track the volume and types of support requests before and after the redesign.
Session Recordings and Heatmaps: Use tools like Hotjar or Crazy Egg to record user sessions and generate heatmaps. Analyze these to see where users are engaging and where they are getting stuck.

THE TAKE AWAY

I must admit, there's something oddly satisfying about dissecting a website that I didn't design and examining it with fresh eyes. It's a process that rarely happens when redesigning your own work (unless they're really old!). Improving usability and discovering hidden opportunities feels like finding hidden treasures—it's been a rewarding experience. This initial website audit has been a joy, and I'm eager to undertake more audits and redesigns in the future.

NEED AN AUDIT AND REDESIGN?

If you would like me to review your website flow and design, simply email me at sharifij.sonia@gmail.com

We can schedule a meeting to discuss it further. Please use the words "Audit" or "Redesign" in your email subject.