SISTIC Ticketing Portal
Revamping the ticketing experience across all digital touchpoints
Overview
My Role
Design Lead | UI/UX Designer | Service Designer
Tools
Figma
Project Status
Live in production - https://www.sistic.com.sg
Identifying the Problem
User Interview
Conducted user interviews with various patrons and we have summarised and categorised their feedback into the following affinity map.
Evaluating the Existing Portal
By leveraging Hotjar Analytics, the following are the summary of some of the key quantitative findings during in research on the existing ticketing portal.
Click Counts/Patterns
The existing home page is cluttered with too many navigation menus at the header and also too many images at the bottom of the rotating carousel making it overwhelming and busy.
By using the click count tool from Hotjar, we further validated our point as we found out that majority of our patrons uses the left and right button to browse through the images on the rotating carousel as well as the search function.
In contrast, the messy navigation menus at the header and mini thumbnails below the rotating carousel does not attract many clicks.
Scrolling Heatmap
The existing home page is also cluttered with many events and shows cards that contains too many information such as the title, the date and time, the venue and genre tags. As the page is already visual heavy, other information like date and time, venu and genre may not be that significant here.
With the scrolling heatmap tool from Hotjar, we further validated our point as we found out that 50% of our patrons drop off at the "Currently Showing" mark, while only 36% of them reaches the bottom of the page, indicating that more patrons are less willing to scroll down further to browse more because of how content-heavy the page is.
Heuristic Evaluation Summary
In addition to the data we have gathered, we also reinforce our findings with a holistic evaluation of the usability of the existing portal using Jakob Nielsen's Usability Heuristics and potential improvements.
1. Aesthetic and Minimalistic Design
• Clear and simple main navigation header
• Straightforward links to improve users' navigation through the portal, helping them to find desired product more easily
• Minimal homepage layout and good usage of whitespace
• Reduce image/text clutter, to improve overall readability
• Give users ample of visual breathing room
• Only put pertinent information needed in cards (e.g. title)
• Less important information can be omitted in homepage cards (e.g. time, venue, price), but included in listing page cards
2. Consistency and Standards
• Improving visibility of featured products by placing prominent banner above the fold in homepage to showcase (e.g. static banner, static grid cards, or banners within a rotating carousel)
• Increase the chance of enticing users' interests in our featured products
3. Recognition Rather than Recall
• Consistent card style and listing layout throughout portal
• Reducing variations promotes consistency and reduces cognitive load
Design Improvements
After numerous rounds of ideation within the team and the business stakeholders, making sure our user-centred design meets business alignment as well, we went on to create our user flows and wireframes before designing the hi-fidelity prototypes.
Home Page
-
Unnecessary and insignificant multiple navigation menus are replaced with a simple and clean navigation header
-
Unused mini thumbnails below rotating carousel are replaced with train-stops/trackers instead to reduce image clutter
-
Less important event card information such as venue, date and time are removed to reduce content clutter
Event Listing Page
-
Added main genres at the top for quick filtering
-
Relocated the filters panel to the top instead of at the side to make it more accessible and easier to filter
-
Revamped the design of the cards buy removing the repetitive Buy Tickets CTA buttons, since the button will only redirect patrons to the event details page rather than to the booking page
Success Metrics
I have also set out the following success metrics to measure and validate our design improvements.
1. Improve User Satisfaction
To be able to increase the users' satisfaction ratings by 10-20% via post-purchase survey, annual patron survey and Braze analytics tool.
2. Improve Product Conversion
To be able to increase the conversion rate by 3 - 5% for patrons arriving from SISTIC Portal (browsing of events) to Booking Engine (potentially buying of tickets).
Analysing the Problems
User Persona
Customer Journey Map
To further empathise with our patrons, we also crafted the end-to-end journey of their experience with SISTIC. It is clear that from the CJM, patrons experienced the most struggle when they are browsing the portal searching and booking their events. Thus, my focus is very much in improving their events browsing and searching experience before they reach the booking of tickets pages.
