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

Task

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.

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 Breakdown

The agreement creation and editing experience for DocuSign users was disjointed and redundant.

Specific Goal

Consolidate these tools and streamline the process of creating agreements, editing, and managing templates.

Project Timeline

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)

Key Takeaway:

Being able to do all these jobs within a single tool would be a major value add for our 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.

Usability Testing

  • Adding Fields

    Task: Insert a new field using button or key command.

    Outcome: Users strongly preferred using a clickable button as opposed to the key command option that was 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

    Task: Identify the ‘Outline’ functionality of a document, use it to navigate to a specific line of the document, and 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.

    Outcome: 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

    Task: Explore template management capabilities and edit an agreement workflow.

    Outcome: 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.

Adding Fields: Before

Hidden ‘+’ icon, distracting right rail.

Adding Fields: After

Animated pulsing ‘+’ icon with callout for improved visibility.

Control Bar: Before Options

Right rail navigation, pop-out menu with more detailed controls, outline and formatting tools both included in control bar.

Bottom bar navigation, sliding drawer menu with more detailed controls. Bottom bar replaced with formatting upon highlight.

Control Bar: After

Right rail design with inline editing bar for streamlined text editing.

Template Management: Before

Generational rule overview in drawer menu and rule editing in modal.

Template Management: After

Rule editing functionality all kept within drawer menu for less disruptive display. More descriptive options and icons for added clarity.

faster to correctly identify and click to insert field button

6 sec

Updates to control bar with inline editing allowed users to complete task

22 sec faster

Validation Testing Results

of participants were successfully able to edit generation rule in Manage

100%

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.