I make websites and stuff.

The ’Zine

thezine.biz

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.

Rahat Chawla and his series about reviews of restaurants.

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 Aesthetics

It 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.
The old version of the site.
  • 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.
The experience of scrolling through contents.
  • 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.

The Redesign

Splash of the redesigned homepage.

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 .
Hardcoded back-end of the old site.
Editing content experience of the new site via a CMS (Siteleaf).
Editing content experience of the new site via a CMS (Siteleaf).

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:
Sketches and early wireframes of the redesign.

4. Article Structure

  • I Introduced categories to mark the articles into the six streams of content the magazine published.
Cateogory structure for the new site.
  • 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.

Hi, I'm Prabhav Khandelwal. home

I'm a Delhi-bred freelance designer currently studying Cognitive Design, Human-Computer Interaction, and Design at the University of California at San Diego. My vices include typographic pornography, obscure Indian music, Manchester United and (thinking about) writing.

I've been freelancing making websites & stuff since high school, and somehow am still managing to do it through college. I intered with Accenture at Google as a UX Research Intern in the summer of 2017 as part of Google's localization team. On campus, I co-founded UC San Diego's first student-run design consultancy, Studio 1346 and also served as a studio lead with Design for America.