Project

Folio Forge

A web application for DIY notebook makers

This web application helps people create custom notebook paper easily.

StatusActive
Contributions
  • Product Owner
  • User Research
  • Prototyping
  • Interaction Design
  • Visual Design
  • Branding
  • Community Engagement
  • Development
Duration3 Years in Free Time
TeamSolo Effort

Concept Overview

Folio Forge

Who is it for?

  1. Heavy users of notebooks
  2. 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
  3. 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:

A Notebook Builder: Initial Thoughts

Initial thoughts regarding a web application that helps people customize and print out notebook filler paper at home.

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.

Design Challenges

What makes it hard?
  1. 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.

    Folio Forge: Design Process

    Configuration options

  2. 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.

User Journey

How Folio Forge assists notebook makers along their journey

To see descriptions of these stages in greater detail and the research that led up to this, see the design process:

Folio Forge: Design Process

User workflow and other process details

Design Considerations

  1. 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.

    The optional Template Selection Dialog helps the notebook maker quickly articulate the desired output of the project.
    The optional Template Selection Dialog helps the notebook maker quickly articulate the desired output of the project.

    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.

    Notebook Dialog lets the notebook maker select the notebook form factor that most suits their needs.
    Notebook Dialog lets the notebook maker select the notebook form factor that most suits their needs.

    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.

    The notebook maker can choose pattern and color, among many customizations.
    The notebook maker can choose pattern and color, among many customizations.
  2. Visualize the result

    Real-time Feedback

    I wanted the notebook maker to monitor the effects of customizations, allowing for a tighter iteration loop and freer experimentation.

    The main screen provides a replica of the notebook, allowing them to preview the effects of their settings at all times.
    The main screen provides a replica of the notebook, allowing them to preview the effects of their settings at all times.

    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.

    Print preview helps reduce nasty surprises upon printing.
    Print preview helps reduce nasty surprises upon printing.

    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.

  3. 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.

    Folio Forge tailors print instructions to the notebook maker's customizations. Makers can even print out these instructions separately to serve as a more convenient reference.
    Folio Forge tailors print instructions to the notebook maker's customizations. Makers can even print out these instructions separately to serve as a more convenient reference.
  4. Check out the live Folio Forge app:

    Folio Forge App (Beta) 

    Folio Forge is currently in open beta.

    Or, see the design process and previous iterations behind this app:

    Folio Forge: Design Process

    Previous iterations and design process

Landing Page

Communicating the value

In a parallel effort, I designed a landing page for the app.

Landing page hero
Landing page hero

Branding

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 wanted to show what was possible, as with this example section from the Landing Page.
I wanted to show what was possible, as with this example section from the Landing Page.

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 .

Next Steps

This is still a work in progress. The next steps I’m planning on implementing are

  1. Continue gathering feedback on current designs from notebook makers and other designers.
  2. Continue to make the app beginner-friendly by adding in definitions, instructions, resources, etc..
  3. Build the community by promoting cool projects made with FolioForge.

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