Launched commercially in 2015, Nucleus has gone from strength to strength and this refresh has brought a wide range of improvements to the Entrant and Viewer Interface including:

• Fully responsive clean modern design
• Accessible interface
• User customisable CSS
• Customer-supplied logos
• New entrant dashboard entry management features
• Simplified registration and welcome journey
• Clear entry form design
• Improved payment workflows
• Updated viewing experience for judges

Approach to Design

Nucleus is very personal for me as I worked closely with the developer, now BAFTA’s CTO Ben Jefferson, to develop a new system from scratch to deliver the BAFTA Awards. The true testament to our work was confirmed when in 2015 we signed the first two clients after they approached BAFTA to license the technology. This became the seed of BAFTA Media Technology before we engaged on the wide range of products that we subsequently built and now manage.

I was very excited to lead on the implementation of the new design. The opportunity to improve the user experience and breathe a new lease of life into a long term friend had been on my agenda for several years. My concept was to unite all of our clients and BAFTA, who had customised CSS implementations of the previous design, into a standardised framework. I wanted to move away from a static CSS and create functions that enable clients to select the colours and update logos without development assistance. Core elements such as font and background are now standardised within the design allowing BAFTA Media Technology developers to better implement front end features having removed the complication of working with multiple designs.

I began by creating workflows for each of the current pages, highlighting the user interactions and listing the features that existed on each page. After reviewing the features, I made notes for the designers stating which should be retained, removed and added. This was based on a combination of stakeholder engagement, user feedback and system testing.

Before engaging with the designers I wanted to provide some ideas for them to work with. I researched blogs and features on well known and similar sites to choose elements that I felt would best suit Nucleus, focussing on the following areas:

• Log-in screens – Nucleus exists as an extension of the client’s website and the Nucleus log-in page is the first point of engagement the user has with Nucleus, setting the tone for the rest of the system. I wanted a slick, simple and modern page which welcomed the users and clearly displayed the UI.
• Forms and Input Fields – One of the core Nucleus components is a very sophisticated form-building solution. Nucleus collects huge amounts of metadata as well as assets (including video, image, audio and documents). Users spend a significant amount of time preparing and submitting forms and the form page was key to get right. Pre-project, I spent a lot of time in my research examining UI that was successful and UI that was not.
• Tables – Much of the Nucleus interface features tables. Often the best method of displaying the large data sets that Nucleus collects from users is in tables. The most prominent page for tables is the dashboard and I focussed on finding slick designs which would present the data as the main focus of the interaction.
• Dashboards – The entrant dashboard is where users manage all of their entries/applications. After completing the entry/application form users spend most of their time on the dashboard. Nucleus clients service many different entrant/applicant types, some which return year after year creating hundreds of awards submissions, and others who may submit one bursary application and never return. The dashboard needed to service these two user stories and all of those in between. I spent a great deal of time trying to understand how the display of the functionality could be used to benefit all users and fed this into the designers.

After some initial calls with RF Media, the designers, providing them with access to Nucleus, and presenting research and user workflows, I was presented with the initial designs. Initially I had wanted a much more radical approach to the design changes but the designers convinced me that cleaning up and modernising the current UI, while adding new features was a better approach. After engaging stakeholders with the first designs, I understood this was better for existing system users. The clutter of the existing designs had been removed, leaving a clean interface for users to access the functionality without having to learn how to use a completely new interface.

Improved workflows

The payment workflow is one area that we wanted to improve. The previous iteration of Nucleus had a table for invoices at the top of the dashboard page, which caused issues for returning users as the table grew larger – more scrolling was then required for a user to access the entry/application tables. I had previously moved historic invoices to a newly created page but I wanted to remove all invoices from the dashboard but alert users to pay for their invoices. RF media added clear alerts which users can follow to pay for their invoice. Other workflow improvements include:

• Entrant registration
• Creating the first entry
• Invoice generation
• Payment process
• Entry management and filtering on dashboard
• Viewing of entries
• Submission of judges’ scores

Implementation

Although Nucleus appears simple on the surface, hidden behind each page is thousands of lines of code. It took a lot of work from the BAFTA Teach development team, Randy Clouse began implementing the Bootstrap code before Sergio Escudero took over supported by Ben Jefferson, Andrew Wilson, Xingzhi Qian and Venkat Jjammalamudi. They are owed a huge thanks as without their effort, immense skill and hard work this would not have been possible.

RF media delivered the design code using Bootstrap, a CSS framework aimed at supporting responsive design. The approach was favoured as one of the core drivers for the project was responsive design which would reduce the workload on BAFTA Media Technology’s developers. Having the Bootstrap code meant that any developer could apply the existing code to the pages without needing to create components from scratch. It also saved me having to describe and define how the components should look in detail. The approach was successful as the components look exactly as the designer had specified and this saved a huge amount of implementation and component development.

There are multiple features which are configurable by admin users, all of which can be turned on or off. The developers needed to replace the existing html with the newly provided Bootstrap mark-up. Once completed, I painstakingly tested all of the features, which of course led to multiple Jira tickets for amendments.

