Introduction

The Intersectional Feminist is a pioneer online magazine dedicated to creating content relating to intersectionality, which looks into promoting social & political equity amongst all segments of society.

Who are the clients

The magazine is powered by a group of passionate women from all walks of life-lawyers, engineers, young editors, and illustrators from varied regional, cultural, and educational backgrounds.

“We strive to celebrate diversity by representing varied geopolitical, ideological, and linguistic identities through our writing.”

Scope of work

• To redesign & develop the entire website to enhance the look & feel.
• To capture the essence of their story and spin a narrative around that.
• To create a more engaging experience for readers, while educating first-time readers about the breadth of topics they specialize in.

Note: The design of the website was a collaborative effort. We tried multiple design options that appealed to our design sensibilities before going live.

The singular focus of the IF team towards striving for equality struck a chord in me & further fueled the desire to create a meaningful design for the cause.

Here’s a preview of the website. Do have a look at the website, since it is now live

Here’s a sneak peek of what the redesigned home page looks like!

Identifying high-level problems

Since there was no preliminary data on what the website readers were feeling, preliminary assumptions were made on what improvements could be made.

1. Brand identity is not cohesive: There is no indication of what the website’s vibe is, nor is their clarity on what the website’s core functions are.
2. No defined color scheme: Too many different colors are used throughout the site. These are inconsistent with the logo & create visual chaos.
3. Multiple typography styles: Multiple types of font result in a lack of visual cohesiveness.
4. Complex navigation: Having six tabs for a growing website where content is still being generated leads to unnecessary complications while exploring different sections of the website.

Competitive Analysis

To begin with, other competitor blogs were studied & the UI was thoroughly analyzed. This was a starting point in defining what vibe the website would exude. Awwwards & Site Inspire were referred to for drawing inspiration in the preliminary stage.

Rebranding

Defining the typography & color scheme

The design brief was to incorporate pink as the primary color, since it was in the logo. But to pair it with other accents that would bring out the beauty of the brand. A new typeface seemed like a mandatory change as well. The intent was to have a reader instantly know what the website was about. Using a serif font seemed like the perfect choice!

Home Page

Problems with the old design

• Hero section lacks context: For a first-time user, there is no context about what the website is about. There is also no information about what intersectional feminism is.
• ‘Editor’s choice’ section lacks visual appeal: Having a carousel to view articles may not be the best experience, as it prevents a user from viewing multiple articles at one glance. The background was drawing attention away from the article cards.
• No scroll journey on the home page: This is the page where ample information about the organization’s goals & stories could have been mentioned, to provide ample context to the user.
• Confusing navigation: Having 6 tabs for a website that is still growing seemed unnecessary. Toggling between these tabs repeatedly was complicated. The tab does not signify the active page. This can lead to confusion in the user’s mind about which page they’re currently viewing.
• Two headers create visual chaos: Especially since they are visually distinct with a number of elements ( i.e. tabs, social media icons, contact details) The contact details, social media handles are de-emphasized too much.
• Footer is not aligned with the home page colors

Before vs After-The Design Process

1. Improving navigation

For a team that was still growing & scaling the amount of content on the platform, providing lesser tabs seemed like the primary change to the design. Improving the brand identity of the team was also essential.

2. Enhancing brand identity-Landing page

Having a single quote that defined The Intersectional Feminist was not sufficient in providing adequate context to readers.

On every screen, a user must have clarity in the functions that ought to be performed. Providing relevant context to readers is of the utmost importance.

3. Editor’s Choice & Latest Articles

The intent was to showcase a diverse series of articles, so as to appeal to a larger audience. It was also essential to highlight the relevant data points keeping in mind the visual hierarchy.

Displaying only 1 article with a carousel does not do justice to the quantum of work done by the IFMAG team & results in an average browsing experience, from the reader’s perspective.

The Editor’s Choice & Latest Articles sections are also separated from one another to minimize the visual load for the reader.

4. Redesigning the footer

The dark backdrop in the old design was not cohesive with the brand identity. Also, there were too many visual elements that needed to be simplified.

Exploring Articles

1. Article categories:

Currently, a user must use the drop-down menu to toggle between different categories. This hinders the reading & discoverability of new content for a user. This transition between different articles can be a lot more friction-less.

Discovery of article categories must be seamless. A reader must be able to toggle between different categories with ease.

Collapsible header categories seemed to be the simplest, most easy to use & implement, so those were adopted.

2. Redesigning the article card:

The visual hierarchy of data points in an article card needed to be refined, so that data was easier to digest. It was also essential to include the average reading time per article.

About Page

Problems with the old design

• Visually chaotic cards: This makes the team lack cohesion as a single unit.
• ‘Read more CTA’ is distracting: Having a concise copy would negate the need for a CTA & improves the scannability of data.

One of my favorite parts of the entire redesign for this website was the ‘about page card hover state.’ Check out the redesigned about page below.

User Testing

8–10 users were interviewed over a video call/phone call & the website was showcased to them. They shared feedback on what their views on each screen were & how they felt on each screen.

This was an important stage in the process as it made us relook at the design from the user’s perspective & further refine the website.

Check out the Figjam file to take a closer look at what our users had to say!

That's a wrap!

Big, big thank you to Abhishek Nair, my buddy who helped with the design process & handled the website development. Also, for incorporating all the little tweaks that I requested him to make while coding & for giving me a glimpse into the world of development.

This was a blast to work on! Not only did I get to hone my skills as a designer, but I also got to take a peek into the world of development & how design translates into code. Shout out to Amrita Nair for entrusting us with this project!

A while back, I had also published other case studies on topics as well. Do have a look at them too :)

Thanks for your time! Hope you found this interesting to read :D