Builder

A workflow used to construct, edit, and organize presentable content

Usage

A Builder divides the work of creating content into a sequence of steps, which allows the user to focus their attention on each task individually.


Steps

There are 4 common steps used in the Builder pattern. Choose the steps that best fit your desired workflow. Following the steps outlined in this pattern creates a consistent and familiar document creation process for users.

The 4 steps include:

  1. Kickoff
  2. Setup
  3. Data Entry
  4. Generation

For detailed documentation on our Builder steps, view the Builder design specs.

Kickoff (optional)

The first step is the Kickoff. It contains a high-level action to start the workflow. Kickoff can take place within the tool or from an account page.

Consider the following when configuring the Kickoff step:

  • How will the Builder launch?
  • Does the user need to return to a home page to view a previously created project?

Actions

Typically, page-level actions should be placed in the top right corner to start a workflow. Use a table when the user needs to return to a previous project. This is also helpful for downloading, editing, and duplicating projects. If the table is empty, use an empty state in the table.

Kickoff

Actions within a card can be used to place more emphasis on the high-level actions.

Kickoff card

Actions within multiple cards can also be used when there is more than one entry point/path to the kickoff.

Kick off multiple cards

Setup

The Setup is where you can apply project-level settings and manage what content or data will be in the project. A form is typically used for inputting these high-level details such as account, title, and branding.

Setup

Part of the Setup may be to manage sections that will be included in the project. A table should be used when these sections can be reordered and managed individually.

Setup sections

Drag and drop can be a helpful feature to organize data when hierarchy is relevant to the output.

Drag and drop

Data entry

Data entry is where users will most likely spend most of their time. This layout will have the most variety in templates based on the project. In this step, users can input data, organize, and add/edit content.

In a well-designed Builder, users will only see the steps and the information relevant to their situation.

Progress indicator

Use a progress indicator when the user needs the ability to go back and forth within the workflow. Only use a progress indicator if you know exactly how many steps are in the process.

Data entry

Action bar

Use an action bar when the user needs to take ordered steps to finish a workflow. The user is not allowed to skip steps. For more information, see Action bar documentation.

Data entry action bar

Template examples

To give some ideas on how to design this step, below are some examples of data entry templates.

Single-column rich document editor

This example provides the user with a rich text editor experience to build and customize documents from scratch.

Single-column editor

Two-column limited document editor

If multiple designs are available to choose from, this example allows the user to preview their custom email with a preset design.

Two-column editor

Fixed side panel

Use a fixed side panel on the right side when users need to manage selections in the workflow. This also helps to give users easy access to components or tools while still having a work area.

Fixed panel

Generation

The final step in the document/presentation creation process is to generate an output. The user will need an action to begin the Generation step.

Use words similar to download or generate. Although, "generate" should typically be used when the user has to perform an action; or additional steps need to occur before the user receives the output.

Generate actions

Previewing before output

If there is no preview available during the Data entry step, consider implementing a way for the user to preview the final document prior to generating the output.

Full-page preview

Consider a full-page preview after data entry to allow users to go over their changes before generating an output. This preview could happen after data entry and right before generation.

Full-page review

Dialog preview

Preview in a dialog to focus the user's attention on the preview itself and not to distract the user with other options.

Dialog preview

Options for generating output

Providing output options, such as which format to download the final output as, can be beneficial for users.

Form generate

When only a few options are needed to download, use a button dropdown.

Form generate

Loading experience while generating an output

When generating an output, there may be a need for a loading experience. Loading can be shown in various different ways: full page loading, progress bar in a notifier, progress circle in a dialog, etc. When a user will be notified by email upon generation completion, there may be no need for a loading state.

Consider the following when configuring loading:

  • How long will the user wait before an output is generated?
  • Which page or component is the user clicking on an action to produce an output?

Behavior

Exiting and returning

  • Ideally, a user would complete a step flow in a single, uninterrupted session. However, sometimes the user may want (or need) to leave before completing the step flow process.

    • Designers and developers should decide whether or not the progress of an incomplete flow will be saved if exiting before completion.
    • When the user clicks the exit button, a dialog will pop up to alert the user of the consequences for leaving (saving or not saving data) and asking for confirmation of the action.
  • A deep link into a step flow should take the user to the intro screen or if there is no intro, the first step of the flow.

  • The action on the completion screen always saves the user's work.

  • If returning to a saved step flow to edit or review information, you may want to include a text link that allows the user to skip straight to the end, or to the step flow's review page. This link would appear after reaching the end and returning to a previous step or exiting and returning.


Alternative considerations

  • Use Expanders to break long blocks of content into separate sections with independent workflows.
  • Use Tabs to break content into distinct workflows that can be completed independently; or to offer alternative views of the same information.