• Jay Liu
Folio Forge >
Iteration 4
  1. Iteration Overview
  2. New Navigation
  3. In-Context Help
  4. Title Page
  5. New Notebook Preview
  6. Retrospective

Iteration 4

Associated project: Folio Forge
This iteration was designed primarily in response to user feedback from about 30 participants.

September 10, 2022

Iteration 4

Iteration Overview


Changes

ChangeIntent
New navigationMake features more discoverable.
Add in-context help dialogsMake the interface more accessible for new bookbinders (Nikki).
New Feature: title pageBuild out an expected feature, implemented relatively easily.
Book navigationMake navigation of the book less cumbersome and less glitchy.

Inputs informing this iteration

  • 3 peer reviews
  • ~30 graduate students working in groups tested the app and wrote usability reports, graciously introduced through a colleague who taught user experience design at her local university. They provided the rawest of feedback, for which I was very grateful.

New Navigation


For greater feature discoverability

About half of the notes received from the usability reports centered around the discoverability of features. Participants did not easily find things such as changing the number of pages or setting the pattern.

Before

Before, tabs were identified by icon only, making feature discovery difficult.
Before, tabs were identified by icon only, making feature discovery difficult.

After

After: Folio Forge “feeds forward” more cues about tab contents, including a visual of the primary setting in each tab as the user hovers over it.

After: Folio Forge “feeds forward” more cues about tab contents, including a visual of the primary setting in each tab as the user hovers over it.

Instead of solely relying on hovering over icons to know what each tab is, the new iteration “feeds forward” with much more information:

  1. Title of the tab
  2. A summary of the settings
  3. A visual of the settings

Reorganization

Additionally, I reorganized the controls to fit within fewer tabs.

sidebar variations

In-Context Help


Addressing participant confusion about terms and features

In the usability studies, participants were confused at certain terms such as flyleaf, signature binding, page turn direction, etc.

To that, I added two help dialogs:

Binding Options

New binding options help dialog arrange the binding options from simple to complex and point to tutorials to find more information.

New binding options help dialog arrange the binding options from simple to complex and point to tutorials to find more information.

The new binding options guidance dialog
The new binding options guidance dialog

Flyleaf

Flyleaf is among many of the settings behind an unfamiliar term. The dialog helps visualize what the choices mean.

Flyleaf is among many of the settings behind an unfamiliar term. The dialog helps visualize what the choices mean.

The new flyleaf guidance dialog
The new flyleaf guidance dialog

Microinteraction: More Streamlined Decision Support

As you see with the .gifs above, the pattern to be followed in these dialogs is that they are enlarged selectors. In other words, the user can make a selection after using the guidance, and the selection will propagate to the main app once they close the dialog.

Title Page


Including a title page was often requested in peer as well as participant feedback. I hypothesize that users will expect this feature given how common it’s found in manufactured notebooks. Additionally, it should be easy to implement. Therefore, I added it to this design iteration.

Users can add basic elements of a title page and preview the results.
Users can add basic elements of a title page and preview the results.

New Notebook Preview


The previous iteration used the standard page navigation control seen in PDF viewers: you type in a page to jump to and can arrow back and forth.

Not only was this strangely tricky to implement, but I also didn’t think navigating to arbitrary pages benefitted the user since all pages are identical.

Before: Navigate to any spread using arrows and a slider, like an e-reader or PDF viewer.
Before: Navigate to any spread using arrows and a slider, like an e-reader or PDF viewer.
After: Navigate only to key spreads, omitting duplicates
After: Navigate only to key spreads, omitting duplicates

Retrospective


I realized the number of new terms that Nikki, the new bookbinder, will encounter is high enough that I should add a design principle to the list:

New Design Principle

Visualize the options available to makers and guide them through their decision.


Previous iteration

Iteration 3

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.

Iteration 3

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