User Journey
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 notebook | 2. Set up paper | 3. Print | 4. Assemble | |
|---|---|---|---|---|
| Goals | Establish basic or external “specs” of a notebook | Establish internal look of the paper | Produce all pages (text block) | Put raw materials together into final notebook |
| Tasks or User Stories |
|
|
|
|
| How Folio Forge Helps | Get 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 .
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?