Integrate a data driven seating layout for your next event

Ticketpro  is a proud member of the Blue Label Telecoms group of companies that offers unique and specialized services in the eventing, sport and the transport space within South Africa.

They've asked us to design and build a stadium creator for their white label platform so third party organizers can integrate seating charts into their platforms. The development will utilize data to provide an exceptional reserved seat experience.

Role

Lead UX/UI Designer

Project Duration

3 months

Tools

Adobe XD
Sheets
‍Zeplin

Problem Statement

How can we have a data first approach to building a seating layout that also meets business requirements. From a setup perspective, this requires complex drawing and rendering logic that must handle rendering of large stadia at scale. The drawing tools need to allow multiple venue layouts.

Goal

The goal is to allow users enough flexibility to accurately illustrate a venue from a seating perspective. One of the core goals for this design is to decouple the venue from the pricing at the drawing level, but still allow venues to have enough information in the template to allow for feature rich pricing options. 

Roles and Responsibilities

I worked in close collaboration with Mobii Chief Technology Officer, Project Manager and Senior Developers. Later in the project, TicketPro stakeholders were involved.

Users and Audience

Third Party Organizers: Anyone on ticketpros white label platform can be a third party organizer. As long as they have a venue where they want to host an event and sell tickets they are the target audience.

Finding The Solution

Approach

Working closely with Mobii’s Chief Technological Officer and Senior Developer, we collaborated in order to solve the complexities of the brief provided, unraveling and identifying key design challenges to integrate a data first approach.

Stakeholder workshops:

We ran online workshops with the dev team, and some of the key stakeholders to tackle the design challenges identified and to look at the early build of the application.

We looked at the current build of the application, identifying key areas of improvement and understanding the data first approach

A look at the masterpieces being created in MS Paint to demonstrate the data first approach by the dev team.

High Quality Output

I delivered a complex, high-quality MVP prototype for Mobii and TicketPro in line with the Mobii design system. It was lovely to hear such amazing feedback from stakeholders!

Usability Testing

First Round

1
First build didn’t allow users to select seats and only filtered and chose the block where they wanted to be seated. 
2
There was lack of options to cater for various scenarios 
3
Buying package deals and season tickets was not considered

Second Round

1
Users found the packages button displayed to be overlooked easily as their attention is solely towards the panel on the left. 
2
Users found the add more ticket button was not prominent enough and struggled finding the option in the flow as they overlooked it (since the design prompt asked them to hurry in the made up situation)
3
There wasn’t enough feedback on which seat the users had selected and many of the older age group wanted to manually select the row and seat to their liking. 

Design Changes

After usability testing, Venue defaults replaced the tags and seat configuration buttons. It joins the two and adds more customization of the various functionality of the venue. 

In the components tab you can configure all colors and master seat/table sizing. The venue template makes use of detailed styles to control the rendering of the visual components. These default styles apply to blocks, suites, tables and seats.

To remove confusion that stakeholders had regarding the tagging system, a separate control for sections was created.

A section is a collection of blocks with similar pricing. Sections are set at the venue level, are not rendered on the map as a shape and are set on the block. Sections are added in the venue defaults, and can be selected on each block

I introduced various controls for each block, suite, and seating group. A lot of control for various use case scenarios were incorporated. All of which helped solve the business needs for the product. At the end I presented the final version of the stadium builder and received tremendous praise 👏

Lessons Learned

This project helped me in understanding the business side of work. It was a nice learning to put aside my love for a beautiful design for a design that meets the business requirements much better. As tough as it was to see my work being scrapped, I am proud of what the final product became and really helped me fight my own biasness towards my designs.

Short timeframe and development hassle. I learned a valuable lesson in collaborating more with developers, especially since we had a very small timeframe to get the MVP out. Talking about their daily requirements, frequently answering their design questions and making important design trade offs that met both the business and developers requirements was rewarding. It made me feel more a pivotal leader in tense situations.

Next Steps

Unfortunately no user research was conducted due to a small development timeline. A Post-launch research is required to tackle some of the design biasness which may have occurred due to this.

We need to make templates for existing stadiums, or generic ones to be offered to help users get started with their seating layouts.

More projects

If you enjoyed this, you will love these