A beautiful, in-depth reading experience.
In 2017, Brit + Co’s media experience had a pretty healthy diversification of traffic. Articles were successful on Facebook, Pinterest, and Instagram. But, there was room to grown in Google search results. While B+C had succeeded in some aspects — articles were displaying in the News section of Google, for example — many articles weren’t ranking high for valuable searches. So, we put together a plan for making gains with long tail, SEO-rich content. However, our site performance was affecting SEO rankings. It was slow — a 67 on Google’s PageSpeed Insights.
Around the same time, our editorial team began investing resources on a small collection of rich, complex stories supported by great multimedia. Yet, our standard article experience felt generic, unbranded, and decidedly not authoritative. This also created difficulty for our sales team. They wanted to sell sponsorship for these rich editorial packages, but the experience didn’t stand up to many competitors in the space.
So, I was tasked with designing the MVP, then guiding the long-term vision for bringing our Interactive Destinations to life. In classic design question, I aimed to answer the following.
How might we…
We started with this aspirational idea. But getting there would take some time, testing, and a completely new workflow across the company.
We had ambitious plans. However, we kept our first iteration simple. First, we’d test the following:
We assembled a team of key stakeholders across editorial, creative, product, and engineering. For our first iteration, I worked with two editorial leads, Annette and Sharon, and one of our engineering leads, Scott, along with our product lead, Shanan.
As this project began, I reflected on what we knew. The business goals were clear. However, I wanted to reaffirm that we were solving a real problem for our reader and giving her a better experience.
For several weeks, I led and conducted exploratory interviews with 20 Brit + Co readers across the United States interested in fashion and beauty. I interviewed them about their lives, their interests, their fashion and beauty problems, and more. I drew upon this exploratory research to determine what reader problems we should tackle.
From these interviews, I observed two trends. First, the majority of readers were attracted to more beautiful, high quality photography. This wasn’t a huge surprise. Brit + Co is a highly visual site, and it made sense our readers were drawn to that. Second, a subset of readers was extremely interested in comprehensive, in-depth reports around fashion and beauty. She’d do serious research now to make her life easy later.
We chose this persona as the ideal reader of our new articles. How might we help her go deeper on a new fashion or beauty trend or technique? How might we support her voracious need for knowledge?
Working with our editorial lead Sharon, we formed an idea: a long, in-depth article supported by a beautiful multimedia presentation. Still, this was vague. I took two approaches to guiding the scope of potential ideas.
First, I conducted a competitive analysis, looking at other SEO-heavy, media-heavy experiences. For companies that claimed the top spot in key search results — what were they doing? To contrast, I mined a collection of experiences our ad sales team had flagged as stellar and sellable. By comparing both groups of content, we flagged a few things we found appealing, like full-width images and videos, or interactive elements like quizzes.
After that, I acted as the idea generator for our cross-team collaborators. What might a new storytelling experience look like? How could we effectively use photo, video, and editorial content to tell a story? How can these experiences feel unique but also be scalable? How can this experience feel fast and dynamic?
Our editorial team looked to launch a guide to finding well-fitting denim in a few months. I worked with Sharon to do ideate on solving our reader’s problems. Our first round of ideas included a few key features: boomerang-like GIFs, a mobile sub navigation, and well-placed video. We finalized a rough plan of what an authoritative, multimedia guide to finding the best fitting denim might look like.
Next, I explored upcoming stories planned on the editorial calendar, including a travel guide and a cookie guide. I wanted to make sure this would scale beyond the denim guide. This range of content allowed me to flex my skills and push each idea to its best presentation. What would the best experience for each guide be? What similarities did they share, and how did they differ?
We settled on a few simple distinctions that would push these further than our current content:
From there, I built a desktop and mobile prototype of the denim guide in Codepen so we could see the video and animation functionality in action. As I prototyped, we moved full speed ahead with the denim guide production as our photographers and video team filming and photographing. And while I refined certain prototype behavior like the animating subnavigation, our engineering lead laid the groundwork for the production version of the guide, building a fast new framework separate from our current tech stack.
We continued to refine and iterate from initial wireframes to the day of launch. I’d replace dummy content, Scott would push a new version, Zoey would respond with feedback and edits, and the cycle would repeat.
The Denim Guide launched with much celebration internally and externally. Our initial traffic was modest, but we expected our traffic to grow over time due to the nature of an SEO strategy. Still, we learned a lot from this first version.
With those learnings in mind, our second iteration would face a bigger test: can we scale this format?
To test the ability to scale, we worked with key editorial contributors to determine two guides that could be developed around the same time with our new editorial tool. A video-heavy holiday cookie guide and a photo-rich holiday gift guide would be good for testing.
After working with editorial stakeholders to determine the minimum to make both guides successful, I embarked on competitive research for both the Cookie and Gift Guides to compare what content we’ve created in the past with what other media companies were producing.
I also pulled knowledge from internal usability testing. We found that readers scrolled quickly and often, skimming content but bouncing before reaching the end. I marked this as an opportunity: how might we enable our girl to scan more content, reducing bounce rates?
My first design cycles consisted of acting as idea generator. I would work with our editors to develop potential functionality and layouts based on the stories they wanted to tell.
For the cookie guide, I designed video-heavy layouts that reflected the initial structure of the denim guide. I also designed a second scanning/scrolling compontent — we called this the Table of Contents — and a recipe module to help structure the content in a more digestible, skimmable way.
For the gift guide, I explored a few different options, but had a lot of difficulty making the denim guide layout work. We explored a few different directions but ultimately concluded that the requirements for the gift guide differed too far from the denim and cookie guides.
After iterating on both, we concluded with a final mock for the cookie guide including two new features: a different visual layout for chapters including a Table of Contents, and a recipe module.
As editorial and I settled on a layout, our photo and video team began documenting the cookie making process — one of the great perks of working at Brit + Co.
We encountered another problem as stakeholder requirements changed shortly before launch. The problem in question was the Table of Contents module. I’d iterated on a few versions, and the one we chose was big and beautiful. However, it worked best for guides with 2–8 chapters — our proposed limit. However, new sponsors arrived at the last minute and pushed our chapter number to 11. The Table of Contents was simply too long on the mobile experience. At the last minute, we reverted to an earlier design to handle a larger, more dynamic number of chapters. I worked with an engineer, Julie, to design a dynamic grid that accommodated any number of chapters from 2 to 20 that worked for most on desktop, tablet, and mobile experiences.
By launch date, we successfully published our Holiday Cookie Guide, a rich multimedia experience built that extended our interactive destinations framework. We saw success with individual creative assets across multiple social channels, and we’ve seen this cookie guide creep steadily upwards in SEO rankings.
Our takeaways from this version:
This project is a work in progress, and while some successes will only become apparent over time, I would like to note immediate victories.