In this conversation, Phil Gribbon, the designer of Mada Masr’s new website, walks us through how he settled on the site’s look and function, sharing his broader thoughts on the potential of internet publishing.
Lina Attalah: What’s your design, or more broadly, general artistic background? And what made you interested in this project?
Phil Gribbon: After a few years of teaching myself design, with print and simple business websites, I really cut my teeth on user experience design (UX), with an ambitious social network that aimed to connect everyone’s opinions about everything and so build a picture of how the world thinks. It was political and frivolous, far-reaching and extremely personal and ahead of its time, and, in the end, it just didn’t gain the traction it needed. Burned out from four years of hard work, I moved to Cairo and found myself helping out with the design for The Square. I turned down their offers to go shoot with them and may always regret not getting a cinematography credit on an Oscar-nominated film. Bobbing back and forth between India, Myanmar and Egypt, I continued to do freelance design for international clients, but I wanted to get stuck into a project in Cairo, to feel like I wasn’t just floating. While I loved the ethos and the content of Mada, whenever I tried to read an article on my phone, I had to give up because the experience was so painful. I’d done some consulting work for news organizations in Myanmar and have a general frustration over how the print news industry has translated to the web, without fully embracing its potential. So, between being personally invested in seeing Mada succeed, frustrated by its current limitations and having the background experience to have an idea that I could help, it was a natural fit.
LA: One of the main impressions that the new website gives is that it is much more “professional,” in that it looks like an easy-to-navigate news website, but without losing a certain air of rawness that makes it feel closer to us. How did you translate your own perception of Mada’s personality into the website’s general look, and what do you make of this initial impression? (Can I take the occasion to thank you for making space for possible artistic interventions-disruptions, which I enjoyed doing with the old publication I previously ran.)
PG: One of my main goals with the redesign was to bring out the personality of Mada. There’s very little brand-loyalty in news, beyond the major outlets, but Mada is in a special position, in that you have and represent a voice that’s not widely heard in the current context – it couldn’t have the look of a generic-looking professional news website. It needed to be more personal, more obviously made by real people involved in the world they’re reporting on. Mada was born predominantly with a team that emerged from Egypt Independent, with several ‘artist interventions’ – there was a creative takeover of a print edition, personalizing and creating a theme to tie everything together. I wanted to create a website architecture where the content could shine and the platform could express itself. Mada’s serious and irreverent sides were often expressed well by Andeel’s cartoons, where he gets away with commentary sometimes too inflammatory for long-form writing. It seemed to me to be the perfect place to start, while letting the team develop the site in the future, without having to redesign everything.
“Andeel-ification fit the bill perfectly”
I came to the idea that we’d use his cartoons to frame the site – I’d wanted to create a beautiful site that stood up against those of the major news sites like Quartz and the Guardian etc., but I also wanted to rough it up a bit, to make it clear that this was an edgier proposition, that there were real people behind the headlines. Andeel-ification fit the bill perfectly and would pave the way for future artist interventions – I’d design the informational architecture of the site and the presentation of content as cleanly as possible but allow Andeel’s cartoons to set the tone and convey the personality. Future iterations of the site could simply swap out one set of illustrations for another.
LA: What was challenging about the translation of your design concepts into code and the development processes? To what extent do you feel WordPress and the particular development of this project was able to convey your imagined ideas and produced sketches? Did you have to make compromises?
PG: Finding the right development team was not a simple task, but Cairo-based eSeed had just the right mix of enthusiasm and technical ability. They understood the vibe and potential of Mada and wanted to do a great job. And they didn’t hate me, which is important.
There were always going to be overruns, and finding people with the right attitude is crucial to a successful launch. Besides all the usual problems, I added one more by disappearing back to India and Myanmar, monitoring progress at a distance and sending bug-reports and tweaks over email. We had to compromise on the scope of some elements, but we still worked with the overall plan in mind, crafting a foundation for future work. This wasn’t a process that was intended to finish on launch-day, but would continue to evolve and grow.
“You made us rebel against the typical sectioning particular to a general-interest publication”
LA: You made us rebel against the typical sectioning particular to a general-interest publication: politics, society, economy, culture, etc. And you did that by capitalizing on the beautiful invention of tags to propose a different way of curating the content. Can you say more about how you conceived of that proposition and why you think it is more interesting for an online space focused on digital media where the notion of content curation becomes, by default, more difficult and more forced?
PG: It’s an experiment, isn’t it? My thinking revolved around the distinction of news for the web versus news in print. With papers, you need a consistent structure, and magazines often use content pages to let readers scan and jump. News on the web has a new entry point, which is most typically a direct link provided by a shared article on social media. I wanted to provide multiple routes to take people on from their arrival point, and a generic sectioning of the site didn’t cut it. Instead of politics, culture, etc., I wanted to give Mada the power to showcase all of the most important stories of the moment right in their header (and footer, in the case of a mobile-device reading visitor).
“Collapsing hierarchy and letting any tag become a focal point builds in flexibility to the structure”
Alongside that motivation, I don’t see any semantic difference between providing sections on, say, economy or temporary pages about an election or a cultural event. News sectioning is an editorial decision and conveys scope and emphasis, but a website needn’t be restrictive – the correct decision now might not be right next month. Collapsing hierarchy and letting any tag become a focal point builds in flexibility to the structure, asking more of Mada to curate, but delivering a better experience to visitors. At least, that’s the plan.
I wanted Mada to take the website seriously, to see it not as a static vehicle that your content fills, but as something you collaboratively create and mold to say what you want to say. You’re not simply news content producers. You’re expressing views and telling stories, and how those things are presented is an important element of that expression.
LA: You went through a rigorous in-site research process to come up with your curatorial propositions. Can you walk us through it?
PG: I needed to know the volume and importance of the various strands of Mada’s work. I downloaded the last 100 articles published, manually tagged them by type and how they’d been classified for presentation.
Nearly all the news items could have been classified in the politics section, and only the economy section had more news than feature pieces. Like the homepage, each section page gallery presented eight items at a time, so the environment page looked like it would be completely refreshed every 24 weeks or so. The information hierarchy was letting the site down: places with lots of content would be overwhelmed by news; places without much regularly updated content were given the same prominence in the navigation as the most read and most shared pieces.
I started to wonder if news needed a much less-prominent position on the site, but when I took a look at the sharing figures across Facebook and Twitter, I noticed that, while the long-form and artistic work were regularly pulling in the numbers, there was an occasional news piece that was particularly widely shared – when Mada was first or they had a particularly good inside voice.
It was apparent that news was the bread and butter of Mada’s output. By volume, it made up the majority of content, and, with its reach, it brought many first-time visitors to the site. What I proposed was that, by implementing a more thorough tagging system and separating the presentation of news and long-form pieces, we could make the most of both. For every feature or photo story on a subject, there would be recent news articles to present. For a current news item, we’d be able to show deeper analysis of the surrounding issue. The homepage could be divided to show news separately, giving it its prominence, but not letting it overwhelm the rest of the content. Section and tag pages would have the same hierarchy, showing news, if it was there, and collapsing down to show only features, if it wasn’t.
I proposed that we could demote the relevance of the structured sections: economy, environment, etc., curating an ever-changing navigation bar instead. Elevating currently relevant tags to the status of directing site navigation was both helpful to readers and made a statement: These stories are what Mada’s about this week. The sections would still be accessible via a dropdown, but the personality of Mada meant that the site’s navigation should be current and arresting.
The final major proposition for the homepage was one borrowed from the print newspaper industry: If there’s a huge story of the moment, we could feature it prominently as a paper’s front page would do. It could be a feature or a news story – whatever Mada was pushing heavily as the most important piece. I proposed a layout template that would let writers and editors take over a full browser viewport, on especially important days, or collapse down to a hero image, on normal days
LA: There is a tendency in some design practices to derive inspiration from the world of print, in terms of typeface, positioning of images, the presence of margins, etc. You also did some borrowing yourself, and I am wondering what, from your design perspective, the internet has trumped in terms of the visual and reading experience, and how you address that in your design practice?
PG: Good typography and an emphasis on a pleasing reading experience are at the core of the redesign. The article page serves as an entry point for nearly everyone coming in from socially shared links, so it naturally became the starting focal point of my design process. Finding an appropriate line length for all sized screens, removing distractions from the body of an article, choosing great typefaces for English and Arabic, providing guidelines for when media is central to a piece or has a supporting role: Many of these features have well established design patterns on the web, but most were learned from magazine print design, rather than newspapers. Articles making real use of embedded media are still reasonably rare, but I think, as writers become more empowered to take control of their own publishing tools, editors and other team members will be able to collaborate in more expressive ways, and we’ll get far richer experiences.
The real promise of the internet is in its connected information, and we’ve a long way to go to allow genuinely useful cross-pollination of sources and viewpoints, creator payment and communal collaboration, but I believe that celebrating the best of independent progressive journalism, and carving out some personality in an increasingly generic space is a bold step in the right direction.