Product design strategy, UX research, Product design lead
Flex is a web-based point of sale tool. It’s aim is to provide a reliable, secure and easy to use platform to sell and fulfill tickets quickly anywhere. A way to look at it is that someone with a laptop and a printer with wi-fi connection could go to a park and sell tickets to someone and print it out.
Originally built as an MVP for 7 international markets, Flex now needed to scale up with new features to enter into new markets with new clients. We also had to start to address user feedback and usability issues related to the MVP.
Flex allows the client to sell tickets to anyone. The user can browse events that are for sale, select an event and pick the customer seats and number of tickets. They then proceed through the checkout flow to purchase the tickets for the customer. Tickets are printed or delivered by a method of choice. Should an issue arise from a previous order, the user can pull up the order details and change what is required or offer a full refund.
As Flex was an MVP, the core features were built so clients could use the product straight away. We had 3 main users for the product:
1. Box Office Manager
2. Outlet Seller
3. Call Centre Agent
After launching the product, we slowly started to receive feedback. We conducted on site and remote usability testing to identify issues and requests from clients and users. Each had the same, similar or unique feedback about how they used the product. We then ranked by occurrence and UX priority and consolidated them with the business priorities.
The list of issues was not something we could address in 6 months let alone in one year. We would be constantly updating the product to improve and enhance the product. For now we identified 4 main areas of the product with a number of issues and features that we wanted to address which would also allow the business to enter new markets. We also included and overall product goal.
Event List & Order details
Better search filtering
Give more control to users to customise their search
Event Details & Checkout
Clarity over speed
More prominence of ticket details
Show what matters
Section feels cluttered and overwhelming with information
Ability to sell Upsells on events
Reduce Cognitive Load
Ensure consistency and predictability with UI
Working the product manager and the Engineering lead, we came up with a roadmap to address the 4 areas of the product. Our approach would be an iterative way, spliting the roadmap into 3 release phases. This was to reassure our existing clients and users were releasing solutions quickly to help them sell tickets. It also meant we could also start to engage new clients in new markets, which was signed off by senior stakeholders in the business.
The phased release approach, would continue to be the prefered approach on how we updated the Flex product going forward. With each feature, we would engage users to test and validate our designs with inVision protoytpes.
Flex sits within the TM ONE platform. A user would sign into the platform and be presented by a side navigation of products that they have access to. For a comparison, you can think of Adobe creative suite. It was developed by the US team and was still fairly new. The platform was separated for North American and International clients due to the different products available in the markets.
There was no design system for in place for TM ONE and US team only had basic UI components. As part of this project, we were going to refresh the UI for Flex which would resolve some of the users' concern of Flex being cluttered. We would be sharing our UI components with the US team to make sure that both teams had a consistent design language within the TM ONE platform. (I will be writing up a separate case study on this soon.)
The event list page was the landing page for Flex. Once you had logged in you would see the list of events that was available in a venue for months in advance. Clicking on an event would take you to the Event details page to select tickets. The event list also showed events that the user had favoured and orders that are being processed. In all, it was a very overwhelming and cluttered experience for users. The main criticism was that fact they found it difficult to filter the events to specific days and times.
We removed the sidebar component from the app entirely as it was something users had already said was quite slow and cumbersome to interact with. Currently it showed a list of customer orders and favourite events. We added Orders as navigational item on the top header and created a stand alone orders list page. We moved favourites into the event list as it was action relevent for that page and not universal to the product to be placed in the top navigation.
Improving the search functionality was the key requirement for this section. Firstly we created instant search results. As the user typed in the search box, results would instantly be generated underneath. Secondly, we introduced a set of filtering options that the user can search by date range and categories.
For the seat selection using the Interactive Seat map, we had the challenge of showing the seats that had been selected by the user higher up the screen. The current layout places the seat information at the bottom of the map and not in view when using the map on smaller screen sizes. The user would have to constantly scroll up and down to see the map and the seat selection information. We had to come up with a solution that would avoid this scrolling up and down and work on a tablet with a small screen size.
Since we had decided to remove the side bar from the product, our solution was to utilise this space to store the ticket information as "cards" in a shopping basket column that was side by side to the map. Thus, the user would always see the map and the selected tickets at the same time and eliminate the scrolling down issue.
It was important for that the UI components would scale to fit the local languages where the product would be used. It was part of our design process to design and work with engineering on localization.
The checkout process was a major pain point for users. A lot of information was packed into 2 pages which made filling out information slow. Users also complained with the amount of information that was display. Not every information needed to be shown straight away.
To resolve the issues we conducted 3 rounds of remote usability testing with designs on inVision prototypes. We found that by splitting up the check out process step by step, made it quicker for users to go through checkout. They were able to focus on one section at a time and reduce any cognitive load. We only surfaced key information and used tool tips to show extra information when required.
The new section to checkout, Upsells, was found to be best placed at the beginning. Our designs did initially include a progress bar to show where the user was during the checkout process. But due to technical restraints, it was not possible to build it for now.
Our solution also continued the use of the UI component of the shopping basket that was on the event details page. By keeping this consistent UI pattern, we help reduced the cognitive load for our users. It also eliminated the scrolling up and down to see information.
For the confirmation page, we designed it differently in that the layout changed to show a summary card. We wanted to illicit a feeling of accomplishment that the checkout process has been completed. Users reacted positively to the new layout change, saying it made them feel like the “purchase transaction was complete and secure, and they could move onto the next customer”
Outcome & Next Steps
"After 31 years in this company, with systems partly being very cumbersome and hard to work with, it is a relief and joy to see a web based ticket system that WORKS. Creds to all involved!"
Norway Outlet User
"So easy to use, my colleague was worried that she was missing something!!!"
UK Box Office Manager
We got some great feedback to all 3 product releases for Flex. But that was just the beginning. We continued to work on the list of issues that was collected previously. We conducted on site and remote usability testing with clients. And as the product moved into new markets, we continuously monitored and refined the features as well as adding new features to help our clients sell tickets.