The brief
Bauer’s business model of aggressively acquiring new brands to add to their portfolio was causing issues for the digital team. Managing a large number of digital properties with vastly different technical infrastructures was proving difficult, resulting in brands requesting updates and having to wait months instead of days. The solution was to either grow the digital team rapidly or create a singular platform to power all digital properties.
Requirements
A platform was needed to house all of Bauer’s brands. Any bugs would be fixed across every property, and any new features could potentially be deployed across any brand. Across Bauer’s 200+ websites, there were a wide range of features, so we listed them by visiting each site and met with stakeholders to find out which were essential for each brand’s function. Similar brands shared similar features, so we put stakeholders into groups, such as lifestyle, music, automotive, entertainment, and hobbies. After collating this data, we looked for patterns to identify the features mentioned the most, the necessary features for each brand, and new features that could be used across multiple brands to generate revenue.
The most commonly mentioned features were standard across publishing platforms, such as scheduled posting, save to draft, undo, revisions, responsive images and galleries, responsive media embeds (Twitter/Instagram etc), and drag and drop block editing. We placed all of the above features into separate containers so we could assess what each feature should look like, where it would sit in the user journey, and how the interaction would work.
One of the biggest issues was the data. With so many different types of data across the brands, data migrations were the hardest nut to crack across the entire project. We reached out to a London-based tech startup that had built a CMS from the ground up, entirely specific to the publishing industry, and that was being trialled by several other large publishing houses in the UK. They had already implemented and tested all of the features on our list. We had the option to buy their core product and work with their developers to create some other unique features to help us launch as quickly as possible.
The design system
While the developers were working with the tech startup, I created a digital component-based design system, liaising with stakeholders at each brand to understand their requirements. This design system would be the bottom layer of a two-layered CSS styling framework. I created a list of semantic class names that would stay the same across all brands, so if an interaction was updated on one brand, it could easily be updated across all brands. I covered a wide range of styles, including typographic style, tables, forms, buttons, dropdowns, popovers, navigation elements, pagination, tabs, modals, and breadcrumbs. I also added some utility classes for things like padding and margin. I did not create a grid, as the second layer would cover the individual template designs for each brand, and I wanted the designs to have more freedom than a standard column grid could provide.
Individual designs
The next stage was to create individual designs for each brand. We chose to migrate a number of the larger brands first since they were likely to be the most difficult. If we were to run into any issues during this process, it was likely to be on one of the larger migrations, so we wanted to learn from any mistakes as early as possible. The first stage was to create wireframes for a home page, a news lander page, an article page, and a default page template for other pages such as the contact page and legal notices. The business had lots of data from previous tests that showed us the ideal amount of excerpts and categories to achieve the best engagement on the home page and landers.
My low-fidelity wireframes to help visualise layouts across multiple screen widths.
Once the wireframes were signed off by the stakeholders I set to work on the styling, the second layer of CSS which is unique to each brand. Firstly I set up the Sass variables for each brand. This would include the brand typeface, primary, secondary and tertiary brand colours, and other specific brand styles for interactions such as buttons. Next, I created the designs for the cards for each brand and created high-fidelity designs to show how these would work across responsive layouts from 320px up to 1200px.
Lastly, I converted all of the elements I designed into HTML and Sass components. Our QA team tested the individual elements and pages across a range of devices and browsers, at a predetermined selection of screen widths. Once tested the elements were added to a digital design system ready for developers to create templates for the CMS.
My high-fidelity design of the Grazia home page on desktop.
My high-fidelity designs of the Grazia home page on mobile.
My high-fidelity design of the Grazia article page on desktop.
My high-fidelity designs of the Empire home page on mobile.
My high-fidelity design of the Empire home page on desktop.
The end result
The data migration proved to be the hardest part of the entire project, but with careful planning and execution, we were able to move over all the data successfully. The developers had taken the digital design system and built individual templates for each brand using the Sass variables. The result was a slick, fast and responsive CMS platform that allowed the digital team to update and deploy new features across all brands simultaneously. As the digital team grew, they were able to maintain and update the platform without needing additional developers.
In conclusion, the project was a great success. We were able to provide a solution that allowed Bauer to manage all of their digital properties from one central platform. This saved time, resources and improved efficiency. The digital team was able to provide better support to the brands, and new features could be deployed much quicker. It was a challenging project, but one that we are proud of.
