Conducting research and synthesizing results to uncover painpoints and needs

In what context do creatives prefer working on a mobile device over their computer? How do they work on mobile? How do they use presentations? What problems do they have with this while using mobile devices?

To find answers, I conducted 14 interviews with all types of people from the target audience (ranging from designers to engineers and people from sales to marketing), observed people who were doing work on their mobile devices, and learned a lot from in-depth desk-research like looking into competitors, other creative mobile tools, research papers about mobile-first productivity tools and all the quantitative data Paste is tracking.

By synthesizing all the results using different models, I was able to discover our target audience's values and learn about their problems with communicating their ideas, stories, and visions using presentations when they're away from their desks or don't have a computer at hand.

The current state as a starting point

The creative is in more and more places where a computer isn’t the right device to get work done easily. They crave flexibility to be able to work wherever and whenever they want. In these cases, mobile devices offer more flexibility.

However, there’s a creative tension that limits the craved flexibility of these creatives. Working with presentations, an important part of their job for communication, and aligning their team on goals feels impossible to do on mobile devices with tools like Microsoft PowerPoint, Google Slides, and Apple Keynote.

1: A lack of focus

The way tools are structured in these apps clutter the UI and make them hard to use. User can't get in a flow while focusing on thinking their ideas through.

2: A lack of context

Slides are mostly landscape, phones are mostly used in portrait, so slides are showed as a scaled-down version of the result. Using pinch-to-zoom makes people lose context of the slide.

3: A lack of input-precision

Elements on the canvas can be placed wherever users want. Using a mouse on a computer this is fine, but fingers are too error-prone to position or scale elements in the canvas.

Cross-disciplinary ideation session

I ran an remote ideation session based on my research-results with the help of a cross-disciplinary team to create first conceptual solutions. Being remote, it was harder to start with group-thinking, so we started out brainstorming different solutions on our own, combining the ideas of the group later on and building onto these ideas together using Miro.

Solutions went from having working templates and using a mobile device purely as a CMS, to building a sort of layer-system, building a breakpoint-editor, writing Markdown and seeing results take form in a sort of preview window we all used back in the Photoshop days.

Creating Design Guidelines to make decision-making easier

To benchmark the quality of the ideas, I wrote a set of Design Criteria, based on the method by IDEO. They described the most important elements of the solution and gave a direction of what needed to be created. Later on, in the design process, they helped me to make tough decisions quicker and better substantiated.

1: Get in a flow

We help you to focus on what you're trying to achieve, be it working on the content of your slide or the look of your presentation.

2: Work with confidence

We give you the self-confidence that you can work on your presentations on mobile devices the way you envisioned them without having to make sacrifices.

3: Have great looking slides on all your devices

We automatically handle the hard part of creating a good looking deck on any device so you can focus on what really matters.

4: Have the right amount of power

We let you create, shape and share your ideas with an approachable yet powerful toolset that is designed specifically for mobile.

5: Stay in control over how your ideas look

We handle some heavy lifting for you but still give you control over what you are creating and will be presenting.

Prototyping mental models of possible solutions

Based on the results of the concepting session and the Design Guidelines, I worked on several high-level prototypes using simple elements and wrote short write-ups of the solutions to think them through. By making the prototypes interactive, how simple they still were, I could quickly test the ideas out by putting them in the hand of the creatives.

The directions included a basic version of separating the content and the look, using responsive templates, and context-aware tools:

Testing the first explorations

To learn to what extent these directions could solve the problem, I went over the prototypes with various users using Lookback. I learned that the directions weren't solutions on their own, but combined they could really solve the problem.

Iteratively prototyping and testing the core components to explore and understand solutions

Based on the test results, I iterated on the mobile editor. This brought up a set of interesting problems with creating an understandable model for taking landscape slides to a portait oriented device and making it possible to use a clear way of editing the slides, like on desktop.

I stripped the UI and tried to tackle all the problems, starting from the core of the application, working inside out. In various iterations, I translated desktop layouts (landscape orientation) to mobile layouts (portrait orientation), figured out how asset-scaling and layout-directions within the portrait editor worked, and built up a mobile-first editor piece by piece, iteration after iteration.

These decisions however brought up new problems: I forced users into rotating their device whenever they wanted to change the size or direction of their asset(s). While testing this flow, I learned that nobody was actually bothered by rotating their device. Users actually felt like it could really help them switch to a different part of communicating their idea. However, the way I designed this with choosing a layout in portrait and changing the positions of items within the layout or resizing assets in landscape was the source for a lot of confusion about how the application worked: what was done in what device orientation?

Separation of concerns: the working model

The new iteration contained a focused content-editor that is leveraging patterns from commonly used simple text-editing apps that stimulate focus on writing and editing, and make it easy to add assets in the flow of the ‘document’.

When switching to Layout, the prototype gave users the possibility to work on their deck the way they’re sharing or presenting it: in a landscape orientation. Using controls that work similar to the web but are optimized for mobile, backed-up by the Paste layout-engine, users can create great-looking slides with just a few taps.

Testing and analysing the separation of concerns model

Using a set of tasks that simulated real-life scenarios of working on presentations, I remotely tested the prototype using Lookback and learned how confident the creatives were in their ability to create good looking slides they could present or share, and how the application gave them the focus to do this only using their phone.

Sorting all recurring the insights on magnitude gave me an overview of what to focus on next, like visually explaining the mode-switching better, adding missing features in the content-editor, and fixing issues when adding multiple assets in the editor.

The result: a mobile-first presentation app that helps creatives to create, shape, and share ideas

Based on extensive research and user-tests, my prototype solved the overall problem stated at the beginning of the project.

Whether it's still a first idea or a thought-through story, the "separation of concerns" of Content and Layout mode gave creatives focus, whether they're envisioning what the brilliant idea is or carefully shaping how they're going to visually share it in the way it would be shared the best.

Because of the ease of use, the large slide-canvas that shows how their slide looks like, and simple but powerful tools backed-up by the Paste layout-system, creatives can feel confident to create slides only using their mobile device.

And just as on desktop, it now also helps them on mobile to look good, get people aligned, and maybe even be the start of big change in the world.

Wrapping up

Graduating in The Netherlands

The goal of graduating from my university was for me to show that I'm capable of solving user-centered design problems on my own. The university challenged me to go through a complete product design process, consisting out of research, ideation, strategic concepting, and iterative prototyping on my own. The end result had to be a thoroughly tested conceptual direction or vision on a problem or question of the company I was graduating. I graduated cum-laude and with a 10/10 🎊🎉

Proces

The proces as written about above, was one of my earliest tries to work on such a difficult design problem from start to finish. With my current experience, I probably would’ve pushed the mental model for the editor even further.

Outcomes of the project for WeTransfer

Because of the saturated market with tools like Pitch, Tome and others, WeTransfer isn’t focussing on the mobile proposition of Paste as we speak, but upgrading Transfer experiences with their tool Portals.

Credits

Whether it was by guiding or inspiring me, brainstorming, testing prototypes, or helping me out in any other way; thanks to Stijn, KJ, Grant, Georgg, Joel, Manpreet, Liam, Nathan, Aidan, Allen, Hélène, Faye, Ruta, Sjoerd, Casper, Esther, Pepijn, Oliver, Louwrens, Rick, Bas, Celine, Isabella, Bruce, Corné, Arend, Daniël, Syara, Elwin & Kayleigh for helping out during the project.