For the user-controlled CSS, I reviewed the designs and grouped the components into 14 different controls for admin users to change. There are hundreds of components in the site and giving admin users functionality to update each one would result in a highly complex and unusable interface. The 14 controls provide clients with the flexibility to apply their approved colour schemes to design without over complicating the process. Nucleus is designed to be an extension of a client’s website, sitting on a subdomain, so it is essential the site colours represent a logical step for their users. After the control panel was coded the developers needed to apply these values to each of the components in order for the selected colours to be applied to the pages.

Accessibility

One of BAFTA’s core requirements since the 2020 review is accessibility in all areas. Accessibility was a key component in the redesign, to ensure that all users on all devices with differing abilities are able to use Nucleus. Accessibility covers a range of requirements from users who have limited colour contrast visions (which applies to me) to those who use only keyboard controls, or screen readers or users who only have small screens to access the system. The design and implementation factors in:

• Colours and contrast
  Application of correctly formatted html
  Correct application of keyboard-only controls
  Screen reader support

Next Steps

Now that the Nucleus 2.0 design is live the job is not over. There are a range of features for the design that were not included in the initial release. I take this approach for many reasons. Firstly I want to see how users interact with the site. I might have ideas for many processes but users require different features to assist and spending resource fully creating a feature users do not require is a waste of resource. Secondly once the design is live I can use agile development to release feature by feature quickly, prioritising those that users require the most. Releasing the design has brought instant improvement to users and waiting six months to introduce more features feels wasteful. Instead there is greater value in taking an agile approach.

The new design has updated the Entrant and Viewer Interfaces but not the Admin Interface. The next step is to review all of the administration processes and update the interface so that admin users have better and clearer access to the multitude of features within Nucleus.

Over the past 15 months, we’ve all become (over) familiar with Zoom and, indeed, ‘Zoom fatigue’.

As we emerge into a post-pandemic reality, what’s clear is that not only will hybrid working be the norm for many of us but so will hybrid events. Savvy event organisers are unlikely to abandon some of the undeniable gains made from Zoom and similar remote conferencing technology – such as reductions in travel time, venue hire costs and carbon footprint – and will schedule a mixture of physical and virtual events in their calendar.

At BAFTA, it’s no different. We have always had a busy events calendar comprising everything from our flagship red carpet Awards ceremonies to regular workshop and learning sessions featuring some of the most recognisable and emerging names in the entertainment industry. While we anticipate that demand will be greater than ever for our physical in-person events, we have been developing a solution that will enhance the experience of our now-established virtual events, too.

Limitations… and the bigger picture

Having pivoted very quickly to the Zoom webinar/workshop format during the early months of the Covid-19 pandemic in Spring 2020, BAFTA was encouraged by the uptake of the format by attendees and star talent alike. As the pandemic progressed however, we felt the urge to really stretch the possibilities of the format – especially now it is clear it will be here for the longer term.

To overcome this, we scoped out and developed BAFTA Cloud Studio – an enhanced take on the Zoom format, that opens up valuable commercial opportunities, while also enabling all content to played back in the glorious full definition it was created in.

The Zoom webinar re-imagined

Once we freed ourselves from the limitations of the standard Zoom presentation, we soon realised we could push the creative envelope further. By taking creative control of the production, BAFTA Cloud Studio enables the addition of commercial revenue streams – such as having a partner sponsor frame the overall production, something not available on native Zoom. It makes sound marketing sense to have such solutions available when you think of the captive audience that is delivered by your average Zoom call or webinar:

• Attendees who have been invited, or actively registered, makes for a highly engaged and relevant audience
• Typical duration of 60 minutes (often more) offers incredible continuous exposure
• Personalised Waiting room and Event Close holding screens give bonus coverage
• The existence of Chat and/or Q&A streams gives live engagement opportunities to tie in

And, of course, now that we can guarantee full definition playback of featured clips then the inclusion of short ad spots or idents to book-end the main presentation also becomes viable – with no concern of the brand identity being compromised by poor visuals.

The Rollout

Having developed and tested the solution, BAFTA was ready to roll out Cloud Studio in time to host our annual TV Sessions – a series of Q&As with some of the nominees for the upcoming Virgin Media BAFTA TV and Television Craft Awards. As the screenshots in this article illustrate, the headline features were showcased to maximum effect in Sessions including The Visual World Of Small Axe (which included a montage of clips from Sir Steve McQueen’s ground-breaking BBC anthology series of the same name) and a short promo for headline sponsor TCL at the top of the Leading Actress session.

With the successful delivery of the TV Sessions under its belt, Cloud Studio looks set to become a regular feature of BAFTA’s event schedule going forward. We look forward to working closely with our partners across both the entertainment and commercial worlds, bringing them together to create bespoke and visually sophisticated webinars that re-define the remote experience, making it an essential part of everyone’s event mix.

For more details on how Cloud Studio can upgrade your virtual event experience, click here to get in touch for a demo.

BMT (BAFTA Media Technology) is the software research and development arm of BAFTA (The British Academy of Film and Television Arts).