Story & Campaign Editors

Designing the creation experience within Prezly

RESPONSIBILITIES

User Research & Strategy

User Experience

Visual Design

ROLE

Product Designer

YEAR

2021-2022

Overview

Prezly is an all-in-one software solution for managing content and relationships in communication teams. Users can create an online newsroom, post their news, and send campaigns with these articles attached to their contacts using the app, which are also stored and managed through Prezly.

In this case study, I'll walk you through all of the improvements we made to the content creation tools during the last three years, where I was able to reimagine the platform, understand our users' needs, and craft amazing bits of software in a creative ecosystem that help thousands of people do their jobs every day.

A communication workflow

The platform handles practically every aspect of a communication professional's workflow, including importing their contact list, designing a website, writing, publishing, and scheduling their stories and campaigns, and tracking replies and analytics.

During the three years described in this project, we redesigned all of the core Prezly tools from the ground up, basing our roadmap and decision-making process on data, user feedback, and research, generating several proposals and iterations until we found great solutions for our story and campaign editors.

Writing your story

My team was tasked with building all of the editing updates we had in mind over the last year. The most important objective was to transfer as many people as possible to the new editor, and in order to do so, we needed to make it amazing.

We totally revised the editor interface, enhanced the accessibility of the settings and actions, refined the writing experience, introduced additional content blocks, and optimised the interaction with newsroom settings, campaigns, user permissions, and team collaboration.

Writing experience

We have contributed to the Slate open repository for years in order to enrich the library we use, and we have made many improvements to our editor behavior, such as shortcuts, great copy-pasting, text alignment, and many new content blocks, in order to keep up with today's editor expectations and far beyond.

WYSIWYG Editor

One of the principal objectives was to get the editor's view as near to the final outcome as possible. To do this, we meticulously refined any potential inconsistencies, resulting in a much cleaner and more enjoyable editing experience, leaving behind the outdated html editor.

Focus mode

We wanted to make the content the star of the show and give users with a focused interface where they could write their stories without interruptions and visual clutter, so we included a calm mode in the new editor design that removes all the settings and options.

Powerful settings

There are a multitude of available configuration options for Prezly stories, ranging from different types of content to picking your newsroom, language, or categories, modifying your sharing options, and visibility or publication date.

Your newsroom, your style

Previously, both design and development at Prezly spent far too much time creating custom newsrooms for customers, and users frequently added CSS to the default themes for deeper customization and nicer aesthetics. This was generating a lot of problems when updating and maintaining the codebase, and it resulted in a highly diverse, and often disastrous, newsroom portfolio, since free-form customization could quickly damage the newsroom layout.

We revamped both the themes and the newsroom settings to deliver both a high degree of customization and beautiful looking defaults to both existing and new customers in order to bring more powers while retaining the highest quality in Prezly newsrooms.

Awesome themes

We redesigned our classic themes and created a wide, customisable, and open-source collection of new ones to provide our clients the convenience to build a great-looking website without ever writing a line of code.

Branding settings

Users can customize their logo, typeface, background and text colors, and theme aesthetics to apply to their newsrooms and campaigns that have included one of their stories, delivering in a consistent, branded, and professional website and email campaigns.

Languages and categories

Premium Prezly customers have the option of adding a categories menu to their header to classify their stories and a language switcher to move between different versions of their site.

Each category may be allocated to all or some languages, and stories can be linked as translations to allow for easy language navigation.

Advanced customization

Customisation options in newsrooms include date format, timezone settings, custom domains, javascript and privacy portal and link, permission-pass campaigns, Segment and Analytics connection, and webhoooks and Newsrooms API for deeper developer integrations.

Revamping campaigns

Campaigns are emails distributed to your Prezly contact list. They can include a single Prezly story to be delivered as an announcement, or numerous Prezly stories to be combined as a newsletter. They can also be plain text and use dynamic fields such as the contact's first name, full name, organization, pronouns, and other information.

The former campaign steps were created in the early days of the startup and had several usability flaws, as well as a long-overdue UI. We spent six months totally revamping the whole flow to give the greatest possible experience for users with a robust and functional UI, adding numerous long-requested features and refinements based on user input and the product roadmap along the way.

New campaign composer

The new campaign composer includes all of the benefits of the story slate editor and content blocks, as well as an email-like interface that our users are familiar with, clear step-by-step navigation, explicit CTAs and tips, the ability to switch between multiple sender addresses, a revamped story picker, and test email features.

Adding contacts

We replicated our contact list grid patterns and added contextual elements to offer a familiar experience in which users can filter, search, add, and remove contacts from existing tags, segments, and even specific contact imports or previously sent campaigns.

Previewing content

Knowing that your email will look good and exactly how you expect it is one of the most important things when sending a campaign, which is why we created the ability to visualize how the email will look for each of your contacts with the dynamic fields in action, as well as the ability to send as many emails as needed to ensure it's good to press send!

Lightspeed creation

Creating a campaign couldn't be easier as all of the app's features are intimately linked, enabling you to embed a story from the story editor, reuse a prior campaign's recipient list, or add contact segments with a single click.

Results and conclusions

We have refined every step of the user journey over time to give the greatest possible experience, basing our product decisions on data and user research. We have learnt from our weakest and strongest qualities to add value and make our customers' jobs simpler, which has resulted in the top Capterra user score of the sector, higher numbers of stories and campaigns published, better trial conversion and overall, very happy clients :)

Have a cool project? Let's work together ☺︎