Background
The agreement creation and editing experience for DocuSign users was disjointed and redundant. In order to create, edit, and manage templates for their organization, users were having to manually stitch together different processes using a multitude of tools, some of them antiquated DocuSign products. Common scenarios might include, B2B sales, B2C agreements, and HR paperwork processes.
Task
Consolidate these tools and streamline the process of creating agreements, editing, and managing templates. Create a process that lowers barriers to entry of agreement creation, improves ease of use in agreement editing, and simplifies agreement management for DocuSign customers.
Proposed Metrics
Increase # of Envelopes generated via Templates
Increase % of successfully completed Envelopes via Templates
Reduce average Template creation time
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.
Design & Prototyping
First pass designs with interactive prototypes created for user testing.
User Testing & Iterative Design
Usability testing on design concepts with users and corresponding design changes.
Validation Testing & Handoff
Conducted abridged version of user testing to validate findings and design changes. Prepared final prototypes for leadership handoff and presentation.
Main Jobs Related to Templating:
Building templates for an organization
Using templates for sending agreements
Managing & updating templates
Current Pain Points:
Manual process
Keeping track of templates
Collaborative edit and get stakeholders to sign off on edits
Users were tasked with inserting a field onto an empty state template. They can accomplish this by either clicking the '+' icon, or using the '/' command on their keyboard.
Before
Users strongly preferred using a clickable button to the key command option. Additionally, the right rail with additional document controls proved to be distracting. Participants did not feel immediately drawn to the '+' icon on the left of the screen.
After
Animated pulsing '+' icon to draw users' attention to the insert fields option. The animation and callout will be shown in the empty state and to first time users editing a template, but the callout can be dismissed. Even though most users didn't prefer the key command option, I did opt to keep it for accessibility reasons and make it more visible in the callout.
A/B testing was done to explore two different variations of the control bar. Users were tasked using the control bar to navigate to a line of text on a document, and then use formatting tools to underline that line of text.
After
Combination of the two designs. The finalized design features the right rail navigation from Option 1 with the formatting icon removed, and an inline formatting bar for text editing that appears upon highlighting a line of text, making the formatting bar was more obvious, offering users more control, and allowing them to edit more directly.
Template management dashboard for storing, editing, and managing agreement workflows. Users were tasked with editing a generation rule, meaning that a certain document is only generated in the agreement if certain conditions are met.
Before
While most users were able to complete the task, they struggled to understand the meaning of 'Edit' in the overflow menu and didn't feel it was descriptive enough to help guide them in the task. They also expressed confusion over the workflow icon next to the template name.
After
In the updated design, the dashboard shows a simple check mark to indicate whether each template has a workflow enabled or not, and the overflow menu was updated with more specific language and associated icons for clarity.
Improved Discoverability
Users were 6 seconds faster to identify and click insert field button.
Increased Efficiency
Users were 20 seconds faster to complete underlining task with inline editor bar.
Higher Success Rate
100% of users were able to successfully edit a generation rule.
Template Marketplace
Users can explore recommended templates based on their needs.
Dynamic Fields
Users can apply conditional logic to fields, allowing more flexibility over template creation and editing.
Manage Dashboard
Allows users to store all templates for their organization in one place and create workflows.
Rapid timeline
Would have ideally liked to do more formal validation testing and design iterations.
No engineering involvement
This was a north star research and design project, so would need more engineering feedback and collaboration to determine feasibility of solutions.
Accessibility
Looking back, I think some features or functions are a bit too hidden, specifically the fact that users need to click out of the field input to save it. I would also do further explorations on the dynamic inline formatting bar to make sure it was discoverable.
Design alignment
Process was somewhat siloed working on different features. Design process could have been more collaborative.