Wembley
Upon an attempt to purchase tickets to a one-time event on Wembley’s website, I took it upon myself to come up with several update suggestions following a heuristic evaluation
role:
Product Designer
Heuristic Evaluation
UX strategy
UX design
Wembley tickets is a personal project
Step one: Discover
The problem:
Wembley’s ticket purchasing platform is difficult to use and does not adheres to best practice rules of user experience.
Business goals:
Make it easier for new users to complete a purchase with as little friction as possible, and easily present information they might require, or allow them to seek it easily and intuitively.
I conducted a heuristic evaluation, noting down every instance of friction I encountered, keeping the Laws of UX in mind.
Heuristic Evaluation
Market research
I research several other market leading and sports events products to see how they showcase the seat selection process, and better understand what are the industry conventions.
Some of the key similarities were:
Visual aid with a map layout of the ground is common
Seat selection autonomy ranges from very specific seat (like on TodayTix) to more general areas. Ticketmaster, for example, allows for different types of selection based on the venue and the event holder.
All products list the exact or a range of prices.
Most products provide a place to gain further information on the ticket types, if more than one is available.
Step two: Define
I divided all the issues I encountered by severity; from major user experience issues, to small cosmetic issues, keeping in mind the business goal I’ve set for this project, which would make the experience easier for new users.
How Might We…
-
Make customers feel like they made a smart, calculated choice?
-
Make it easy to find and choose the most fitting tickets for users?
ideation
Website
I decided to keep the ticket purchase platform as a website, as there’s a vast amount of information that needs to be displayed, as well as a high resolution map. It also appears to be the industry standard, as seen in the market research.
Independence
By giving users the ability to choose their specific seat rather than choosing a general area, it ensures users are content with their choice. They can also easily see which seats are available, so they can make a well-informed decision with the seats that are available. When choosing a “best available” it bears the question what does the algorithm define as “best” - some users might have different preferences.
Information
One of the major UX issues I’ve encountered was the lack of information in the current design. I wanted to make sure information is clearly displayed in the redesign, or places to inquire more information are accessible.
Map
Keeping with the industry standard, I opted to focus the design around the map, making it interactive to allow for user autonomy. It also allows to consolidate map-related features that were scattered around the process (like the “view from my seat” being at the second step) into one area of the design.
Step three: Develop
Inspired by the market research, and keeping in mind the major user experience issues that I aimed to fix, I sketched out several ideas.
I then created mid-fidelity wireframes in Figma. Originally the first step of the design consisted of two collapsable parts - the first for ticket type selection and the second to allow for specific seat selection. However, upon further deliberation, I concluded it would be best to move the ticket type selection to the second step of the process as most of them apply a discount effect, that most commonly appears at the order review stage.
Change #1
The original design consisted of a static image of a map that included a list of categories with no information regarding their meaning. In addition, fields required an excess of clicks, fields marked as mendatory that can be left blank, tabs for various ticket types with no information regarding eligibility for them, and no prices at all.
In the redesign, the map is the focal point of the design - it is interactive and allows for the user to zoom into specific sections, and not only clearly specifies prices, but allows users to search for a seat based on the amount they’re willing to pay. I also rearranged the visual elements so that the ticket selection takes the most space, as it is the main function.
Change #2
The original second step included a tab for order details, with a detail of the allocated block, row and seat that was chosen for users without an ability to change it, unless they navigated back and chose a different area or block. This section also included a “view from the seat”. The “delivery method” tab and “order total” are separated and the double column design makes the flow of the page confusing.
In the redesign, I took inspiration from common retail checkout experiences, where the order details are mentioned at the top (including a highlighted area chosen by the users). Delivery details appear in the same window as they affect the order total, as well as concessions and other discount type effects, nullifying the need for tabs in the previous page. In addition, I added an information pop up that would further clarify any confusion users might have regarding it. Group tickets (8 or more seats) would be applied automatically, as is if the appropriate mixture of adults and children tickets were chosen for a family ticket pack (users would have to provide proof of concessions at a future step).
The countdown clock was moved to this stage, as now the chosen tickets are being reserved for the users to complete the checkout process. Navigating back to the map to choose different seats would release those tickets.
Step Four: Deliver
I created an interactive prototype on Figma to show the new redesign
How would we measure success?
less than 20%
of users navigating back to choose different seats
Decrease
In user inquiries regarding ticket type information
at least 50%
faster purchase process
Project
Reflections
No clear business goals
I created this project to cater to new users who are interested in a one-time event hosted by Wembley. However, Wembley might prioritise returning and super users who attend seasonal events throughout the year, who might have different prioritisations. However, some of the suggestions I offered in this project can help users across the board, regardless of expertise.
Technological feasibility
As I’m not exposed to the back-end systems of Wembley’s website, I couldn’t discuss the technical limitations of this redesign with developers and engineers. Some events at Wembley are highly popular, and have a large number of users attempting to choose seats, which might generate a heavy load on the servers and might cause technical errors.
Limited testing
No usability testing was made just yet, which is necessary and would likely lead to further iterations. Once those are done, further testing is advised, as well as possible A/B testing to check if the redesign achieves the suggested KPIs.