• Jay Liu
Folio Forge >
Iteration 3
  1. Iteration Overview
  2. Establishing Folio Forge's Brand
  3. Notebook Customization
  4. Application Main Screen
  5. Custom Print Instructions
  6. Design Audit of the Previous Iteration

Iteration 3

Associated project: Folio Forge
A major iteration, including the first high-fidelity iteration and the debut implementation into code! The application assumed the new Folio Forge branding, colors, typography, and other visual design.

July 16, 2021

Iteration 3

Iteration Overview


Changes

ChangeIntent
New name, color schemeEstablish Folio Forge’s brand
Landing pageIntroduce Folio Forge’s functionality
Introduce tabbed navigationBetter organization of the application’s functionality
Add templatesLet the user get started quickly
Small tweaks throughoutAccommodate what was feasibly implemented

Inputs informing this iteration

  • Feedback from numerous peer reviews
  • Design audit of the previous iteration

Establishing Folio Forge’s Brand


Mood & Theme

Some themes relevant to branding:

  • homemade
  • self-created
  • the pride of “I made this myself.”

The Name Folio Forge

Using the Lotus Blossom technique , I brainstormed many names, 80% of them terrible.

Using the Lotus Blossom brainstorming technique for coming up with a name
Using the Lotus Blossom brainstorming technique for coming up with a name

LeafForge was the most promising result from the Lotus Blossom exercise, but in the end, I went with Folio Forge because I liked the definition of ‘folio’. It seemed to fit best with the service provided. The “forge” was chosen because of the association with making and the alliteration with Folio.

Lastly, the folioforge.app domain was available, so I snatched it up.

Color

I chose a color palette associated with plants, focusing on greens of the palette because folio has a root meaning of “leaf”.

Typography

I wanted it to look approachable, friendly, and helpful. Thus I chose the rounded geometric sans Quicksand for the typeface.

In earlier iterations, the Folio Forge logo was a leaf.

Past iteration of the branding, with old name and logo.

Past iteration of the branding, with old name and logo.

But to me, it looked too generic and not immediately associated with its ability to create notebooks.

Finally, after some iteration, I came up with the following look:

The logo, as seen from the landing page
The logo, as seen from the landing page

Notebook 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 the size and number of pages. I then adjusted the design to show a gallery of possibilities rather than the fiddlier approach of the previous iteration.

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 a handful of patterns in various “filler paper” and created a minimal set to provide notebook makers. However, as mentioned on the Landing Page, I intend to add more patterns to the collection.

The notebook maker can set the pattern’s color to make the writing or artwork 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 the pattern and color, among many customizations.
The notebook maker can choose the pattern and color, among many customizations.

Application Main Screen


Real-time Feedback

For every customization, I wanted the main screen to provide real-time feedback and allow the maker to preview their work, adhering to the design principle “Visualize the Result.”

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.

Custom Print Instructions


Dialing in the print settings can be a fraught process, where every setting needs to be defined just right, or else the printed output won’t match what the user desires. So, 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.

Design Audit of the Previous Iteration


I annotated the screenshots of v2 with some changes to be made for this iteration:

This is the main working area of the app
This is the main working area of the app
Notebook size selection
Notebook size selection
Page pattern dialog
Page pattern dialog

Next iteration

Iteration 4

This iteration was designed primarily in response to user feedback from about 30 participants.

Iteration 4

Jay Liu
Written by Jay Liu, experience designer.
https://jayliu.design
© 2022, Jay Liu