Building the best newsroom in the world ✏️
From research to development, this is the story of how we tried to build the best newsroom in the world.
Hello! My name is Hugo and I was the lead designer on this project – a project that bears the name "Bea" for my daughter. And like my daughter, Bea Theme has given me many sleepless nights, just about brought me to tears, and made me fall in love (with design!) all over again.
I'd love to introduce you to the process that led to the Bea Theme you have today.
In this document, I'll guide you through our team's decisions in building the new Bea Theme, and talk a little bit about the future of the Prezly Themes project. Let's get started!
Why did we decide to make new themes in the first place?
Last year (around May) we were having one of our Product Roadmap sessions (that we use to brainstorm new features and improvements). We were discussing how we could improve Prezly content. Mainly, we asked ourselves, what could we do that would make our clients' content shine?
After a lot of animated discussions, the answer became clear. We needed our clients to have…
The best newsroom in the world!
How could we make that happen? By creating stunning themes that were simple to set up, 100% accessible from any device, and built to support the best content in the world.
The first step was to look at what we already had.
We understood pretty quickly that our current (old) themes were really outdated. My daughter is 4 years old (which is a lot in internet time), and still they were almost twice older than she is.
They were slow, and their interface and user experience were started to lag behind.
Basically, they had a lot of problems. But the good news about finding those problems was that now we had a list of things we could work to improve.
Phase 1: Research
We started with research. We created a list of the best newsrooms in the world and rated them (using a system we created) on their interface and user experience.
Part of that user experience was evaluating how good they were on things like readability, accessibility, layout, fonts, etc...
From more than 100 newsrooms, we understood that most of them had problems. And some of those problems were things we could work on to make better.
Here are some of the best newsrooms we found:
You'll soon see how these examples inspired us as we worked to create "the best newsroom in the world".
Phase 2: Planning
From everything we learned searching and visiting those 100s of newsrooms, we understood what we needed to do in order to fulfil our goal. We came up with a plan – or more accurately, a wish list of things that we felt were essential to creating the best newsroom in the world:
- It needed a Great Visual layout
- It had to have good readability and accessibility
- It needed an amazing mobile experience
- And powerful search
- It had to be easy to customize
- And needed to support all newsroom types and sizes
We also made a tally of features that already existed in our Prezly newsrooms and decided which ones we wanted to keep – things like newsroom contact cards and the subscription form.
With this wish list and a plan ready to go, we could get started on the actual theme.
Phase 3: Design
Let me show you how we solved each of the points I just mentioned:
Visual layout 👁
Each of the best newsrooms we studied had a different way of formatting content cards, so we took that as inspiration.
For our own design, we decided to go with four card types. Here you’ll see you have a big card for your most recent story, and the cards get smaller and smaller for older stories.
This made the page more fun to navigate ,and helped create a story hierarchy and improve readability.
To help with that, we needed the best font family out there (at least for what we were doing).
We discovered, Inter.
Inter is a typeface designed specifically for computer screens. It's free and open source, so it aligns with our goal of creating something that anyone can use, and it has features that enhance its readability. It was exactly what we were looking for.
But Inter is not alone in Bea.
While we love this typeface and can see that it works really well in all these mockups, by the time you make your 20th newsroom, you start wanting to mix things up a bit.
Many of our clients have more than ten newsrooms, some have more than 100, so we wanted to give them some options for customizing how their newsroom feels, while making sure that it still looks and performs incredibly well.
To achieve that, we enlisted the help of the best open typography library in the world: Google Fonts.
We curated the most popular Google fonts and made them available in Bea. These are our new default theme fonts. Thanks to them, your newsroom can now support even more languages and alphabets than ever before.
And perhaps most importantly, all these changes combined hugely improve your newsroom’s accessibility and readability.
Accessibility & readability 🎡
This was really important for us. Not only because we wanted our newsrooms to be accessible to everyone (which is reason enough), but also because this is one of the key things Google and other search engines look for when indexing and ranking web pages.
The best newsroom in the world needs to be seen, right?
We performed some accessibility tests on our demo newsroom, and the results were impressive. From a web.dev test, we got 94 – a near-perfect score!
The readability test does not depend purely on the UI, as it also takes page content into account. Even then, our demo newsroom (which is full of just dummy content) got solid results when tested on experte.com.
So we thought, ok – we've (pretty much) nailed the accessibility and readability. What else can we do to make Bea even more open?
What we needed is a fantastic Mobile Experience.
Mobile experience 📞
Currently, six out of the ten most-used screens in the world are mobile-sized.
We knew from the very beginning of this project that mobile was a big flaw in our current (old) themes and that this was something we needed to tackle with Bea.
For you to have an idea of what I’m talking about, this is how our old (”classic themed”) newsrooms looked on mobile ⬇️
And this is the same newsroom using the new Bea theme ⬇️
Can you tell the difference? There's a little improvement there, right?
So, any further improvements we made had to work really, really well on both mobile and desktop. And at that point, our search function? It wasn’t so great.
So we rebuilt it from scratch.
Search component 🔎
The new search component that’s in Bea is far faster and more intuitive than its predecessor.
Here you can see, I can search for a keyword not only in the title field of a story, but also its content – something that was impossible in the old themes – and get lightning-fast suggestions.
And from the search results page, you can now filter by date, or by category.
Now we were getting somewhere. We had a theme that looked great and worked well across devices, had excellent functionality, and had better accessibility than ever before.
One thing that we became very conscious of at this point was making it too complicated.
We had tested countless different settings for Bea, tried making it so that every part was customizable. But we soon realized that more isn’t always better.
Easy customization 💅
This is something we’d gotten wrong with the old themes – they were just too complex. It took longer than you wanted to adjust all the settings, and in the end, it didn’t look fantastic.
For Bea, we decided to pare things back, make the customization options more simple, but also to make it smart.
The accent color is a really good example of what I mean:
Just one color and Bea automatically pulls different shades of that color for everything else it needs.
Much quicker. Much simpler. And always returns professional-looking results.
We decided to take this approach of minimum user input, maximum results, and apply it to other parts of Bea.
A perfect fit for all newsrooms 👗
As you probably know, Prezly users make a lot of different newsrooms. Some with just a handful of stories, some with 100 stories or more. Regardless of how much content you plugged in there, we needed it to stay looking sharp and working perfectly.
The answer? → Adjustable newsroom layout!
We also realized that stories didn’t always have a home image defined, and this could disrupt the whole layout. So we created an image fallback.
Even if your story doesn’t have a story image, Bea automatically creates a neat visual using your logo. Again, simple. Effective.
Alongside all of these changes, Bea retains all of Prezly's features: newsroom contacts, boilerplate, subscription form. Everything that you used in the old newsrooms, we’ve kept.
Now that we’ve been through the specifics of the new theme, I’m sure what you actually want is to see it in action. Let's check out how it will affect your newsroom.
You remember the example from the beginning. Our old theme? Not that great? ⬇️
With Bea, it’s a whole different story. For example, look at how the typography hierarchy between title, dates, and subtitles are improved. Or how everything is well aligned in the top navigation bar. ⬇️
Another example is the Vent Airlines newsroom. This newsroom had some deep customization, including things like header colors. ⬇️
As you can see, all of it is supported in Bea. ⬇️
The IKEA newsroom. This is one of the best examples (at least for me). ⬇️
It does not change much in terms of colors, but the spacing and alignment of the new layout makes their content look so much cleaner and more attractive. ⬇️
Phase 4: Release
Now, the best part. You can activate Bea in your own newsrooms now! We released Bea on the 9th of March 2022 and made it the default theme for all newly create newsrooms.
To activate the Bea theme for your newsrooms, all you need to do is go to your Newsroom Settings → Themes and choose Bea as your new theme. Choose your accent color, fonts if you want to, and click the button at the bottom to enable it!
If you want, you can even preview how your content will look in the new layout simply by clicking the preview button.
Extra: The future of Prezly Themes
Bea was just the first step of our vision to the future of our Newsroom themes. We have other goals that start with adding a wide variety of themes to our themes list.
We will be deploying more themes very soon. While we keep on improving Bea, we are also working on the next themes you'll be able to use in Prezly.
Greta & Syrah
Next up will be Greta, which is a version of Bea that uses a cascading card layout. Alongside it, we are working on a theme called Syrah, which takes a more graphic approach that’s ideal for newsrooms with fewer stories, or those that are very visual in nature.
Bea (Dark) & Marcel
There’ll be more to come. We’re already planning a dark version of Bea and a new theme, Marcel, that's more focused on written content.
These are just the beginning, and we want you to be part of this themes project.
Create your own themes 🛠
We want you to create your own themes. That's why we are making everything theme related open source.
We want to create a themes community for Prezly. We want everyone who’s interested to be able to create a theme and share it with the world by using our theme community.
To do that, we are giving you some free tools, such as…
Free Figma UI Kit 🎨
The Bea UI Kit is already available in the Figma community and can be downloaded by any designer that wants to change it and/or build on it. It makes the process of creating a new Prezly theme so much simpler, since all its components are already supported by Prezly.
To the new designs possible, we are also opening our code.
Developer Starter Kit ⌨️
Any developer can download the theme starter kit from GitHub and start making their designs for these new themes into a reality with ease. There are more details about the developer tools we're making public in The building blocks of Bea Theme!
I really hope you are as excited as I am for this new chapter of the Prezly story. If you have any questions, suggestions, or simply want more details on our process, please reach out. 😊
Hugo Felix
Published March 2022