What it takes to make a great publishing app

How we designed and redesigned (and re-redesigned) the FlipSnack content editor

FlipSnack is a digital publishing, browser-based app that helps users create publications that look like flip books. The method is simple:
1. upload a PDF and let our app do the rest
or
2. design your publication page by page yourself directly in app

That part of the app where you design your publication is what we call the content editor.

The content editor was launched just last year, but we started working on it long before. We created it because we knew it was needed: we had many users leave comments telling us they need to edit the content of their publications, to add video, audio or images in their flip books.

Come to think about it, it makes perfect sense to add rich media in publications. A brochure where you can see a video of how a product is used or a catwalk presenting a clothing item isn’t just good, it’s great. A catalog where you can find a product description, but also shop the product, is useful. A magazine that can collect information from readers through forms can be a gold mine.

From our perspective it was also a way to expand the product and make it better.

FlipSnack editor 1.0 and 2.0

One day during a meeting Ann Bob (product manager) told us to forget what we know about FlipSnack and say a few ideas about what it could be. And so it began.

We started a list of ideas of what features should be included, how the editor should look like and slowly we shaped a plan. We took a good look at the competition and realized that no other product from the market had the features that we intended to build. We wanted to allow users to create and delete pages, turn a page into a workspace where anything is possible: add audio, video, texts, images, shopping widgets, forms.

So Version1 took shape:

It was good and we had positive feedback. But we weren’t completely happy about it, so we made some changes.

Version 2 was born:

Again, we weren’t happy.

Dani Andor wasn’t happy. Here at FlipSnack, we don’t stop until we’re 100% content about the outcome. If you see something you don’t like, you get to work and produce a better version.

Version 3

And that’s exactly what Dani did. In his own words:

After the second update of the content editor I wanted a total makeover, not just a facelift. The idea was to make an editor that’s more user friendly, has a better design and would appeal to our users. I had a lot of meetings and talks with Ann and the team because I wanted to know that we were all on the same page, before I turned our ideas into plans.

We decided to expand the editor, to widen the work area and improve the user’s workflow. The following weeks I created mock-up after mock-up, trying and testing ideas, incorporating feedback from the team in my designs, as well as suggestions we had from users for the previous versions. For the final draft we changed the menu position, reorganized and introduced new features, trying to make the creation of flipbooks a faster and easier process.

As you can imagine, weeks of planning and a lot of hard work followed for the entire team.

The coffee consumption grew significantly. Days grew long. Our developers kept working relentlessly, and the code grew long.

The previous version had a lot of unused space inside the editor. We knew that was something that needed fixing, so we created a larger and better looking workspace.

Each item from the content editor has it’s own menu where you can set different properties like the URL of a video or button, the color of an icon, text font and size, and so on. The old menus weren’t very eye-pleasing, so we had to work on that.

Along with the design, some functionality updates occurred as well. The purpose was to make the app more user friendly than it was, so we had that in mind all along. After the last update, images can be replaced easily, just by drag-and-drop. You drag the new image from your library and drop it over an old one to replace it.

We also introduced some keyboard shortcuts like CTRL+C/ CTRL+V to copy+paste elements from one page to another and inserted some tips in app to let our users know about them.

The new editor features new categories of elements, like shapes. It was a common feature request after the content editor v1, and we agree that shapes are important for design.

Another thing we’ve focused on, was providing more layout templates, from simple one page templates to full magazine templates, designed from the front to back cover. Most of our users aren’t designers and our layouts are helping them save a lot of time while creating something that looks good.

Feedback and results

We got a lot of positive feedback from our users, on social media and in-app.

We also noticed a significant improvement in stats: session duration and pages/session improved. The bounce rate went down with 20%. We also noticed an increased number of shares and referrals and we interpreted as a sign of approval from users.

Future improvements

We will not stop here. Our plans for the future are to get rid of all flash elements and make flipsnack fully HTML5 based. A mobile app is also under development, because we know just how important mobile is.

Regarding the content editor, we plan to continue tweaking and improving it. We’ll add more fonts, shapes and image masks soon, improve the functionality for smaller screens and add a few new functions, like an “undo” button.

As we moved through this complex project we learnt a few things:

You have to go through several iterations until you find the right solution for you and for users. It’s just like Andrew Wilkinson said about Slack: We prefer to just put our heads down and design stuff, iterating over and over again until something feels right.

We realized just how important communication and feedback are. Without the cooperation of the entire team we wouldn’t have been able to pull this off. The user community was also involved in the process — we got a few insightful reviews/suggestions that helped us a lot.

Don’t be afraid of challenges, they are good for you. They help you grow as a team, learn new things and grow the confidence of the team.

I’m proud to be a member of the FlipSnack team. I have amazing colleagues who love what they do and I think that really reflects in the product we deliver.

If you’d like to take a look at our editor yourself, please visit flipsnack.com and let us know if you have any comments or suggestions.