Responsive Redesign of the SoulCycle Blog

SoulCycle aims to be more than just a workout class - it’s meant to be a lifestyle brand complete with branded apparel and engaging content. However, the content portion of the brand, hosted on the site’s “Community” page was held back by a number of UX and design flaws. We realized that the great, engaging content being created by our writing team wasn’t getting the attention it deserved because it wasn’t easy to navigate the main blog page to find relevant articles. Then once readers hit individual article pages, a number of design flaws made it difficult to consume and share content

So we set out to redesign and enhance both the main community page as well as the article level page template to make our content more engaging and easier to browse. Redesigning the Community section was a high priority for me personally, since creating a redesign concept had actually been my original design test when interviewing for my role at SoulCycle. In addition to the initial research I had already done for the design test, we did a competitive analysis of other publishing focused sites with a similar affinity group and also did some preliminary user testing research with UserTesting.com to validate our theories about the key areas for improvement.

On the homepage I identified several key issues. First, there was no page hierarchy. Articles were jumbled together seemingly randomly with Instagram posts, and all articles no matter how recent or important received the same visual treatment. Second there were no titles unless the user hovered over an article, which provided very little lead-in to entice the reader to click through to an article page. Third, article category labels were not clickable as a filter or category section that would let a user actually see other articles in this category, which made interest specific browsing hard.

The Old Homepage Design

Old SoulCycle HomepageOld SoulCycle Homepage

The new homepage has several key design strategies and features to make it more engaging and easier to browse. First, there is a much stronger content hierarchy with a clear hero article, which defaults to the most recently published article unless the SoulCycle content team pins another article in its place. Below that are secondary and then tertiary articles, which give the reader a clear sense of what is the most important content to examine first. Second, there are now content categories that exist, both as a sub menu at the top of the page and also as labels on each article card. Clicking either a label or a sub menu link takes the user into that subcategory, making the page much more useful for readers who want to hone in on a particular type of content such as nutrition and food.

The New Homepage Wireframes

Wireframe of HomepageWireframe of Homepage

The New Homepage Final Design

Live View of HomepageLive View of Homepage

The final visual design, which was done by SoulCycle's then Director of Digital Design, followed the wireframes quite closely with a few additional typographic flourishes.

As a result of the redesign, the bounce rate for the community homepage dropped by 12.2% and the exit rate for the community home page fell by 18%. This  clearly demonstrated that the redesigned community homepage made page visitors more likely to engage with SoulCycle’s content.

Much like the homepage, the article pages also lacked a clear content hierarchy and provided little visual appeal. The article body itself had line lengths that were far too long for easy reading and featured images with wildly inconsistent aspect ratios. These combined problems made it rather difficult for users to flow through an article. A lack of related articles or easy ways to navigate back to the community homepage, made it all too easy and likely that users would simply exit from the article page rather than further engaging with the blog or the rest of the site. 

The Old Article Design

Community Old Meet Emily Turner ShortenedCommunity Old Meet Emily Turner Shortened

The redesigned article page echoes the strategy employed for the homepage with a prominent hero image at the top of the page to reflect the visual nature of the SoulCycle brand. A larger text size and shorter lines make for enhanced readability while consistent image sizes make article content flow more naturally.  Social sharing icons are also prominently featured at both the top and bottom of the article, to make it easy for users to share at the most convenient moments. To re-engage users when they are ready to leave the article page, a small back button and social sharing buttons appear in the upper left corner of the screen when the user begins to scroll back up towards the top of the article.   At the end of each article there is a list of related articles and below that the eight most recent articles from the SoulCycle blog, providing additional opportunities for users to keep browsing content.

The New Article Wireframes

Wireframe of ArticleWireframe of Article

The New Article Final Design

Live View of ArticleLive View of Article

Final visual design  was done by SoulCycle's then Director of Digital Design but followed my wireframes quite closely with a few additional typographic flourishes.

Overall the redesign, was very successful for individual article pages as well as for the homepage. The exit rate for all community pages (that is the rate across all articles) fell by 2.4%, indicating that the redesigned article page template made users more likely to engage with other articles or other portions of the site, such as buying SoulCycle apparel or booking a class. The live redesign can be viewed at soul-cycle.com/community.