A Power App for ordering discounted cinema tickets

[davidstone]

The problem we solved

Our staff have a social club available to join, run by volunteers, through which we can obtain discounts on events and tickets. When we run events, they are listed in our ‘Event Hub' Power App and they're easy to find and book onto. But for tickets that don't relate to one-off events there was no obvious way to make them available.

A lot of the time it relied on people just knowing what was available, how to get them and from whom. Fine for long standing members but a struggle for new ones.

This meant the process of providing tickets always involved repetitive back and forth discussion, and with more than 400 members this took a lot of time from our volunteers. In addition, they still had to maintain a big spreadsheet with all the ticket and sale details, and let's face it, no-one likes a single spreadsheet becoming part of their daily lives!

In addition, very often you're already home from work when you suddenly decide you fancy going to the cinema. Imagine it's Friday evening, you know you can get discounted tickets, but by now it could be 5 days before someone picks up and has time to process your order.

Enter: The Club Tickets App

As you can see on the first screen of our app, we've made it nice and obvious what to click to obtain the ‘e-tickets'. We actually changed the wording on the buttons a number of times based on feedback from different users who felt they could be more obvious. One thing we learned is not to include verbs – you don't need to say ‘Get e-tickets' or ‘View purchased tickets'.

What you see on this screen is a gallery, which is connected to a SharePoint List of ticket types. On the home screen you might have noticed the ‘Other discounts' button – that also brings you to this gallery. Each button applies a filter, so we show one type of ticket or the other. This is more efficient than having two different screens with a gallery each.

User Experience

Each row in the gallery is composed of a few objects, from a simple rectangle for the backdrop, to invisible buttons that are placed ‘on top' of the + and - buttons. The reason for that is touch; on a phone interface those circles are relatively small, but the real buttons we use to capture the ‘click' are about 60% bigger.

This is the kind of thing your users would probably not notice, but it definitely makes the app experience easier and more enjoyable.

Collecting tickets

What each button done is collect (literally, with the Collect function) a ticket into a collection. The number between the buttons is then a count of the number of tickets in our collection having the same name.

There are some conditions too – each ticket type has an individual limit (you can only order 2x ‘Cinema2 Super', and you can order a maximum of 10 tickets of any combinations of type.

Two things happen when you select your first ticket. A new button appears, along with the total cost of any tickets you add. You are also restricted to a single company; you can't buy tickets from two different organisations in the same transaction.

Much of this is because the terms and conditions for each organisation are different, and are supplied to the user in an email generated at the end of the order process.

UX from feedback

In an earlier version of the app the other organisations would disappear once you chose one, but feedback suggested this was confusing because it made the contents of the gallery ‘jump'. When it comes to UX, just because something works doesn't mean it's the best experience for the user.

The ‘Review your order' button takes you to a screen to do just that. Note that what's shown in the gallery on this page is a summary of the order, so the price shown reflects the ticket price multiplied by the number ordered.

Payment info

Another important point is that we of course can't take payment for these tickets through a Power App. We handle our payments outside of the app, and the ticket transactions are done based on trust. The user cannot proceed until they have checked the box to confirm payment has been made. And of course, everything is fully audited!

Kicking off the order

Once the ‘Send me my tickets' button is pressed, a number of steps are taken.

• We create an order ID
• We write an entry to a SharePoint List for each ticket requested, along with the order ID, and we submit those using a ForAll and a Patch
• We write an entry to a separate List, which becomes the actual order
• We refresh the list of orders and navigate to the final page

On this page you can see all your previous orders. You can visit this page directly from the home screen as well if you've purchased tickets previously and need to check your codes. But during the ordering process you will see the most recent entry is in progress...

Your order will Flow...

As shown at the top, this can take up to 5 minutes. Why? Because the order is being handled by a flow in Power Automate, and under the current licensing model our organisation is using, flows that are automated (rather than triggered by a user or button press) will begin any time within a 5 minute window.

Now you may be thinking, ‘hang on, this was triggered by a user and a button press'. Actually, all the user does is write an entry to a List. Our order-processing flow is triggered by ‘When an item is created' on that List, and there are two important reasons for that: security and concurrency.

Security and Concurrency

First of all, we need to be sure we only process one order at a time so that we don't inadvertently provide the same unique ticket code to two different people. This can be done really simply in Power Automate, by editing the settings on the trigger of your flow and setting concurrency to 1.

Next, we want to ensure that no user can browse into SharePoint and find all the ticket codes sitting there in a SharePoint List. In fact, none of the users have read access to the list. But still they get their tickets from it – how?

Using a flow with an automatic trigger, you get to select which user the flow will run as. Our flow uses the one user that does have access to the list, to retrieve ticket codes and to update that ticket as sold so it can't be used again.

5 minutes instead of 5 days

Once the flow has obtained a code for each ticket requested it updates the original order, and sends the codes and the associated terms and conditions via email to the user. Meanwhile in the app, the user has two options for getting their tickets. One is to simply wait: the order process initiates a Power Apps timer that refreshes the order history every 30 seconds. They can also manually refresh or view the codes as they arrive in their email. Once the codes are ready, the user can click to view them in a pop-up in the app.

With the changes to the way Power Automate is licensed from October 2019, this 5 minute window will eventually disappear. In the meantime, 5 minutes is a dramatic improvement for our users who would otherwise struggle to get tickets when they need them.

Keeping stock

As tickets are sold they will obviously need to be replaced, so the final actions in the same flow are to take stock. If any of the tickets are below the desired minimum stock level, an email is sent to the administrators advising them stock is running low.

Three weeks later

Prior to the app we tended to sell a handful of tickets per week. In the first three weeks since the app was launched we sold almost 350 tickets! Our next project to launch is an internal charity auction app, and I'll be back to blog about that once the auction is done.