A new website for ACMI

Lucie Paterson
ACMI LABS
Published in
11 min readDec 21, 2016

--

You might have noticed our website looks a little different. Well, you are correct — it is a brand new ACMI website.

From the approach, design and front end to the CMS, hosting and the processes to get events ticketed and content published — everything under the hood. It’s all been changed — and all in four months.

The new homepage on desktop — Museum, Cinemas, Ideas
And the ‘homepages’ on mobile —which represent more than half our traffic

It all started in August when our CEO decided that waiting another year to rebuild the website was too problematic. The existing website was not doing us any favours — it was difficult for users to browse the program, it didn’t communicate who we are and it was built on technology that was costly to upgrade and develop on.

We gave ourselves until Christmas to get something launched and to be honest in the early weeks I was skeptical. I had only been at the organisation a few months and having come from Southbank Centre, we gave ourselves two years for the Southbank Website Transformation Project. Five months seemed impossible.

The short timeframe was important for a few reasons:

  1. We launched a internal brand refresh whose core values (‘bold, playful smart’) were was vastly different to how ACMI was represented and experienced on the old website.
  2. A new film program and pricing was due to be released on Boxing Day (December 26)— the site needed to be competitive with other cinemas and represent films in a way that both film-goers and film distributors expect.
  3. We couldn’t spend years on a website as the previous one had launched only 18 months prior.
  4. We were facing a costly and time-consuming upgrade from the existing CMS, Umbraco 6 to Umbraco 7, which would have involved considerable rewrites to the codebase due to deprecated package dependencies.
  5. The distributed publishing setup we had setup inside Umbraco, but never activated, was slow and cumbersome and would have involved considerable rewrites to get it to a performant and user-friendly state.

Given the short timeframes, to keep the scope tight and internal stakeholders focused we focussed the brief on three high level user journeys.

Key user journeys

  • A visitor that knows when they are free but not what we have on at that time.
  • A visitor who knows what they are interested in but not what ACMI has to offer them.
  • A visitor who has heard about a particular event and wants to find out more about it.

These account for the 80% of our visitors — with a slight skew to newcomers/first-timers. Of course, there’s also students and teachers, corporate partners, sponsors and job seekers but we were determined to not get sidetracked by the 20%. Otherwise (speaking from experience), you end up trying to please everyone and you have a website that doesn’t service anyone particularly well and you don’t get the website built at all.

We knew we’d need help from external parties to design and build the new website as it would have taken Andrew, our very capable developer a long time on his own. We kept the budget very tight and worked it around a co-development/co-design model — maximising the use of in-house resources wherever possible.

Project scope

  1. Design a mobile ­first front­ end able to meet users drawn from our current customer segmentation attempting three key user journeys.
  2. Create a pattern library for evolving the structure and front end design over time.
  3. Technical implementation with a new CMS and guidance on infrastructure and hosting, including managing security, backup and scaling included.

But wait, there’s more.

Internally we had started on a journey to build our own purchase path for general admission tickets. This would improve the user experience and streamline the purchase path for visitors from seven clicks (including customer login) with Tessitura’s online system TNEW to just three (also removing the need to login) by building our own on top of Tessitura’s API. This new functionality is planned to go live in January.

In the brief to agencies we also included how we liked to work. As Product Manager, I would be doing the project management, I had to make sure the people we would be working with wanted to work in the same way.

Here’s how we described that in the brief:

How we like to work

The working relationship with the selected partner/s is very important. We want the project to be a fun and challenging one this is a collaboration of brilliant minds.

Transparency and openness: we want to work in a transparent way, where code is hosted in GitHub and we can see it as you write it from day one, have daily check ins and as much face to face as possible. We work in a co­working space so why not come and join us at ACMI X for the duration of the project.

User testing throughout: testing with real users is important to the success of the website. We will recruit people from our database and from a third party recruiter to get a less biased audience. We’re used to working with tools such as Optimal Sort and conducting user testing so welcome a well thought out plan for how you would approach this.

Agile ways of working: we employ many agile ways of working but are no means a purely Scrum team. We believe in conversations and iterative prototyping over lengthy specification documents and launching with a big bang. We value working code over psd mock ups. We want to get to running code as soon as possible so we can iterate on the design as it evolves because scope will change as we go.

We ended up partnering with people who had a lot of experience working within our sector but also people who had the right culture fit. Boccalatte did the design and The Interaction Consortium (IC) did the build on their open source CMS for the cultural sector, GLAMkit. (Andy’s got a big post on migrating from Umbraco to GLAMkit coming up shortly)

The design

The new design needed to communicate who ACMI is, especially after the internal brand refresh. And it needed to be mobile first as more than 50% (and increasing) of our local visitors were visiting the website from their mobile and increasingly using their phones when they’re at the museum too. (We knew that going mobile-first, really meant going ‘mobile-preferred’ and we’re still working through the consequences of that for our still significant, but diminishing, non-mobile users, which, of course, includes most staff!)

Museum, Cinemas, Ideas
In the brand refresh, we’ve explicitly started called ACMI ‘a museum’. Perhaps its bucking the trend in museums away from the term. We’re a special type of museum, though, in that we also have cinemas, and very dynamic, immersive and interactive exhibitions. To help our audiences understand this we had to start using the right language and design tropes for both the ‘museum’ and ‘cinema’ parts of our identity.

