• Contents [Top]
  • Starting Point
  • Eating My Own Dog Food
  • User Journey
  • Design Principles
  • First Iteration
  • Second Iteration
  • Branding
  • Community Engagement
  • What to check out next
  • See associated project: Folio Forge

Design Process

Associated project: Folio Forge

The gory details of the making of Folio Forge.

June 04, 2021

Starting Point

Starting from early in the process, I had implemented an “engineering UI” built with Storybook JS . This would embody all the core functionality and expose all the parameters. This allowed me to begin prototyping and to experiment with customizing notebooks for my personal daily use and insight.

Eating My Own Dog Food

Research Method

    Using the “engineering UI”, I ran some experiments to observe the process of creating a notebook with an everyday printer and paper. The iterations I went through (below) helped me understand 1) the more important things about making notebooks and 2) how to down-scope my list of feature ideas to a critical set.

    This article documents my findings and shows the latest iteration.

  • Notebook Version 1

    1st generation notebook

    The first notebook resulted from just settling into the idea of actually binding my own sketchbook and my first try at Coptic stitch.

    As you can see, page numbers were an afterthought. I’m also using plain paper, with no printed pattern.

  • Notebook Version 2

    2nd generation notebook

    The next iteration featured a print pattern I re-created after a sketch notebook I liked. Unfortunately, it turned out to be non-trivial and involve a lot of dirty coding practices.

    Printing the page numbers was still to be implemented.

  • Notebook Version 3

    3rd generation notebook

    At this point, the notebook maker can grab a stack of paper from the printer and immediately begin cutting them or folding them into the signatures .

    I also discover the importance of having flyleaves . But this further complicates the algorithm for calculating page numbers!

  • Notebook Version 4 (Current)

    4th generation notebook (current)

    The current iteration comes after exploring cleaner layouts and styling, mimicking the high-end notebooks I observed. Also, I begin experimenting with different patterns and pattern colors.

User Journey

Synthesis

    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
    User GoalEstablish basic or external “specs” of a notebookEstablish internal look of the paperProduce all pages (text block)Put raw materials together into final notebook
    User Tasks
    • 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 from 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:

  1. Set up notebook

  2. Set up paper

  3. Print

  4. Assemble

Design Principles

Synthesis

Enable Customization

The degree of usable customizability is one of the fundamental value propositions to this app.

One implication of this level of customization is that we’ll need to deliver customized instructions depending on their browser and printer capabilities.

Help the user visualize

The design should help visualize the consequence of the user’s selections to help them maintain the vision of the result. In addition, the design should give the user immediate feedback after she makes a choice, such as when selecting a page orientation or the color of the print pattern.

First Iteration

Design

    The first iteration explored layout, providing easy access to controls and helping the user maintain sight of the result of adjusting the controls.

    One idea was to let the user define several sections within a single notebook, each having a different pattern. I had thought it might be interesting to offer this as a distinguishing capability since I didn’t see anyone else offering this level of customizability.

    Spoiler alert: It wasn’t until I made a notebook with different types of filler that I realized it was a bad idea. See the second iteration for details.

  1. Choosing notebook size and orientation

    In this design iteration, I tried to focus on allowing for "direct manipulation" of the notebook. Controls for notebook size, orientation are shown very close to the notebook. You'll see a different approach I took in the next iteration.
    In this design iteration, I tried to focus on allowing for "direct manipulation" of the notebook. Controls for notebook size, orientation are shown very close to the notebook. You'll see a different approach I took in the next iteration.
  2. Section Settings

    Oops! Trying to design a mechanism for specifying one pattern per section of the notebook was an unnecessary complication. I later abandoned this approach for something simpler and closer to the core concept.
    Oops! Trying to design a mechanism for specifying one pattern per section of the notebook was an unnecessary complication. I later abandoned this approach for something simpler and closer to the core concept.
  3. print preview

Second Iteration

Design

    I abandoned the last iteration because it overly focused on adding sections to a notebook, which I discovered should not have been in the core set of features.

    With the wrong feature out of the way, I could focus more on the design’s core. As a result, the second iteration felt more resonant with what the app needed to be.

    One of the breakthroughs for this iteration was realizing just how visual the selection process could (and should) be. Again, this is related to the principle of favoring “recognition” over “recall.”

    Iteration 1Iteration 2
    Approach

    Letting the user fiddle around with settings.

    Be sure to let the user see the result from changing settings and tweak it until they are satisfied.

    The gallery approach lets the user look through the number of possibilities and pick the best one.
    ResultToo fiddlyFelt much better *

    Lesson learned #1: Having the wrong feature considered as the core functionality is costly! Luckily, not as costly as coding up the wrong feature.

    Lesson learned #2: If no one is doing a particular thing, there could be an excellent reason not to be ignored.


  1. Notebook Settings

    Main screen

    The new main screen takes on a different approach to organizing the controls than Iteration 1. You'll also see many new features added from insight through "dogfooding", such as an option to print page numbers and showing the number of required printer sheets
    The new main screen takes on a different approach to organizing the controls than Iteration 1. You'll also see many new features added from insight through "dogfooding", such as an option to print page numbers and showing the number of required printer sheets
    notebook builder camera

    Choosing notebook size and orientation

    This gallery approach with a filter seemed to be more usable because recognition is cognitively easier than recall.
    This gallery approach with a filter seemed to be more usable because recognition is cognitively easier than recall.
    Animated walkthrough: Choosing notebook size and orientation
  2. Page Settings

    Choosing a print pattern

    This dialog reuses the same pattern as the notebook size dialog, such as the filtering mechanism and the toggling of different color options, so the user has less to learn. It also includes an ability to print a sample swatch of all the patterns, to help the user decide which is most suitable for their situation.
    This dialog reuses the same pattern as the notebook size dialog, such as the filtering mechanism and the toggling of different color options, so the user has less to learn. It also includes an ability to print a sample swatch of all the patterns, to help the user decide which is most suitable for their situation.
    Animated walkthrough: Choosing a print pattern
  3. print preview camera

    Compared to the previous iteration, I added more fidelity to which types of help to give the user. I also hint at the ability to “Print Detailed Instructions”, and “Print a Test Run”, which seemed they would be valuable from my “dogfooding”. Still a way to go, however. Without user testing, it will be difficult to predict where people get stuck battling with printer issues.

What to check out next

Folio Forge is currently in open beta. Check it out now at FolioForge.app .

Or go back to the project main page for the latest design iteration.


Jay Liu
Written by Jay Liu, interaction designer.
https://jayliu.design
© 2021, Jay Liu