Agreement Creator

Agreement Creator

Agreement Creator Vision Project

North star vision project aimed at consolidating agreement creation and agreement management processes across all DocuSign products.

At a Glance

My Role

UX/UI Designer (4 person design team).

Collaborated with research team to gather insights for design iterations.

Key Deliverables

3 design prototypes for concept testing in usability testing sessions, finalized prototype at the end of the project.

Problem

Create a streamlined process that lowers barriers to entry of agreement creation, improves ease of use in agreement editing, and simplifies agreement management for DocuSign customers.

These insights helped to inform our design work by ensuring that we create a simplified template creation and management process, prioritizing automation and collaboration.

Key takeaway: being able to do all these jobs within a single tool would be a major value add for our customers.

Generative Research

Our research team conducted interviews with 18 participants across different industries in order to validate and refine our understanding of users’ mental model surrounding agreement templates. Key findings detailed below.

Main jobs related to templating:

  1. Building templates for an organization

  2. Using templates for sending out agreements

  3. Managing/updating templates

Order of operations:

  1. Need Identification

  2. Finding Template

  3. Editing Template

  4. Review & Sign

  5. Save & Group Templates (occurs continuously throughout the process)

Usability Testing

  • Adding Fields

    When testing users’ ability to add fields in an empty state, we found they strongly preferred using a clickable button as opposed to the key command option we also offered. Additionally, the right rail with additional document controls proved to be distracting.

    Design Impact:

    Stronger emphasis on the ‘+’ CTA that users struggled to identify, and future design explorations with a more condensed right rail design.

  • Bottom Bar vs. Right Rail

    In the second round of testing, we had users identify the ‘Outline’ functionality of a document, and use it to navigate to a specific line of the document. From there, they had to reformat the text. Users in test group A had a bottom bar for this task, while users in test group B had a right rail. Group B was quicker to identify Outline, but group A was quicker to accomplish the formatting task.

    Design Impact:

    Design team was able to identify the winning combination of right rail design with streamlined editing capabilities.

  • Template Management

    In the third round of research, users explored template management capabilities and were tasked with editing an agreement workflow. Users struggled to understand where to edit, as well as certain icons and controls.

    Design Impact:

    Added clarifying language around ‘Edit’ in the overflow menu, made the template names clickable to open and preview, and removed any confusing or misleading icons.

Design Outcomes

  • Updated insert elements display. Emphasized blue + that appears automatically on page load with pulsing animation to draw attention.

  • Updated menu, organized by category. Users can search fields and add properties after adding the field to the document.

  • Adding field properties.

  • Right rail navigation with inline formatting capabilities.

Mini Prototypes

Template creators add necessary fields from menu options. This example shows a user adding a number field to their template designating max number of attendees for a catering event.

Various starting point options, including creating a template from scratch, uploading a document, or exploring DocuSign’s template library.

Users can view and manage their agreement templates on this screen. This user is shown viewing version history and document generation rules for an agreement.