Yenny Kim Product Designer
Citibank
Presale Tickets
Process
Discovery​
Ideation
Design
Developer Handoff
​
Date​
08/2023 to 01/2024
​
​
Role
UX Research
UIUX Design
​
​
Project Type
Web and mobile application
(iOS, Android)
Overview
Citibank Presale Tickets are special offers that are provided to Citibank cardholders. Before the tickets are officially open to the public, Citibank customers can have exclusive access to purchase the tickets. Customers can secure seats and gain special entry. Presale offers often come with benefits, which can be additional perks and discounts.
Citibank's goal was to maximize the overall checkout flow. User experience needed to be upgraded, considering speed, security, and convenience. Therefore, user engagement and easy navigation was crucial in delivering the most efficient checkout process.
Problem
The current checkout flow lacks efficiency and user satisfaction. Users encounter friction points during the purchase process, including lengthy checkout steps, unclear navigation, and potential security concerns. These challenges lead to decreased conversion rates, increased abandonment rates, and diminished overall user experience.
Solution
To address the usability issues plaguing the Citibank presales platform, we will implement a streamlined checkout process with simplified steps, intuitive navigation features, and enhanced security measures, aiming to optimize user engagement, improve user flow efficiency, and elevate overall user satisfaction.
Revising the Flow
To understand the current structure and architecture of the Citibank Presales platform thoroughly, I first dived into the user flow, processing each step to identify any minor problems or obstacles that users may encounter. Before making decisions regarding significant changes to the platform's functionality or interface, I believed it was necessary to have a comprehensive understanding of the existing interactions. By scrutinizing the user flow, including aspects such as event discovery, event details, login/signup processes, checkout procedures, and post-booking actions, I gained valuable insights into potential pain points or areas for improvement. This approach allowed me to pinpoint specific areas where adjustments or optimizations could be made to enhance the overall user experience and streamline the ticket booking process on the Citibank Presales platform.
5-Seconds Test
The 5-second test is particularly appropriate for assessing the user experience of a ticket booking website, like Citibank Presales, due to its simplicity and quick insights. Despite its brevity, the test can effectively capture users' initial impressions of the interface and user experience, which is crucial in a fast-paced online environment. In the context of ticket booking, where users need to swiftly navigate through multiple steps like event selection, seat choice, and payment processing, the 5-second test offers valuable insights into the clarity of the interface and the intuitiveness of its design. By evaluating users' immediate reactions, we can gauge whether the website successfully communicates its actions and guides users through the booking process, ultimately enhancing their overall experience and increasing conversion rates.
"We're going to conduct a 5-second test to gather
quick insights into our Citi Bank Presale's user experience.
I'll show you a screenshot of the Citibank Presales platform
for just 5 seconds. During that time, I want you to focus on the overall layout, key features, and anything that grabs your attention. Once the 5 seconds are up, I'll ask you to recall specific details or share your initial impressions.
​
This exercise will help us understand how effectively our website communicates important information and captures users' attention in a fast-paced online environment."
Sample Model of 5 Seconds Test using Maze - Questions for users were similar
Competitve Analysis
As part of the efforts to enhance the Citibank Presales, I conducted a comprehensive competitive analysis comparing it with Amex Rewards and Benefits, a leading credit card competitor offering event booking and ticketing for Amex cardmembers. The purpose of this research was to gain valuable insights into the strengths and weaknesses of both platforms' UX across various aspects such as user interface, event discovery, booking flow, checkout process, mobile optimization, and customer support. By evaluating and contrasting these key elements, I aimed to identify opportunities for improvement and inform strategic decisions to elevate the Citibank Presales experience for the cardmembers.
_svg.png){kind=logo}
.png)
User Interview
In conducting user interviews for the Citibank Presales platform, a range of feedback was gathered to inform improvements. Users commonly expressed frustration with the platform's limited event selection and difficulties accessing presale offers. These insights highlighted the importance of addressing usability issues and enhancing transparency to improve user satisfaction and retention on the Citibank Presales platform.
01
Users want to find the event/artist easily without going through multiple clicks.
Limited availability of events or presale offers on Citibank Presales frustrate or confuse users on making selection of seats or book desired events quickly - they have to pay attention to hidden fees and information.
02
Users encounter challenges in accessing offers & exclusive events on Citibank Presale.
There are issues in navigating to the presale offer or event directly using the link or code given through Citibank homepage or e-mail newsletters. Users cannot access correct codes or offers
03
Users think the overall booking process can be more short and simple.
Often times, users said they may have to go back and forth through previous screens to double check fees or information they may have missed. Why not have information displayed throughout the flow?
04
Users become surprised by additional charges, fees, or information during the checkout.
They feel misled or confused by the unexpected results. User expectations are not met, meaning the service Citibank has to offer can led to a failure instead of satisfying users.
05
Users do not get the help or support they need when they run into problems or issues.
The customer service of Citibank Presales has been reported unsuccessful. When users are confused or upset by a purchase or overall flow, there are long wait times or no AI assistant to provide quick response.
Card Sorting
I conducted a collaborative card sorting session with cross-functional teams, including product managers and members of the business team, to evaluate the user flow of Citibank Presales and refine the booking and checkout process. We collectively categorized and prioritized key elements and features based on user expectations and business requirements. Through open discussions and consensus-building exercises, we gained valuable insights into user preferences and expectations for a seamless ticket purchasing journey. This session enabled us to align on the most effective approach for optimizing the user flow and meeting Citibank's presale ticket access objectives.
%20(1)_edited_edited.jpg)
Low Fidelity Wireframes
I developed a select few low-fidelity wireframes to brainstorm and map out the flow and layout, providing a simplified overview of the key features for each flow.
​
Among these, I prioritized designing the most crucial landing screen (home) for easy event or artist discovery. Additionally, I created wireframes illustrating the booking and checkout flow, offering a concise representation of the user journey. To enhance user navigation, I incorporated pop-up modals for mobile devices and slide-ins for computer screens, allowing users to access information effortlessly without going back and forth between screens.
High Fidelity Wireframes
I crafted high-fidelity wireframes for the Ticketmaster x Citibank Presales platforms, aligning them with their respective brand identities and characteristics while prioritizing an optimized user experience.
By integrating their specified features and objectives, I ensured the wireframes were comprehensive and intuitive, managing simplicity for an easy ticketing journey. An enhancement involved consolidating all pertinent information into a single screen, using pop-ups and slide ins, eliminating the need for users to navigate back and forth, creating frustration and ambiguity. This approach let users to effortlessly verify details as they progressed through the booking and checkout process, resolving any concerns about hidden fees or missing information.
To maintain brand cohesion, I used Citibank's distinctive color palette throughout the user flow, elevating the platform's visual coherence while reinforcing its identity. Rather than adopting Ticketmaster's color scheme, I held Citibank's brand image while increasing user engagement.
Additionally, I ensured that all relevant information was prominently showcased at each stage of the user journey, giving clarity and transparency across the entire process.
.png)
Summary
I led a project to improve Citibank Presales' ticket booking process, focusing on successful booking and checkout user experience and brand consistency. Through 5 Seconds Test, competitive analysis and user feedback, I identified pain points such as limited event selection and complex booking processes. Using low-fidelity wireframes, I planned the flow and layout, then designed high-fidelity wireframes with Citibank's brand colors. Features like pop-up modals and slide-ins were implemented to simplify booking. Iterating based on user feedback, the final deliverables optimized the ticket booking experience, emphasizing ease of use and transparency. I've mainly designed SaaS these past few years, but coming back to B2C products made me feel very proud of myself. This is now live on Citibank Entertainment (Citibank Presale). I wish I could experience it all as a user, too, but I do not own a Citibank card. I guess I can't experience it directly myself.