• Jay Liu
Folio Forge >
User Journey
  1. Journey Overview
  2. Set up Notebook
  3. Set up Paper
  4. Print
  5. Assemble

User Journey

Associated project: Folio Forge
The journey of someone making their own notebook

July 03, 2021

Journey Overview


I synthesized my observations during dogfooding and researched how notebooks are described in the marketplace. The following workflow is what I came up with:

1. Set up notebook2. Set up paper3. Print4. Assemble
GoalsEstablish basic or external “specs” of a notebookEstablish internal look of the paperProduce all pages (text block)Put raw materials together into final notebook
Tasks or User Stories
  • Choose notebook size
  • Choose notebook binding and orientation
  • Choose source paper size
  • Choose pattern
  • Choose pattern color
  • Decide page number setting
  • Preview in browser
  • Set up browser
  • Print Test Sample
  • Print
  • Fold or cut pages
  • Bind text block
  • Cover decoration, etc
How Folio Forge HelpsGet started quickly and easily with a template or choose a notebook based on paper size.Show live preview at all times.Print previews and test prints to help print with confidence.Page numbers are pre-arranged to minimize manual labor.

Below are the same workflow stages in more detail:

Set up Notebook


This phase includes setting the same “specs” used to describe notebooks at a high level: how large it is and how many pages. In the user’s experience, these factors will affect how the notebook is carried around or stored. The system should also consider the materials and techniques the notebook maker will have at their disposal.

Design Challenge: The user is likely to be at risk of parameter confusion, specifying which gets fiddly very quickly. The notebook itself can have a certain size and be either portrait or landscape. Additionally, the paper used can have its own orientation when it’s printed. On top of that, the paper could be cut or folded in half! Differentiating the size and orientation of the notebook from that of the source paper is likely to be confusing.

Sources of Inspiration

  • Observing several Bullet Journal Facebook group members ask each other for notebook recommendations and talk about their beloved notebooks. Also, many journalers had their “go-to” sizes that they stuck with.
  • I found the same information being presented (size, number of pages) while looking through various notebook manufacturers’ websites.
  • Having a notebook in a certain unusual shape or page-flip orientation can be highlighted as part of its marketing, such as this Kraft Writersblok Keyboard Notebook , which can sit on a desk alongside a keyboard.

Set up Paper


The print pattern depends heavily on the intended use and impacts the user experience, whether the writing, sketching, or drawing.

Design Challenge: Providing the user just enough structure while not being too confining.

Sources of Inspiration

  • The dot grid pitch of various notebook manufacturers
  • Various patterns of paper on the Internet that focus on creative endeavors: writing, bullet-journalling, and planning (ruled, dot grid), sketching interfaces (2D design grid), isometric drawing (isometric grid), other sketches (blank). I also put in a graph pattern for good measure.
  • A red-colored print pattern is highlighted in Leuchtturm1917’s marketing of a special edition notebook .
  • For artists wanting to digitize their ink sketches, having the color of an underlying print pattern be distinct from the color of pen ink (for example, black ink on a cyan-colored grid) can help with its digital removal after scanning .

Print


This step involves previewing the final result digitally before committing physical resources.

Design Challenge: As (too) many know, translation from pixels to print is imperfect. How might we allow the user to try before committing to allocate print resources?

Additionally, the user has to set up their browser just right to produce the result. How might we improve that experience and allow them to get it right with minimal tries? How might we enable a good experience across many browsers, operating systems, and printers?

Assemble


This step of the workflow is entirely within the physical world, and as such, is not within the immediate scope of the web application. However, I’ve included it here because it still has implications for the design.

Design Challenge: Specifically, how might we expeditiously transition the user beyond the digital to focus on the assembly process?


Jay Liu
Written by Jay Liu, experience designer.
https://jayliu.design
© 2022, Jay Liu