A web application for DIY notebook makers
- Product Owner
- User Research
- Interaction Design
- Visual Design
- Community Engagement
Who is it for?
- Heavy users of notebooks
- DIY-ers: Those who would make notebooks rather than buy them, who find enjoyment or interest in making notebooks, or prefer using home equipment and materials
- Customizers: Those who have a particular requirement and are willing to make tweaks to get there
What value does it add?
Make the making of functional notebooks, journals, and sketchbooks easy.
By functional, I mean a book with printed page numbers, which is easier said than done!
Printing numbers onto loose sheets is trivial. But when printing double-sided onto a booklet, determining which number gets printed on which side of which page suddenly becomes a lot of work—work that no one should have to do.
Add to that the complexity of computing page numbers for all the scenarios: portrait, landscape, 1-up, 2-up, etc..
I write more about the target beneficiaries and their domain in this post:
Why in this portfolio?
Because I cannot speak freely about my work projects, I included this project to demonstrate my design process, translating raw use cases and core capabilities into a user interface.
This project provides a good example of designing a user experience based on pre-existing raw tech capability. It started from a personal tool, as you will read in the Design Process.
So many configuration options
The degree of usable customizability is one of the fundamental value propositions to this app.
The question then becomes, How might we afford flexibility in customization, yet not overload notebook makers with details?
Also, How might we provide just enough structure while not being too confining?
There are many ways to turn a bunch of paper into a notebook, and the app needs to account for them: page size, orientation, etc.. What is printed on the page can vary as well: pattern, color, etc..
To get a sense of all the "Configuration Options" available, check out the design process page below.
Lots of printer’s jargon
Democratizing the job of notebook printing will mean that newcomers need to learn just a few new terms, acquire some materials, and practice some techniques.
How might we teach and instill confidence in people who haven’t made their notebook before?
I would consider it a massive win from a product strategy perspective if I can actually grow the user base. These people might not have previously considered making notebooks but would end up getting into it because of how easy and accessible the app has made it become.
How might we invoke the reaction, “Wow, that was so easy”?
Folio Forge will compute page numbering so that a notebook maker can take out the stack of resulting paper from the print tray and start binding immediately. No fiddling around multiple printing passes or rearranging pages into small booklets or other hassles.
To see descriptions of these stages in greater detail and the research that led up to this, see the design process:
Afford High-leverage Customization
Choose a template
With so many permutations of what the notebook maker could configure, it would be helpful if the notebook makers could select the starting point closest to what they wanted to make.
Choose a notebook form factor
With the Notebook Dialog, I previously had the notebook maker dial-in orientation, number of pages per sheet, page size, and page orientation as separate variables. Then I realized the UI could do better at “speaking the language” of notebook makers. For example, I observed people refer to their notebooks on social media and notebook shopping websites regarding size and number of pages. I then adjusted the design to show a gallery of possibilities rather than the more fiddly, previous approach.
Choose the print pattern
I observed several patterns in various “filler paper”, and came up with a minimal set to provide notebook makers. However, as mentioned on the Landing Page, I intend on adding more patterns to the collection.
The notebook maker can set the pattern’s color to allow the writing or artwork to stand out better. For example, I discovered that an artist could draw with black ink against a light blue pattern and then more easily remove it from the scan in Photoshop.
Visualize the result
I wanted the notebook maker to monitor the effects of customizations, allowing for a tighter iteration loop and freer experimentation.
I provide the notebook makers a second level of preview: the print preview, to help reduce the element of surprise, not to mention the frustration of wasting paper.
In a future iteration, I want to provide additional quick ways to get “feedback” on how things will look when printed. For example, print out a sample swatch page to help the notebook maker pick a pattern of choice.
Personalize the Interface at All Levels
Dialing in the print settings can be a fraught process, where every setting needs to be done just right or else the printed output won’t match what the user desires. In the app, I provide customized print instructions to help ensure the success of the notebook maker.
Check out the live Folio Forge app:
Or, see the design process and previous iterations behind this app:
In a parallel effort, I designed a landing page for the app.
I wanted it to look approachable, friendly, and helpful, thus I chose the rounded geometric sans Quicksand for the typeface.
The color palette is heavier on green because folio has a root meaning of “leaf”. In earlier iterations, the Folio Forge logo was a leaf.
I want to eventually add a gallery of notebooks and works created by my community to illustrate what makers can do with this tool. However, since I still am in bootstrapping mode, I’ll have to fill the gallery with my own notebook projects, only 200 times better looking .
This is still a work in progress. The next steps I’m planning on implementing are
- Continue gathering feedback on current designs from notebook makers and other designers.
- Continue to make the app beginner-friendly by adding in definitions, instructions, resources, etc..
- Build the community by promoting cool projects made with FolioForge.