Lark

CASE STUDY

Storybird Poetry

Storybird was launched with a picture book format that immediately created a demand for two other formats: poetry and chapter books. When we decided to bite off poetry, we wanted the same simplicity we created with picture books, but also limitations so we wouldn’t need to moderate what would end up being millions of poems.

Here’s how we went about it—the gummy mix of inputs, experiments, and iterations that influenced the product, team, and millions of Storybird members.

Silly or serious, one third of our picture books were devoted to poetry

The Backstory

The starting point for poetry was our picture book format. One third of our members used it for poems.

We wanted to support their behaviour, but also stem the flow of content to moderation—it’s costly and delays a writer from getting feedback.

There were some initial discussion around using “styles” (visual markdown) to enable a poetry format within the existing book editor, but that would have complicated the UX and UI—and left keyboard input unaddressed.

Instead, we created a new format, best described as “magnetic poetry meets artwork.” We went from idea to MVP in two months, and, based on the success of the web app, launched standalone poetry apps for iOS and Messenger.

Here’s a snapshot of its progression, followed by some of the key constraints and challenges we faced in bringing it to life.

Creating the poem format

We set three constraints to develop the poem format:
• A single image to focus the UX
• Pre-defined word sets to avoid moderation
• Public-only, to reduce decision-making and boost sharing

The artwork

Artwork on Storybird is organized around artist portfolios. You browse, fall in love with an artist, and use their work to jumpstart your writing. (Alternatively, you can use tags—say, “balloon”—and draw across multiple artists.)

Artist collection

Tag collection

Either way, once you find something you like we inject the illustrations into an editor. With picture books, the images are arranged in the sideboard as thumbnails that you can drag and drop onto the canvas. It’s a kinetic process and people of all ages love dragging, dropping, and arranging pages. It’s like a puzzle.

But we wanted to avoid that model with poetry. Our goal was to keep the images static and make the word sets playful.

As a result, we chose to hide the portfolio images behind the canvas and only display the initial image you chose (unless refreshed)—leaving the sideboard for the words, which set up the same drag and drop pattern people had come to love with picture books.

The result of these choices is that the writer is focused on how the words relate to (or contrast) the chosen image and spends her time exploring ideas rather than fussing with endless options.

The words

To keep people focused on words and ideas, we spent a lot of time iterating on word dynamics.

The first issues was legibility. Laying type on a random illustration will most often result in poor contrast. To solve this, we settled on solid containers (“shards”) and ran white type overtop—not unlike magnetic poetry.

Legibility was key given the multitude of possible backgrounds

The shards themselves are generated via CSS and randomly assigned a gentle tilt from -2 to 2 degrees. We noticed this created a casual appearance that invites play and suggests “there are no mistakes.”

Unlike magnetic poetry, which mostly deals with fridges for backgrounds, we run the word shards over beautiful illustrations—where a standard black background might be too harsh. To solve this, we borrowed the algorithm we use for picture book covers and generate a colour picker to help the writer decide if the words should seep into the background or provide a deliberate contrast.

An algorithm draws shard colour options from the image

Getting the typography right also took a few cycles. Storybird uses Georgia and Arial as defaults, so our initial assumption was to use Georgia for the shards given that poetry has historically been set in serifs. But Georgia seemed a bit busy in the shard housing, and Arial was rather plain and unexpressive. In the end, we settled on Museo (a Rockwell-esque slab) and set the letters in lowercase, which gave us the contrast we needed while retaining a casual feel that didn’t fight the artwork.

Georgia vs Arial vs Museo

Finally, the word sets themselves presented their own unique challenges, particularly because, well, kids. One of the first conditions in the editor was no shard overlap. For the reason you might expect.

But the broader challenge was to devise sets big enough to be expressive, but not so big as to be unwieldy or so generic as to lack power. After trial and error we settled on ~80 words per set, with a healthy dose of the pronouns and adjectives required by angsty tween and teen girls (which make up 80% of Storybird’s 9 million members).

Sharing & consumption

We had to rethink a few things on the platform to accommodate poetry.

First, we made public sharing the default. Picture books default to private and have to provide management details like categorization or editing. But poems don’t contain private matter and can’t be edited, so the post-publishing process can focus entirely on nudging someone to share.

Next, poetry was given its own section with an infinite scroll and inline reactions. This allowed members to stay within the feed and consume 10x the inventory vs spelunking into individual media views like they did with books.

And finally, we began creating a set of APIs for external consumption (ie. an iOS app). Because after the launch of poetry, media production on Storybird did this:

And the members started to do this:

While they arranged words to create “poems,” they also adapted the format to create sentiments and messages. And that was the inspiration for the next iteration of poetry—standalone apps called Lark and Lark for Messenger.

Lark took the basic ingredients of the web app and focused on:
• A hybrid community, acquired through a new channel
• Refined UX/UI for poetry creation
• Ecommerce

A hybrid community

Storybird’s acquisition engine is based on teachers using free tools to onboard students, a percentage of which then convert to regular members. With Lark, we had the opportunity to acquire members through a consumer channel, which meant designing the app to feel like a standalone community even as it fed off of Storybird APIs and members. That meant native sign-up, onboarding, account management, sync, profiles—a home away from home.

Birds of feather: the same DNA as Storybird, but unique in its own right

Refined UX/UI

Moving to iOS gave us new interaction models for creating poems, along with size constraints that meant tweaking the layout and features.

The diminished screen size forced the word tray underneath the image and meant tucking away the shard colour options and image browse/refresh…

Some trimming, squeezing…eventually it all fit

But it also allowed us to introduce a playful tug-to-refresh pattern, now made easier with better defined image and word sections.

Tug-to-refresh was an amazingly satisfying pattern, particularly with artwork

When it all came together, Lark was a snappy, intuitive successor to poetry-on-the-web. Here’s a short promo…

Ecommerce

Another benefit of moving to iOS was one-tap shopping. Post-launch we turned our attention to supporting purchases of physical poems—prints and cards—as well as digital upgrades, like word sets and thematic collections.

Here’s the theme collection view, accessed from within the editor:

And printed? Poetry is stunning…

Lark for Messenger

Soon after the release of Lark we were approached by Facebook’s Messenger team to participate in the launch of their new app store. They had seen Lark’s “poems” and felt they’d be a unique compliment to other side-car messaging apps like Giphy and Imgur.

With Lark for Messenger we focused on two use cases: quickly sending someone a Lark from a library of categorized messages and sentiments, or making and sending your own.

This meant shifting the default view away from the Instagram-like social feed to a browse and search mode that prioritized speed and well-defined message categories.

Here’s what that looked like in the wireframes…

…and in production…

Left: variations of the category view. Right: Send and Messenger views

And, to wrap this up, some of the happy/sad/silly/mad messages that were made and sent to friends, family, coworkers, and, of course, app developers.

Summary

Storybird poetry became a foundational format for the platform, alongside picture books and serialized longform. Millions of poems were produced, first through the web app and then Lark and Lark for Messenger.

While the apps were embraced by Apple and featured dozens of times in the app store (200k downloads in 6 months), one of the most important results was that poetry matched our original picture book format in its ability to acquire, engage, retain, and monetize members.

Finally, and personally—I’m most proud that we invented a new media format that sits somewhere between sentiment and prose, communication and creative expression.