The ‘Zine is an online magazine started and run by Meghna Gulati, that seeks to provide a platform for the stories and thoughts of the Indian youth. I was responsible with designing and developing the initial version of the site, back in 2013. Two years after the initial launch, I was contacted again for a redesign. My job was mainly to do 3 things: revamping the whole content structure of the magazine, crafting a new visual aesthetic, and coding the whole site with a CMS-backed infrastructure. So yeah, I was pretty much turning the whole magazine over on its head.
Problems with earlier design:
1. Content Structure
a.k.a. Column-Columnists? Articles-Writers?
When it was launched, the site was made to follow a traditional magazine content format based on columns - a writer was given a particular topic to write on, and they publish subsequent issues of the same in a quarterly fashion.
For instance, one of the columnists, Rahat Chawla, maintained a column on food reviews. So every quarter, he would review a restaurant and write about it. Screenshots from issues 3, 4, and 5.
Main problems with this model:
- Writers complained of being bored—and sometimes out of content for a scheduled issue release
- As a result, readers reported that writers sometimes went out of their content zone and sometimes the content overlapped with other columns.
2. Publication Schedule & Content Management System
The site followed a quarterly publication schedule, like a magazine has issues. So, every 3 months we received all the articles and coded it out. What made it even harder was the fact that since the first version was built in a rush, the infrastructure wasn’t based on a Content Management System.
- Since the site was updated only every 3 months, the time between the issue releases was a very heavy lull for the traffic. Traffic on the site sharply dropped after almost 2-3 weeks of the release, and users even reduced engagement on the social media profiles—primarily because of the lack of fresh content.
- The lack of a content management system of course made the issue update season ever harder. The backend was based on Liquid-based template system that ran on Mixture—which ran without a client-accessible editor.
3. Layout and AestheticsIt just doesn’t look and feel like an online magazine.
- The look of the old site made it look more like a marketing site, and not a publication—for which the site should be as content-centric as possible.
- Navigating through the content wasn’t convenient for the reader/user either, as in place of the title/subtitle/banner image, the previous site went with a traditional magazine-style Contents page system.
- Also, the client also reported that the visual aesthetic of the site didn’t reflect the desired editorial look and feel, and looked a bit more “playful” and “chirpy” than needed.
4. Article Structure
- There was no tags or categories system to index and sort articles by similar content.
- The client wanted to separate the normal articles with articles about the magazine itself, like the editorials. In the original site, there was a homogenous flavor to all the articles, and there was no way to visually or functionally separate article for the magazine and articles about the magazine.
- The client reported that the articles required some visuals or a banner image attached to them to give a visual context of the article.
- The client also demanded a share button to facebook and twitter as a means to share the articles quickly on social media networks.
1. Content Strategy and Information Architecture
To combat the various problems the client and the readers experienced because of the traditional quarterly, column-based publication system, I decided to completely revamp how the magazine functioned.
- From Columns to No-Columns: We decided to move from a column-based system (where every writer sticks with their own theme), to a more free-flowing blog/article system. This gave the writers the flexibility they demanded to flex their writing muscles in every direction—and since there were no set columns, overlapping of content themes was not only unproblematic, but also beneficial.
2. Publication Schedule and Content Management System
- From Quarterly to Anytime: From a quarter-based publication schedule that only encouraged sporadic traffic, we developed a more regular and flexible publication (blog-style) schedule:
- Staff Flexibility: In addition to encourage a more flexible and open writer-base, when writers wanted to leave, it hurt the magazine less—and as a result, the content stream remained fresh and diverse.
- From Static to Siteleaf (and Jekyll): From a partially hard-coded codebase, I moved the content and code to a automated content-management system. Instead of involving me in the update process, editors and writers could publish articles themselves easily. The back-end is now based on Jekyll (for increased portability and hosting-ease) and the build system was moved from (the deprecated) liquid-based Mixture to Grunt .
Layout and Aesthetics
- Content-centric Design: Rather than self-advertisement and calls-to-action being in the focus, it was a dire need for the website to accurately depict what was at its heart: the articles and the content.
- From having to access a flat list of articles, the readers could now browse through nugget-sized article modules and even browse by category.
- As pushed-for by the client and to match with the magazine’s tone, I went with a more subtle, less bright, and less colorful aesthetic. Here are some early prototypes and comps I made as drafts:
4. Article Structure
- I Introduced categories to mark the articles into the six streams of content the magazine published.
- I Introduced a blog section to publish articles about announcing meet-ups, sharing progress, and in general publishing content about the magazine itself.
- Solving the problems listed earlier, a banner image to each article and social share buttons on the article pages were also added.