I make websites and stuff.

The ’Zine

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 grew up learning how to design and code websites since high school. I tried my hand at designing and coding as much as I could as a freelancer, and ended up studying HCI and Design at UC San Diego. During my time at college, I started UCSD's first design consultancy called Studio 1346 on campus connecting students with industry clients and getting them real-world exposure. I also worked with Design for America to address social issues like homelessness and food insecurity through the iterative design process. My love for designing and coding websites has never left me, I've always been working on some freelance project or the other ever since my high school days.

Currently, I'm taking on freelance design work, so if you have a project in mind, I'd love to chat! I'm also working part-time with Mindsparkle Mag as an Editorial Intern interviewing artists and designers and publishing their stories. Here's my favorite interview so far! Give it read, I hope you'll enjoy.

Previously, I was a UX Research Intern at Google on the Localization team. Our holistic goal was to make Google’s vastly diverse user base feel at home by making products feel native, in over 75+ languages and cultures.