Redesign derFreitag online experience
Is it possible to keep alive the identity of an historical newspaper on the web? Bridging the gap between online and offline is always a big challenge, especially if you want to find the right synergy between printed and digital world. But they went further. They asked to Abstract-Technology to bring Der Freitag’s stories in people’s pockets, giving them the chance to read articles wherever and whenever they want. They wanted their readers closer and they gave us the mission to empower their relationship with the community online. And we jumped in!
Der Freitag is much more than a newspaper. Born as Sonntag in 1946 after the World War II, it became a symbol of German unity as The East West Weekly. However, only in 2009, the newspaper was successfully rebranded and the new Der Freitag came to life.
In 2010 it was judge one of the three World's Best Designed Newspapers thanks to its big pictures, sophisticated typography, the display of analytical and explanatory journalism or playfulness between headline, story and art.
Printed weekly and daily updated online, Der Freitag is still a beacon of high quality information in Berlin and all over the country, publishing original contents about culture, society, and politics.
Recently, at Der Freitag they realized their website was not enough anymore.They needed to improve online version making it usable, responsive and closer to the visual identity of printed edition. In addition, they wanted to build a real community of readers free to interact as a part of Der Freitag’s family.
What we did
Have you ever spent few hours in a newsroom? Everything goes fast and everybody are always super busy. Maybe is one of the most complicated and chaotic place in the world. Der Freitag’s folks recreated exactly that atmosphere during our workshops and we were excited to report all their different voices. After hours of investigation shoulder to shoulder with their team, we finally got some news and we were ready to start working.
What we did
Information architecture, user interface design, user experience, interaction design
derFreitag in Numbers
Think responsive was our mantra. One the first goals we had was to redesign the website, creating better experiences for users on mobile. We started collecting best practices for responsive design to figure out 7 guidelines to follow. We wanted to find the right balance among resizing, managing a wide set of contents, and hierarchy of information. How? Creating flexible, generative, and replicable modules able to contain different formats of contents.
After a sketch phase, we created wireframes able to represent the complex editorial environment of the newspaper, gathering articles avoiding long lists of elements. After the analysis of articles organization and categorization, we looked for a comprehensive solution able to cluster different types of contents, talking to each other and connecting pages together.
The new layout of the article is the flagship of our work. We wanted focus on text in order to improve readers’ experience through a reading-friendly design with no noises, long scroll page, and related articles easy to explore. Moreover, we divided the page in two different sections: the first one with contents, the second one dedicated to comments, leading people to interact only after the reading.
Der Freitag printed edition was an inspiration for its amazing print fonts and colors. We wanted to bring these features online and we worked hard to make it possible.
We decided to use the print font everywhere and not only in the titles, empowering the brand identity. According to its typographic features, we used the same colors to organize categories on one hand and we maintained its peculiar black and white balance on the other.
A mega-menu shows the most important 4 articles for each category by big images and consistent texts layout. A new single article with a big title, one column text, long scroll, and big cover photo came to life.
A deep magenta is the Leitmotiv of Der Freitag’s community, perceived as a different engaging section of the website, where readers can share their opinions and interact with the other members. Even though magenta highlights the difference between community and other sections, we can find a coherent approach in its internal structures made by articles and categories.
Prototype and testing
You cannot be sure about what you did until you test it. And this is what we did. We created high-fidelity prototypes and we asked people to try them. After sessions of usability tests we realized we did some mistakes, at the end we are humans too, isn’t it? We changed some elements and we decided to totally redesign some pages.
Abstract-Technology and Fifthbeat had been working together to integrate design and functional layers. Our collaboration was our secret weapon: thanks to our combined high professional knowledge we were the right people to meet Der Freitag’s expectations combining different digital skills and expertise. United we stand!