BlogHer.com

Company
SheKnows Media

Duration
Oct 2015 - July 2016

Role
Lead Product Designer

Category
Content Site/Content Publishing

Blogher_2560_DTBlogher_2560_DT

BlogHer.com Redesign

Background & Brief

BlogHer.com publishes stories by internal editorial team and female bloggers in the U.S. It is by far the biggest of its kind. Female bloggers can generate significant amount of income writing stories for companies/campaigns. Bloggers can access these assignments on BlogHer.com's publishing arm, Momentum.

One of the issues that editorial team faced was that it was getting increasingly difficult to identify which stories were written by editorial team or regular blogggers. In addition, the site wasn't mobile friendly so the site presented multiple issues that needed solutions.

BlogHer also hosts one of the biggest female blogger's conference in the world. The conference attracts
A-List keynote speakers. In the past,award winning film director Ava Duvernay and Kim Kardashian gave keynote speech. However, despite the amazing experience that people get from the conference, the conference section on the site posed so many navigational and aesthetic problem.

The editorial team at BlogHer identified this problem and we kicked off initial conference call right after the site launch. I delivered new ux and visual designs that satisfied major stakeholders needs and wants which I delievered by July of 2016 before I left the company. The conference section hasn't deployed just yet.

Process, Role and Challenges

The design kickoff happened in October of 2015 and the site was set to launch by February of 2016. This project was happening with StyleCaster.com refresh side by side. This was incredibly stressful time and I was pushing well over 80hrs a week 3 months straight.

As a sole product designer, I presented design solutions via conference calls to the team who were in San Francisco area. Up until this time, I didn't have direct conversation with Blogher team and I got to work with all the major players through this opportunity which gave me good insights about the organization and the business model.

My duties entailed driving stakeholder conversation for product design and iteration, giving technical design directions to offshore development team and design the property in its entirety from start to finish. 

Result

BlogHer team was really happy with the redesign overall and editorial team was getting positive feedbacks from the readers. Editorial team especially liked the new filter where they can filter out contents by editorial team and bloggers.

However, redesigned site didn't last long. SheKnows Media executive team pivoted business model for Blogher.com to focus mainly on the conference. As a result, all the editorial contents would migrate into SheKnows.com.

This was a strategy to make Momentum into a integral part of SheKnows and encourage writers publish stories on SheKnows.com rather than Blogher.com. Conference section is still being developed. 

Discovery Phase

Having conversations with stakeholders gave me clear insights and business goals for the site. The main thing that stakeholders all wanted was to be able to filter out contents by internal authors and external bloggers. Also, the team wanted to highlight conversation happening on the Blogher.com. In response, I proposed idea to showcase conversation happening on each stories on right rail.

Blogher_filter_1Blogher_filter_1

Buildling Skeletons

After collecting enough insights from stakeholders on their needs and wants, I began to create structure for the site. The site had some structure to begin with but I redrew site map because there were additional features and new pages that were getting built out.

BH_sitemapBH_sitemap
bh_wire_fullbh_wire_full

UI/Visual Design

When all the wires were approved by stakeholders, I began to plug in photo assets and tweaked all the details until everyone was satisfied.
To kick off, the team selected typefaces, defined the font sizes and line spacing for various modules and defined color scheme. When all the elements were decided, I began to iterate layouts for homepae, category page, article page and conference page. Conference page by far had most iterations because it was the biggest transactional piece for Blogher.com

bh_visual_guide3bh_visual_guide3
bh_designbh_design
BH_2560x1440_1BH_2560x1440_1
BH_Mobile_ConferenceBH_Mobile_Conference