Brit + Co

For several years at Brit + Co, I developed new visual storytelling experiences and spent my final year designing the CMS and editor for multimedia articles.

Illustrated Guide Experiments

Our first experiment was creating beautiful evergreen content optimized for search engines. Articles were ranking 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, which was often weighty and slow.

We experimented with creating a beautiful performant denim guide. Drawing from foundational research I conducted with Brit + Co readers, we imagined a comprehensive but beautiful guide on timeless fashion and beauty needs. A persona on foundational research I conducted, we knew this reader would do serious research now to make her life easier later. How might we help her go deeper on a beauty staple or new fashion trend?

We proposed rich, in-depth articles supported by beautiful multimedia presentation. 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?

Editors wanted their work to look high quality and authoritative, but also needed to publish articles quickly. Editors wanted an article that looked great out the box, but could be further customized. And tools that helped them focus were key. Suggestions and helpers like Grammarly made things easier.

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. You can see the Figma file and its evolution here.

There’s 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.

This process built a better product. 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, with plenty of constructive feedback. Still, one victory includes this quote from a stakeholder: “I love it. I'm obsessed with this tool.”

Slideshow editing tools

In early 2017, we launched slideshows. Engagement increased across the site and readers loved the collections of rich, beautiful photography paired with authentic storytelling. We built the slideshow tool on top of Wordpress, however, editors found creating slideshows to be a frustrating, painful process.

Our editor Lesley put it keenly: “I’d rather spend 30 minutes writing a basic article than spend 2 hours editing a slideshow.” Ouch.

We thought we could build a better experience in our new tool, so I sat down with Lesley and 4 other editors across to see how they created slideshows. Several key themes emerged.

• Editors worked visually first. She’d start 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’d 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 engineering, product, and editorial stakeholders. Option A offered a unique, visual way of storytelling that felt modern and contemporary. One stakeholder described this as the “Instagram stories” option. However, this option would require editors with a keen visual eye, excellent layout skills, and a willingness to put in additional time to explore a new format of storytelling.

Option B utilized the current slideshow frontend, and we could replicate current editor workflows to make the transition seamless and fast. However, slideshows would retain a more traditional look and feel.

Stakeholders loved the unique qualities of Option A, but agreed that option B would help editors create faster, wasting less time 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.