Diana Alayon

Anima App Tutorial

The task

Anima is the company that turns design prototypes into code. I was asked to create a web-based tutorial for their app users, explaining how to create responsive websites with Sketch and Anima.

Image by Anima, https://www.animaapp.com/

Image by Anima, https://www.animaapp.com/

 

The audience

Designers of different levels of expertise, using prototyping tools to deliver high-fidelity prototypes.

 

The approach

Before I started writing, I created a draft or skeleton of the article. By defining the sections with general but meaningful headings, I knew what I needed to write.

First page of the article draft

First page of the article draft

Second page of the article draft

Second page of the article draft

 

The result, a consistent article.

With the attempt to guide users step by step on how to prototype a responsive website, using both Anima, and Sketch tools, I’ve delivered an article. Direct communication was a must, given the use case of designers working with these tools, trying to figure out how to do things within the app while producing artifacts. 

I’ve created a content pattern that is consistent, useful, and predictable, facilitating the users to find the information they need:

draft-background-1 (13).png
 

Getting familiar with the brand voice while finding the right tone

When I took on this task, there was no a style-guide in place. I had access to some of the internal tutorials developed by Anima’s team, and resources to familiarize myself with the product, and their users.

I perceived the brand voice as causal but knowledgeable. I also found opportunities to improve the way tutorials were written, structuring the sentences in a way that requires less effort from the reader to understand what to do next:

draft-background-1 (9).png
draft-background-1 (11).png
draft-background-1 (12).png