Design Process
Associated project: 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
Notebook Version 1
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
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
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)
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.
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.
User Journey
- 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
- Fold or cut pages
- Bind text block
- Cover decoration, etc
Set up notebook
Set up paper
Print
Assemble
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 | |
|---|---|---|---|---|
| User Goal | 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 |
| User Tasks | ||||
| How Folio Forge Helps | Get 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:
Design Principles
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
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. 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. Print Preview
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.
Second Iteration
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 
Choosing notebook size and orientation
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
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. Animated walkthrough: Choosing a print pattern
Print Preview
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.
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 1 | Iteration 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. |
| Result | Too fiddly | Felt 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.
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.