I spent 18 months working on a new front end design for Nucleus, BAFTA’s awards and bursaries application management system. I’m very excited to announce that the design is now live for BAFTA and all clients who license the system. Launched commercially in 2015, Nucleus has gone form 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

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.

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

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 and 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.

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

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.