In the beginning, there was the InVision blog. It had become a source of inspiration, entertainment, news, and guidance for designers around the world. Pretty great, right? But like any startup, the team at InVision wondered, “How can we do more? How can we make it better?”
I was part of the team that transformed the InVision blog into Inside Design, a website that aims to be more than just a list of blog posts. We started with a lofty goal: create a destination that focuses on finding and surfacing engaging and helpful content in a more personalized and captivating way. Not an easy task, but one that we were excited to undertake. Here’s how we did it.
Our challenges
Every day, thousands of designers, design leaders, writers, and strategists visit the InVision blog in search of something. Some come looking for inspiration; others are seeking advice and guidance on topics ranging from the next step in their careers to the next new tool to add to their design stack. Our mission has always been to be a blog written by designers for designers.
But one day, we realized that our efforts and goals had outgrown our current setup. We had become a one-stop destination for designers, but that one stop more often than not was literally one stop: readers would visit the site, read one post, and then bounce on to other, more engaging destinations.
We were also getting feedback that our page style and functionality were dated, especially for a blog focused on design. We should have been setting trends, not catching up to them. Features like a persistent navigation bar and a search function weren’t just “nice-to-haves”; they’d become industry standards.
In addition, our ways of displaying and featuring new content had gotten stale and, frankly, a bit lazy. The five newest posts were featured in a rotating hero banner at the top of the page while the remaining posts were listed with a title and a hero image in chronological order. That was it. No additional information (like a category, author, or even a publish date) was provided.
So we formed an interdisciplinary UX team to make some necessary changes. Instead of stumbling blindly into a brand redesign, we took a design thinking approach to our redesign:
- we developed empathy with our readers by conducting user testing and user interviews;
- we took the time to define the specific problems we were facing (engagement, discoverability, personalization);
- we generated many variations and approaches to see what would be the best fit;
- and we tested, tested, and tested more until we settled on a version 1.0 of a publication that made us proud and made strides towards addressing the feedback we’d gathered.
Our research
We did a ton of user research upfront, and we used all of the data we collected to inform our early variations. We didn’t just speculate that there was an opportunity for us to improve the reading experience; we knew there was an appetite from the community for deeper, better improvements to the entire blog.
For instance, one of the A/B tests we ran on the front page was a restructuring of the hero carousel and featured posts into a more mosaic-like format in an effort to get more content “above the fold”. The results?
- The mosaic variation resulted in a 330% increase in clicks on the featured articles with no significant impact on clicks of non-featured articles
- The variation resulted in a 46% increase in total article clicks on the homepage
- Around 30% of the total clicks on featured articles was on the bigger featured article on the left side of the page
- There was no significant impact on bounce rate or digest subscriptions
Our next hypothesis was that we could increase clicks in the hero section even more if we swapped out the content once the reader clicked on it. There’s more information on this change in the Personalization section below.
Another hypothesis we had centered around adding a navigation element to the front page. By adding links to category pages, we believed we could increase readers’ pages per session and time on site on the blog.
The addition of blog navigation increased pages per session by 6% and lowered the bounce rate by 3%. This confirmed our hypothesis that adding a navigation would encourage more exploration within the blog. The addition of the navigation had a negative impact on clicks on featured articles and non-featured articles on the homepage, but that makes sense because readers were clicking on the navigation elements instead of the featured posts.
Our process
After reviewing our research and prioritizing our needs based on resource availability and reader feedback, we made some changes. Here’s what they were:
Engagement
Front Page
After reviewing the user research, we tested and redesigned the front page to give readers the content they actually want to see: relevant content that’s timely and that fulfills a need, whether that’s inspiration, advice, or staying up-to-date with design trends. We made the content easy to find, and we organized it by relevance instead of publication date.
One of our biggest UX problems was designing the grid. In the previous blog, the featured content was in a hero carousel above the fold; the rest of the content lived below the fold with no established hierarchy. Our testing showed that a mosaic layout was more consumable than a list view, but we needed to figure out how many articles would be featured at once, and how featured articles would get categorized (top stories, most recent, editor’s picks, etc.).
In the end, we decided to scale back the amount of content presented. This was mainly because only one to two new articles would be published a day at launch, so initially, keeping the grid updated and relevant would be challenging.
My role as a content strategist was to help the team analyze the flow of new content. I managed both the editorial calendar and the staging of posts in the CMS including the categorization and organization of content types to ensure we had a steady stream of content to publish and a variety of topics and types of content to feature.
Article Pages
During user testing, we found that inline modules that interrupted the reading experience received very negative feedback. That being said, we wanted to find a way to add helpful, contextual content without being invasive and annoying.
To achieve that, we added a featured post module with a call-to-action to the bottom of articles and a context sidebar to the article page. This sidebar scrolls alongside the article and contextually populates link previews, pull quotes, ads, and related InVision products. It acts as a companion piece to each article and keeps the reader engaged while scrolling.
My role as a content strategist was to find a way to make the best use of these new sidebar modules to increase social sharing, page views of related content, and clickthroughs to other InVision products. I was responsible for handpicking every item that appeared inline and in the sidebar, and I had to find a balance between providing additional helpful content and staying out of the readers’ way.
Discoverability
Front page
The InVision Blog had tons of great content, but it was difficult to find what you were looking for. There wasn’t a hierarchy to any of the category pages, and it lacked a main navigation. The reader could easily become frustrated trying to find the content they wanted, making increased bounce rates an issue across the blog. So we created a top-level navigation and added several content categories as well as a search bar to help readers find exactly what they were looking for.
As a content strategist, I was tasked with creating and editing the taxonomic structure of our content within the CMS. While a full-scale qualitative content audit is on the calendar for the beginning of net year, some of the short-term changes I made included:
- making use of both categories and tags for improved search functionality
- recategorizing a large number of posts from the catch-all “design” category to new categories that were more specific (like accessible design, UX Design, UI design, design resources, etc.).
- adding categories and tags for specific types of content (like video) that improved the experience for readers and allowed for a Featured Videos module on the front page
Other pages
In addition, we wanted each type of page (new design resources, videos, category pages, author pages, etc.) to be templated but also flexible enough that modules could drop in and out based on different needs. The category and author pages in particular were designed to essentially be their own home pages that placed focus on the content.
I was brought in to offer insight into the types of content in our database and on our editorial calendar to ensure that every possible content type was accounted for.
Personalization
Personalization is an ongoing project on the blog redesign team. The major changes we made in this area revolve around the use of cookies to aid in personalizing what content is featured for each reader. As the blog’s content strategist, I added the Top Stories modules to each article page which showcases three popular posts that are specific to each reader’s viewing history. I also optimized all new content to be featured both on the front page and in the sidebar by editing images and meta copy to be helpful and informative without being distracting.
Conclusions and the path ahead
The first version of the Inside Design restyle went live for 10% of visitors in early September 2018 and was expanded to include 100% of visitors two weeks later. Qualitative feedback from both the on-page survey and our social media channels was predominantly positive. Readers were happy to see us catching up with features they liked from other blogs. Feedback on the new design features was positive as well.
Metrics-wise, there was a dip in organic search traffic immediately after launch that the engineering team chalked up to Google’s search algorithm re-crawling the new site with a different URL (we changed from http://invisionapp.com/blog to http://invisionapp.com/inside-design/). After the dip smoothed out, the site saw a 10-15% increase in both page views and time-on-site along with a 20% drop in bounce rate. Likewise, signups for both the email digest and the SaaS product increased.
Moving forward, the team wants to do much more with personalization to make visiting the blog a more individualized experience. In addition, there are the requisite bugs and broken things that come along with a 1.0 release. From a content standpoint, the plan is to split time publishing new content of all kinds (text, video, social) while nursing and polishing excellent content that’s already part of the InVision blog database.