Document Transformation

*Press F to view this microapp in full screen.
In this lesson
  1. What is document transformation?
  2. Selecting a document
  3. Creating an outline
  4. Designing your user experience
  5. Make it immersive

Intro: What is document transformation?

While linear documents, like Powerpoints or PDFs, give users a prescribed path through content, microapps provide opportunities for users to choose their own adventure in a much more interactive way. This gives you more opportunity to connect and pique your users’ interest with rich media and other interactive elements.

Goals for document transformation:

  • UX mindset -- easier for users to find the info they need, more enjoyable/easier for them to pay attention, easier to use for however it will be used (presentation, resource, marketing, etc). Identify:
  • Navigation - Primary narrative vs secondary. / Chapters
  • Areas to dive deeper
  • Areas to add Visual interest

When thinking about transforming a document into a microapp, we recommend starting with a piece of content you already use and know well. Identify a PDF or presentation that could benefit from more user engagement — some items that work well are pitch decks, training decks, product demos and overviews, or customer or employee onboarding.

Creating an outline

First, identify three key objectives for your content:

  • Who is the audience for this content? (for example, employees, existing customers, or new prospects).
  • How will they receive the content (ex: sent via email, shared on social media, in a face-to-face presentation, on an ipad at a conference)
  • What is the goal of this content? (ie: sign up for a demo, fill out a survey, watch a video, accept a proposal)
  • Is there a specific action or objective I want to promote?

Knowing these will help you make decisions as you outline a structure for your microapp. Next, find the natural structure in a powerpoint or PDF. Many documents already have some form of outline, agenda, or chapters they follow that you can use to organize your microapp. If not, try breaking your content into topical sections.

Once you’ve created an outline, use this structure to outline your content in sketches, docs, or a flow chart. The sections in your outline can correspond with sections in your navigation. These sections can be one page for simpler documents, or you can create sub-sections to have multiple pages per section in longer or more complex documents.

Designing your user experience

As you start to break your outline into pages, you can create a wireframe, or a rough sketch that will help you plan out page layouts, content, and how you’ll navigate through your microapp. At this point, you might want to take a look at our template library and see if any templates will be a good fit for your content outline.

When designing your microapp, think about how your layout can facilitate pathways through your content. Remember, microapps are more like apps or websites than documents or presentations. Users can explore the document in non-linear ways with whatever navigation you choose to give them. We suggest always having a consistent navigation on each page that links to all sections, your cover, and your call to action. Your CTA button should direct users toward the goal of your document, whether that’s a form, a proposal, or something else.

Also think about navigation within your pages — buttons to open and close overlays, tabs between states, and interactive sub-sections all make your experience more interactive and add more organization to your microapp so you user knows where to look for the content they need. Put yourself in your users’ shoes and try to make their experience as easy as possible.

Once you’ve got your navigation mapped out, start thinking about pages. You may want to stick to 1-2 consistent page layouts so most of your content is consistently located. Try to create visual hierarchies in your content to emphasize the things most important to your viewers. By creating a “first read” of your page with prioritized content for your users, you can establish suggested journeys and lead their attention to what matters. The easiest way to establish this hierarchy is by adding contrast to the elements you’ve prioritized. Size, color, spacing, and motion can all be utilized to make these items stand out on your page.

Make it immersive

As you lay out your content, be sure to leave room for rich media that will make your document experience more immersive. Think about creating visual callouts to highlight important information. What parts of your content are suited to adding multimedia, like galleries or videos? How can you bring in more of your brand? Can you display content in a way that makes it more interesting to go through? Use these questions to choose areas to highlight with features like videos, gifs, galleries, and scrolls.

Also consider incorporating other digital tools that relate to your content. For instance, you can embed surveys, forms, downloads, or docs that support your material and keep your employees organized. Optimize the experience by keeping all these tools in one place vs. multiple disconnected locations.

Use your wireframe to plan out how these details will fit into your microapp. Once you’ve got an idea for how you want to lay out your experience, you’re ready to move on to designing and building your microapp.