Virtuous realities

The digital portfolio of Omar Mashaal

Lead digital engineer at the Museum of Old and New Art

ticket blaster

Ticket Blaster

Museum ticketing in the year 2000

For some reason, the Museum of Old and New Art let me burn down their previous digital ticketing platform and replace it with something modern. It was quite a thankless task, as ticketing is one of the least cool things imaginable.


User Feedback on Mona's previous digital ticketing experience

Dear Customer Service Representative,

We have just ordered tickets online for both museum entry and ferry.

I am emailing to let you know that I found the system of buying these tickets online both excruciatingly tedious and time-wasting. I suggest you streamline the process. Do you really, really need people to 'create an account'? What about a 'guest' user situation, as used by sophisticated websites? It seems to me that, if people simply rang to book tickets, the process would be a lot better for the user than having to 'create an account'.

Yours faithfully,
░░░░░░░░░░░░░░░░

I do not want an account with Mona and I request that you immediately delete my account, and all my personal details, including all backups. I was forced to open an account with you in order to buy tickets online, and to provide what I consider to be an unreasonable amount of personal information. I consider this to be a violation of my privacy. I would also like to say that I love your museum and would be happy to visit again. It should not be necessary to provide you with enough information to obtain a passport in my name in order to do so.

Thanks and regards,
░░░░░░░░░░░░░░░░

feedback

🤦‍♂️ 🤦‍♀️

What went wrong?

  • Forced user accounts - No guest checkout option, and accounts required an absurd amount of personal information
  • Unmaintainable - A checkout flow that spanned 3 (three) separate domains and codebases
  • Unscalable - The platform would regularly crash as soon as ~100 users would use the service
  • Inflexible - Unable to integrate with other services because it was locked into one proprietary platform
  • Poor user experience did not match the quality and uniqueness of the on-site experience
  • Hellish 'CMS' normalised manually entering raw HTML into SQL tables


One way ticket to paradise

paper giant

We took a giant step back, and looked at our offerings and customer journey from a holistic perspective. Paper Giant, a strategic design consultancy, was brought on board to help with this process. The sessions, which involved multiple stakeholders and cluster members, at times, became very heated.

ux team

We identified 5 primary user groups, and focussed on building user journeys that were flexible, simple, and allowed continued business growth. The results of this research spawned detailed wireframes, as well as interactive prototypes.

paper giant

A very early prototype

very early prototype


Transitioning

rubbish

Our goal was to smoothly transition from one digital platform to another. Mona previously used TNEW, an off-the-shelf solution offered by Tessitura. While fine for basic ticketing, over time the laundry list of compromises made in order to keep using it far outweighed it's benefits.

To provide us with more flexibility, we developed a custom API built on top of Tessitura's available REST API. I was very cautious, aiming to avoid any breaking changes in between our transitioning. In fact, both TNEW and our new platform can be run concurrently.

Features we could now provide

  • Modern UX/UI with a focus on simplicity, branding and copywriting
  • Improved privacy by auditing and minimising all information requested from visitors
  • Guest checkout
  • Customised trip planning functionality
  • Modern CMS powered by Contentful
  • Double day packages
  • Integration with our 3rd party restaurant booking platform
  • Integration with 3rd party gift card and payment providers
  • International phone number and address verification via Google
  • Improved stability, performance, and accessibility

Technical debt we removed

  • Complete removal of our legacy Single Sign On platform, servers, and codebases
  • 2 TNEW instances (staging and production)
  • TNEW customisations, hosted outside of TNEW, built with the legacy SOAP API
  • Microsoft IIS web servers 🎉

mona tessitura


Data Collection

As per the complaints above, one of the most offensive things about our previous digital platform was the amount of personal information we required of visitors. Believe it or not, we were actually asking users what their city of birth, and father's middle name was! There was also 3 page of forms to fill out before completing your checkout...

Keep in mind -- this was all to visit an art museum!

First NameAddressCard Type
Last NameMore AddressCard Number
Email address (x2)CityName on Card
Password (x2)State/ProvExpiry Month
Security QuestionPostal CodeExpiry Year
Security AnswerCountrySecurity Code
CountryPhone NumberReferral
PostcodeShipping methodTerms and Conditions
Terms and Conditions

We were able to safely remove all unnecessary information, and provide users with one simple form. International phone numbers and address are validated by Google, and now our data comes back clean (no typos). The museum can now look forward to having SMS integration in the future.

checkout



Trip Guide

special artworks

Mona's offerings include museum entry, three timed exhibits, two restaurants, a winery, a brewery, as well as transport options which include ferries, buses, and bikes. Everyone's experience is quite different, and trying to fit everything into one day can be a lot to take on.

getting to mona

We designed this experience to smartly know what other stuff you can do on the day of your visit...

...as well as let you know when something you're already seeing conflicts with another.

conflict resolution


Food + Art

eyeball margarita

Mona use a third-party booking platform for restaurant bookings called Book Book. Previously, our museum and restaurant bookings needed to be made on separate websites, in separate transactions. Now, visitors can do this all at once.

faro+museum

cat review



Warnings + Disclaimers

Polly is a text-to-speech service offered by Amazon. It's quite a bit of fun to play with, and we toyed with the idea of having these voices read out warning and fine print sections of our ticketing sections. The effect is strange and uncanny, while offering a deeper level of immersion.

fine print

I created a Polly context hook which allows us to dynamically speak legal print that's input into our CMS. A voice is randomly chosen to speak the text each time.

const Disclaimer = ({ copy, title }) => {
  const dom = useRef()
  let { speak, speaking } = useContext(Polly)
  return (
    <Box>
      <Content ref={dom}>
        <ReactMarkdown source={copy} />
      </Content>
      <Button disabled={speaking} onClick={() => speak(dom.current.innerText)}>
        READ ME THE {title} IN A ROBOT VOICE
      </Button>
    </Box>
  )
}

Deploying

We were able to transition between digital platforms seamlessly, with zero downtime. The only minor issues we ran into were the dreaded Internet Explorer, and times displaying incorrectly across multiple timezones -- two of the internet's darkest, everlasting problems.

I have had two people contact Ticket Support today to advise that they have had issues after they click the "buy" button via the new pathway.

░░░░░░░ said she was using a PC with Explora.

░░░░░░░░░░░░░░░░

Internet Explora (RIP) does not understand international date formats, and needs to be polyfilled.

date-fns is a great library for handling dates, as well as timezones. We ran into a few cases of times formatting in the user's local time, instead of Hobart time. This was resolved by using this extension.

⛲️

Shortly after launch, we added a kiosk mode for usage in the Tasmanian Travel & Information Centre which offers a modified user-experience.

kiosk


slack money bot

Read about Slack bots: Automating love, money and power.