When you think of a museum in the context of a web user experience, ‘Museum’ is about ‘What’s on’ and ‘Exhibitions’, ‘Events’, ‘Education’ and perhaps timed entry. When is comes to cinemas you are looking for ‘Now showing’, ‘Coming soon’ and ‘Session times’. As a user you are also used to seeing specific visual clues on a cinema website like the film posters and rating icons. These are all things we take for granted but help users identify a film as distinct from an exhibition and for the website to be successful and drive visitation we had to consider all of this.

It is now clear we have cinemas from any page and we’re using language like ‘Now showing’ and ‘Coming soon’
We’re using the film classification icon, the use of the word ‘Sessions’ and the trailer is in a prominent position

Ideas are what underpin the museum — the reason we screen what we screen, exhibit what we exhibit, and we wanted this to be at the heart of the new website. The Ideas section is where you’ll find content about what ACMI cares about, what we know about, and what we want to talk with our visitors about.

On the previous website it was very easy to get stuck on a page with nowhere to go. We wanted to make sure visitors could continue to explore our content and discover something they didn’t expect. Ideas are the foundation of this. This has been a huge shift content production wise because there is more cross-departmental thought required than with the previous ‘blog style’ ACMI Channel which was largely driven by Marketing. Shelley led this and worked with all parts of the organisation to get the section together. She’ll be posting a full breakdown of this change shortly too.

Related content to this film: another anime film, an animation workshop and content about fan cultures

Calendar
Ultimately it’s the calendar that visitors use to find what we have on so this piece was the most important feature to get right. From my time at Southbank Centre and doing much lab-based user testing we knew that most users just wanted a list in chronological order of what was on and a way to move between days that they are available. Including Day and Night filters was a good way to reduce the amount of content a user has to scroll through and it also works well with the museum and cinema visitor — generally museums are visited during the day and cinemas at night.

One thing we’ve removed, for the time being, is the ability to view multiple days at once — a ‘week/month at a glance’ view.

List view of everything in chronological order of what you can do today with calendar to change the date

How did it work?
Boccalatte are a Sydney-based design firm so we only had some face to face time in Melbourne but worked across Slack and InVision to see ‘working’ wireframes and designs. We saw wires and designs every couple of days so there were no surprises. They also worked in a modular way to save time — instead of designing every template they designed modules that would work across templates so as to not repeat work. We also worked in Mural for high level decision making on content types, templates and information architecture.

The development

This is where things got really exciting. The PSDs were sent to the developers who had been involved in the wireframing and design from the beginning and then we started to see things take shape from week one.

Our instance of GLAMkit was up and running within a few weeks and we could start adding content in. It evolved every day and Jenny Lee and Jessica Kemp persevered adding content field by field into the CMS as it was built before our very eyes. Jenny and Jessica work on a casual basis for the museum in our Visitor Services and Education teams so already had vast knowledge of our visitors which was invaluable in a project with such a quick turn around.

Andrew is going to write posts about his experience working with IC, Django, GLAMkit and about the move to cloud-based hosting with AWS so I’ll leave this section brief.

Launch

We launched on 13 December in what was the smoothest go live of my career. There were a couple of critical issues we had to sort — 0ne before and one post launch and both were handled very quickly. It was an incredibly busy few weeks prior to launch but then the night of launch was our organisational Christmas Party so the team got to let their hair down … and then come back to work the following day ready to get to work fixing minor bugs and making edits to content.

The site is now in a ‘perpetual beta’. We’ve communicated far and wide that there will always be issues but that we’re in a far better position to address them now. Colleagues log issues in a Trello board dedicated to the new website. If they are content related they were shown how to make the changes themselves in the CMS. If they were more technical issues we raise a ticket for Andy or IC to take a look.

The tools we used

The approach from the get go was one of transparency and collaboration and working code before documentation so it was important the tools we used had the same philosophy.

Slack for all online communication between teams at the museum and the partner agencies. Sharing ideas of other websites liked, draft wireframes. Everything! No email!

Trello for project planning and content idea generation and planning. All bugs and issues our colleagues found were also added to a testing board.

Mural for agreeing content types and the information architecture.

InVision for presenting design PSDs and user journeys.

Waffle for a user friendly view of issues in GitHub. This is where I did all the issue prioritisation and the managing of issues through the workflow to tested and done.

What happens now?

In January we’ll focus our attention to finishing the purchase path for general admission tickets.

We’ll work with teams on the new processes making sure they are getting their events online and tickets built in the right way with no fuss and do more on the Ideas section — getting people writing about what they know about and how they do what they do.

We’ll get people thinking about how they can use the Related part of pages better to link off to content visitors might be wondering about while on that page and put something new in front of them.

We’ll work on upskilling technical staff in Django and AWS hosting so that we bring as much of this knowledge in house that’s reasonable.

We’ve learnt a huge amount from going through this process, so over the coming weeks we’ll be letting this rise to the surface and get then get together to share our thoughts. The culture of the organisation and how we work has moved on as well so it will be interesting to watch this develop.

And importantly, now that the website is in the wild, we’ll monitor it and listen to our visitors and improve it over time.

You’ll be hearing from some others at the museum who worked on this in coming posts so keep an eye out because they will go into the nitty gritty of how we made this happen …

And speaking of — thank you to the incredible team that worked on this: Andrew Serong, Shelley Matulick, Jessica Kemp, Jenny Lee, Miles Openshaw, Matt Millikan it would not have happened so brilliantly without you. And to Seb Chan who championed it with the leadership team at ACMI and imparted his wisdom and expertise along the way.

--

--