Brit + Co

Illustrated Guides

We experimented with creating beautiful, evergreen content optimized for search engines. Articles ranked poorly on key searches and site performance didn't help; Brit + Co had a 67 on PageSpeed Insights. However, readers and potential brand collaborators expected a visually-rich experience. We drew from foundational research I conducted with Brit + Co readers, focusing on readers who would do serious research to make their lives easier. How might we help her go deep on a beauty staple or fashion trend?

I conducted a competitive analysis and contrasted results with experiences flagged by our sales team as stellar and sellable. I paired with an editorial lead to generate ideas ranging from boomerang-like GIFs to atmospheric videos. I built a desktop and mobile prototype of the denim guide in Codepen so our photo contributors and editorial staff could visualize and ideate with design and eng in real time.

The Denim Guide launched successfully, and hit our key goals: traffic grew nicely over time, our new frontend jumped from 60 to 87 on Google's PageSpeed Insights tool, and readers loved it. But two problems arose. We heard from readers that skimming the long guide was a pain, and we heard from sales that we needed to scale our output fast. We focused on adapting a holiday cookie guide and a gift guide with these components, with success, while introducing a scrolling Table of Contents and a recipe module. The Table of Contents was a challenge of scale — four chapters grew to eleven, and forced us to design a grid layout to accommodate anywhere from 2 to 20 chapters. But ultimately, we iterated to a format that worked. Now, we needed a tool to build these articles.

Editor tools

Editors couldn't produce high quality multimedia articles with Wordpress. And guides were bespoke, a one-off effort requiring a significant amount of design, engineering, and product resources. Editors were unable to tell great stories on their own, nor at scale, nor without several quarters of work. I designed the MVP and long-term vision for a new internal editing tool and CMS. How might we design an easy-to-use tool that allowed editors, designers, photographers, and videographers to collaborate and build beautiful, high quality articles together? Our MVP was barebones, supporting the following:

• Create, edit, and view a guide.
• Save and publish a guide.
• Write and format text.
• Upload or link to images and videos.
• Control the size and position of videos and images.
• Divide the guide into chapters to which an editor can directly link.
• Edit metadata like tags, categories, URL slugs.

We conducted usability testing with editors as each feature came online. It was a rough start, with poor click targets, vague input labels, and dangerously similar edit and delete buttons. We quickly added collaboration features like locking, after one editor accidentally paragraphs written by another. We also added features to support just-in-time news editors, including richer sorting features, clearer draft and scheduled statuses, and commenting and feedback features.

We successfully published our Holiday Cookie Guide, a rich multimedia experience built with our new editor tool. And now, editors are producing these beautiful, expansive articles at a greater pace than last year. Previously, one article would take a quarter or two to produce. Now, several more premium experiences have been planned or already launched for the first half of 2018.

As we built the MVP, I standardized the design system and established a style guide. I outlined the information architecture and identified existing and needed components. The polished UI helped shed the MVP feel.

There is one other point of success I'd like to note. This may not seem like a key component of the design process — however, it was key to helping new editors learn a new tool and feel comfortable in a new workflow. To increase editorial tool adoption at a larger scale, I did the following:

• Hosted learning sessions with branded content contributors, editors, editorial contributors, and designers to introduce them to a new tool and gather their feedback and pain points in real time.
• Participated in weekly cross-department meetings for editorial initiatives. Our most recent initiative, Riding Solo, was an excellent forum for me to hear from editors, designers, and other members of the content team as they used this new tool and gather feature ideas and tool improvements.
• Helped get editors and other contributors unstuck. Acting as a debugger and source of knowledge can seem like a pain, but it's the best way to hear raw, honest feedback and build trust among your stakeholders.

Feedback helped us create a better onboarding experience, choose more accurate labels, reprioritize features, and revamp confusing flows. Editors are producing these beautiful, expansive articles at a greater pace than last year. Previously, one article would take a quarter or two to produce. Now, several more premium experiences have been planned or already launched for the first half of 2018. And reviews have been positive, including this quote from a stakeholder: I love it. I am obsessed with this tool.

Slideshows

In early 2017, we launched slideshows to increased engagement and reader satisfaction. We built the slideshow tool on top of Wordpress, however, editors found creating slideshows to be painful. Our editor Lesley put it keenly: 'I would rather spend 30 minutes writing a basic article than spend 2 hours editing a slideshow.' Ouch. We thought we could build a better tool, so I conducted research with Lesley and 4 other editors to watch their process. Key themes:

• Editors worked visually first. She started with a guiding theme for each slideshow, but whether something was kept or rejected was based largely on visuals.
• Style, beauty, and affiliate editors reported finding high quality photos could be time consuming and frustrating.
• Editors copy and pasted formatted text from Google Docs into Wordpress. This had unexpected results. Sometimes formatting would be preserved and everything would look fine. Sometimes it would not. This often created errors in the live slideshow.
• If a contributor wanted to add basic formatting for descriptions, she would have to write in hardcoded HTML tags. This slowed contributors down and often created errors in their work. It was just as frustrating for editors to review contributor content.
• Ordering, reordering, and updating slideshows was time consuming, particularly if slides were hardcoded with a numerical list. Editors came up with numerous process hacks to avoid this step.
• Jumping between editing and previewing a slideshow was a time-consuming final step.

We explored two options with stakeholders. Option A offered a way of storytelling that felt modern and contemporary. One stakeholder described this as the “Instagram stories” option. However, this would require editors to have a keen visual eye, excellent layout skills, and to put in more time to edit. Option B used the current slideshow frontend, and we could replicate current editor workflows to make the transition seamless and fast. However, slideshows would keep a traditional look and feel. Stakeholders loved the unique qualities of Option A, but agreed that option B would help editors create faster and allowing editors to create beautiful slideshows without too much required design sense.

We finalized the following features for our MVP after prioritizing with stakeholders. Editors can batch upload photos, and easily reorder, delete, and update slides. Editors can format descriptions with a WYSIWYG UI or with keyboard commands. Copy and pasted text from Google Docs is stripped of text formatting. Editors can view the slideshow within the CMS. We launched our slideshow tool and feedback was positive, with requests. Editors wanted to open a linked article directly from the slideshow editor, keyboard shortcuts, and an affiliate link converter. Overall, initial feedback and response has been incredibly positive, with slideshow creation time decreasing.