case study

Designing an award winning app

Skills: Native iOS & Android, Product design, User research & testing, Product ownership

Majority background

About

Plotagon is an app for PC, Mac, iOS and Android that lets you make animated videos from a written script, with no animation experience. You create characters, put them in a scene, write the dialogue and press play. Played back you get an animated film with text-to-speech or your own recorded voice.

Context

I joined Plotagon as a Product Designer and Frontend developer. The company was small and growing fast, and the product was a desktop app aimed primarily at fanfiction. We decided to go after a much wider audience, which meant rebuilding the visual identity, the characters and the branding as well as building the whole thing for mobile.

That was the hard part. The desktop app assumed a big screen, a keyboard and a patient user. On a phone we had none of that, and the two flows that mattered most, writing a script and creating a character, were both the ones that suffered most from a small screen.

The original Plotagon manuscript
The original Plotagon manuscript
The new and improved Plotagon manuscript
The new and improved Plotagon manuscript

My role

I led UI and UX for the first mobile version, and later took over as Product Owner with responsibility for the product as a whole and for how the teams worked together. Having a background in both design and development meant I could design things that were actually buildable, and cut a lot of back-and-forth with the developers.

We deliberately built on Material Design’s interaction model for both iOS and Android rather than following HIG we wanted the app to feel like Plotagon, not like Apple or Google by itself, and put our own look and feel on top of it.

Our Plotagon universe

The character creator

The character creator was one of those functions where we immediately gained a lot of traction and where our users felt motivated to create the perfect character for their story. Unfortunately we also saw a lot of users drop off which led me to spend time on user interviews, both quantitative at trade fairs we visited but also more qualitative with users coming to the office and going through tasks with prototypes. We got the insight that users felt lost and confused in the flow of the character creator. It did not follow any path but the user was given too much freedom and too many options. With that in mind I started designing for a more simple and streamlined character creator with clearer color choices and simpler item filtering. After the release we saw drop-offs fall sharply and retention go up.

The first iteration of the Character creator
The first iteration of the Character creator
The improved and better performing Character creator
The improved and better performing Character creator

My process

I usually started with focus groups, letting users play with prototypes to find where they got stuck before we refined the journey. From there it was wireframes and iteration, then coordinating the developer and animation teams so everyone was working from the same plan. Together with marketing we worked out how to launch each feature, and I took the design all the way into the product, including the app store materials.

The different app views from Plotagon
The different app views from Plotagon

Outcome

We won Red Dot: Best of the Best in 2015, SIIA Innovation Showcase in 2016 and Fast Company Innovation by Design in 2014.

What I took with me from Plotagon was less about the awards. Plotagon was where I learned to kill good ideas and that most of the job is deciding what not to build, and that a feature people love in a demo can still be the thing that makes them give up two screens later. I also learned how much faster a product moves when the design and development teams are actually in the same conversation.