Purchase Tickets

Part 2: adding a ticketing system to the event feature on a SaaS community platform Open Social.

High Fi - Attendee edited 5.png
MacBook Pro Mockup on the couch.png

PROJECT SUMMARY

BACKGROUND

Open Social is an open web (SaaS) community engagement platform that is used by over 1000 organizations to create their own customizable online community platforms.
Events are one of the
core functions of Open Social that is used by a lot of their clients as one of the main engagement drivers.

PROBLEM

While the payment process is available, the end-users are still forced to use third party tools to sell tickets for events. The client wanted the organizations to be able to access and personalize the whole event flow, from start to finish on the product.

BUSINESS IMPACT

Research and design a system that would enable 30% more engaged members in the communities (end-users) within a year and create secondary revenue streams for Open Social.

MY ROLE

UX/UI Designer (Research, IA, User Flows, Prototyping, Usability Testing, Interaction Design, Project management)

TEAM

UX/UI Designers:
Myself (Dagija Kugeviciute),  Annemijn Pikaar, María Arranz Domínguez

PROJECT TYPE

Responsive ticketing feature, SaaS

TOOLS

Figma, Maze, Google Suite, Trello, Otter, Pen & Paper

DURATION

1 week, Jul 2021

SOLUTION

A responsive and well-integrated ticketing system that allows an

Event attendee*

to purchase and access the tickets seamlessly.

Sitting On Floor.png

* Any person who wants to attend an event organised by a community

PROCESS OVERVIEW

Throughout the project we worked in close collaboration with Product Manager and Developers of Open Social.

Time constraint: 1 week for one side of the ticketing system – purchasing tickets.

Design process OS.png

RESEARCH

As this side of the ticketing system is related to the case study Manage Tickets, two important parts - market analysis and feature comparison have been covered there.

HOW DO WE MAKE OUR TICKETING SYSTEM TRUSTWORTHY FOR AN EVENT ATTENDEE?

To cater the final product towards the needs of event attendees was just as necessary as to community event managers to guarantee that communities continue to thrive. This time, we targeted any person who has ever purchased a ticket for an event.
We wanted to better understand the following:

Sitting On Floor.png

3 user interviews & 26 surveys

How do people currently buy event tickets & make payments?

What problems do they face when when buying tickets?

What is important when purchasing a ticket to an event?

HAVING TOO FILL-IN TOO MUCH INFORMATION LEADS TO ABANDONED BASKETS

63%

thought that when purchasing an online ticket, the process takes way too long.

50%

thought that when purchasing an online ticket in the past few months, the ticket was very difficult to access.

46%

finds it very important that they can buy a ticket on an event organizer’s website.

43%

spends 7 - 10 minutes or longer to buy a ticket for an event

unsplash_PZao9UjlbMY.png

People use a variety of payment methods and expect them on a trustworthy website.

“It should be a super simple and super fast process. I would imagine that a lot of people give up buying tickets if it asks you for too many details or too many questions.”

- EVENT TICKET BUYER

The user persona was created based on the data from the user research.

Event Attendee Persona.png

User Persona - Event Attendee

Since most of the changes to tickets depend on the event manager's side, I mainly focused on illustrating a happy flow of the attendee when buying a ticket to see if I can optimize it. At this point, no major changes were done.

Final User Flow Event Attendees.png

User flow event attendee

CONCEPT SKETCHES HELPED US TO ALIGN DESIGN DECISIONS WITHIN THE TEAM

Now that we had identified clear user flows, we moved forward with low-fidelity sketches.

At first, we had some disagreements regarding what features to implement in terms of check box for notifications about new events. However, we soon realised that based on our user research, it would just increase the required steps for the user and it was not an MVP.

concept - 1.png

Low-fi wireframe purchasing tickets

RESPONSIVE MID-FIDELITY PROTOTYPES READY FOR TESTING

Below are some of the main pages of mi-fi wireframes we used to test and iterate with.

Page: Tickets

Focused on simplicity and minimize the steps the user needs to take in order to assure fast check-out experience.

1

4-stage progress indicator:

Assures better UX by indicating the direction of movement so the users are aware where they are in a process.

2

Brief Personal details:

Solves the user pain of spending too long on inputting unnecessary personal details.

3

Promotional code input option:

Attracts new community members and allows to create secondary revenue streams for OS.

Group 5430.png

Mid-fi wireframes Event Attendee

image 62.png

ONE TOO MANY CLICKS

After the mid-fi prototypes were ready, we conducted usability tests by Maze to validate our design decisions.

We found out
that the users had to do TWO clicks when selecting the tickets making the flow unclear.

SO WE DID SOME MINOR ITERATIONS BASED ON THE FEEDBACK...

Frame 3198.png

VISUAL DESIGN

Moving to the high fidelity design we did a couple more adjustments to optimize the flow.

Frame 5106.png
iPad Pro 12.9_ Screen Mockup.png

CHALLENGES & LEARNINGS

Customizable platform

Since the end-users of Open Social can customize the colours and other elements of the platform, when creating the prototypes we could not put enough attention to WCAG accessibility principles.

Usability tests are key

I was reminded the importance of the usability tests which led us to several iterations - meeting the actual user’s needs.

IF I HAD MORE TIME I WOULD...

Improve the UI

I would try to improve the design to require even less scrolling.

Evaluate other use cases

Due to time limitations, we could not evaluate other use cases such as free tickets or donation tickets.

Would you like to read more in detail about the process?