Responsive design for vertical sites in the HubPages Network.
HubPages is an online publishing platform where authors write about their passions. It peaked as the 50th most-visited site on the web during my tenure. In early 2016, the website was undergoing a transformation: from a single domain to a network of 22 sites. The existing site would remain live and function as the home base for authors to access their accounts.
- Type: Internet Industry
- Duration: 7 months
- Deliverables: Responsive design for HubPages Network sites
Success meant shipping all 22 sites without losing significant traffic. On an SEO-driven site, minor changes to the web design can have major impacts on traffic so we were treading delicate water. Because we would be moving indexed articles to the new domains, we had expectations for their traffic performance after launch.
With respect to readership and engagement, we relied on baseline metrics to help us analyze the effects of the move. One metric we tracked closely was a variation of Net Promoter Score (NPS): when a visitor landed on a HubPages article, they may be asked on a scale of 1-10 how likely they are to recommend the article. Because HubPages had a large and diverse audience, this metric was a reliable indicator of how a typical visitor felt when landing on a HubPages article. It would have been preferable to also collect qualitative data from readers but time constraints did not permit.
As Product Manager and only in-house Designer, I worked on several aspects of this network sites endeavor. This was also my last project at HubPages before heading to graduate school.
There were four aspects to my role:
Vertical Sites Design
I worked closely with three engineers to develop interactions, layout and implement a unified design across the 22 new sites. My focus was on the homepages and article pages (see below.)
Internal Workflow Tools
Our new team of curators needed a way to reliably and efficiently review articles and move them from hubpages.com to the new domain. I worked with an engineer to design, develop and test this new tool. For NDA reasons, these tools will not be covered.
I established a transition plan for our author community which included internal and external documentation, blog and forum announcements and help articles.
I hired and trained a team of five content curators who would hand-select articles for the new domains.
HubPages is a small, agile engineering-centric company. Management set an ambitious timeline to launch 1-2 sites per week with the first launch planned in just five weeks. We had about a month to prepare the community for the transition, create information architecture and design requirements, and develop content quality standards to help moderators determine which of the hundreds of thousands of articles would be eligible to reside on the new domains.
The HubPages Network homepage and category pages (which are essentially homepages for different content categories) were relatively low-traffic pages but presented an opportunity to inform and engage first-time visitors. To that end, the design goal for the homepage was to enhance discoverability of content and communicate the identity of the particular site.
Leveraging Existing Frameworks
We chose to employ the Masonry grid layout library for two main reasons:
- Time and resource constraints.
- HubPages authors often included beautiful photos inside of their articles and as a result the site as whole did well with Pinterest traffic. Masonry’s variable-height container model was perfect for showcasing a variety of different images.
The goal for the homepage and category pages was to display a variety of content; to show new visitors what we were all about. To that end, I came up with a four types of container models:
- Listing: popular articles and articles listed by category
- Article: award-winning articles, articles with significant social traffic or newly published
- Author: featured author modules to showcase the most prolific and popular authors on the site
- Promotional: containers reserved for company-related promotion, such social media buttons, sponsored articles or ads
The Most-Read Page
Articles on HubPages were the most valuable pages, responsible for a large percentage of traffic and revenue. HubPages wanted to maintain the look of a unified brand across all of the sites. The design goals for this page were to improve readability while maintaining performance. We would measure this evaluating engagement metrics on Google Analytics as well as change in NPS.
I used Balsamiq to quickly create wireframes. The speed of using Balsamiq is great for fast iteration and communication among interdisciplinary teams. Its stripped-down, minimal design communicates the state of the prototype clearly and narrows discussions to content hierarchy and layout rather than visual details.
Apart from HubPages’ dedicated author community, the majority of the millions of monthly readers came from search engines and social media networks. They came seeking answers to questions or inspiration for projects. They didn’t necessarily want to linger on the site. They’d rather find what they need and leave.
To adapt to the changing landscape of internet content consumption – such as the growth of mobile, apps and high-quality niche content – the key to long-term growth was smaller, more-topically focused domains with credible, relevant and readable articles.
There were a few key additions made to the article page to help balance these different user needs.
- Related Content Module: We repurposed the Masonry grid containers on the articles themselves for displaying additional content that might interest readers. We knew that related articles had high clickthrough rates so we placed them in the first position in the sidebar. Our understanding of the data was that search visitors tended to be goal-oriented, looking for answers to questions.
- Comments Shortcut: The comments section on HubPages articles often contained interesting and helpful information for readers, but they didn’t scroll down far enough to see them. HubPages articles were long-form and media rich, meaning they took quite a bit of scrolling to get through! We placed a comment count link in the left sidebar to signal to readers that a discussion is in fact taking place on the article.
- About the Author Bio: Authors wanted their bios to have more prominence and avoid the risk of being ignored in the sidebar. We agreed with the community and felt that the bio was part of the content itself. While it might seem counterintuitive to place the bio above the content rather than below, HubPages was trying at the time to augment its reputation online and be taken seriously when it comes to quality. Because the content is produced by the community, we thought that showcasing our authors’ qualifications would be the best way to communicate credibility early on.
Overall, the HubPages Network project was a success. 21 sites performed well with respect to both traffic and NPS! One site performed worse so we examined it more closely.
NPS was a metric we had some control over during the article selection process, but taking a risk with search traffic. Our hypothesis was that the new sites — having a much higher concentration of high-quality articles — would see search traffic gains. While it took a longer time to see the traffic results compared the NPS, they turned out to be positive.
Finally, many HubPages community members expressed joy about the project in the forums. In particular, authors who had their articles moved to the new domains directly benefitted from the traffic and NPS improvements.
What I Learned
Sometimes Quality Has to Wait
Different organizations define and prioritize issues of quality in their own ways. In this project, releasing sites quickly (and in a way that ensured their continued maintenance) was more valuable to the company than creating 22 custom, pixel-perfect designs.
Resources and time are limited. You can’t do everything right now. Despite being irked about the decision to delay design work into the future, I understand why the decision was made and what was at stake. This gave me practical experience doing design work with real world constraints.
Leverage existing resources
We were fortunate that much of the HubPages staff had published articles on HubPages. This meant we could prototype the design on a local test site using staff articles for experimentation. Of course, we couldn’t test anything until the real sites were live, but this approach allowed us to more quickly iterate through design decisions and test our visual choices.