TX Group CMS
Conent Management for dozens of online news portals
TX Group owns most of Switzerland's newspapers and their respective websites. What if there was a CMS that could be used by all journalists from all newspapers to create content and even inherit media and articles from other news portals? My task was to design exactly this, a easy to use content management system, with unique tailored features like no other CMS out there.
The most important feature
Every news site has one most important feature: The creation and display of articles. When I worked on this project (ca. 2016) millions of users read articles on TX groups websites and over 90% of them were using a mobile device.
So, the famous 'mobile first' approach we know from designing websites, made total sense and we looked for a way to let journalists optimize their articles for mobile first, by adding a live mobile view. Also an advanced rich text editor, something similar to Word, where you could drag images in, or even polls and facebook posts sounded nice. Luckily ReactJS was a thing and made all this possible.
A full rich text editor, where you can drag images in, create tags and display embeded content, was a relatively new thing back in 2016 believe it or not. We even took it a step further: Since journalists love to type articles, we have added 'commands'. Let's say you want to add a poll where your cursor is. Instead of leaving the keyboard, just type '/new poll', or add an existing one by typing 'add poll'. This would show a list with your recent polls. This also works for videos and images. The idea came to me from playing games and dabbling in the console.
Creeating articles that can be inherited by other news sites is one thing. But what about all those 'teaser images' you see on the front page? Every news portal has their own design and some of them display images as 16 by 9, or 3 by 2 and some even in a square format. How do you make sure that an image doesn't get cropped in a way that makes no sense?
One day while having a shower (no joke) I had the idea of what I call 'importance triangle'. Those three hexagons are there to let the journalist decide which part of an image should be prioritised and which part can be cropped if necessary. The bigger the hexagon, the more important that part of the image is.
I'm not claiming that I am the only one who came up with this, I'm just proud that I did and it works very well :)
I was sitting right next to the backend programmers and they asked me to create a design for their server monitoring :) Not really part of the CMS, but it belongs here.
Inherit everything. For example, you can inherit an article from one news site and publish it on yours. Not only that, this works with images and text inside articles as well. This means, you can keep the text, but overwrite for example an image with your own, or change a few words in the article to tailor it more to your audience and keep the rest as is. Pretty neat!
Interviews
Obviously, me and the web development team didn't just start designing and developing, without interviewing our users first. We created personas on our own as well and I did the occasional testing as soon as a click prototype was ready. The feedback we got was essential and without any interviews, the product wouldn't have been as good as it is.
Conclusion
I feel very lucky to be responsible for the design and UX of this huge CMS. I told you in the intro that there are features no other CMS has. For example, there is a article placement view, where you can place one or more articles on many different news sites simultaneously. Or there is this tagging system, that works with synonyms and in multiple languages. For example, a journalist is tagging his article with 'cinema'. The system then knows that 'movie theatre' is the same thing, in multiple languages. And then there is gamification, where journalists can get 'achievements', when his or her story is in the top 3 for two days for example.
I left to project before it was completed and I never saw it in action. But I heard people love it and that makes me proud.
Gallery
Sorry, in some screenshots the icons are missing and got replaced with letters (missing icon-font)
