Designing a E-signature Wizard
A look at SecureDocs's electronic signature wizard.
- Organization
- SecureDocs
- Roles
- Visual Design, UX Design, UX Research, Front-end Development
After joining SecureDocs in 2018, we quickly gained momentum. We formed a small cross-functional team to enhance the product and set our priorities. To kick things off, we used a design sprint to help us focus on improvements and build team unity.
A design sprint is a five-day process where product and development teams collaborate to solve design problems and address key business questions. During our sprint, after two days of hearing from subject matter experts and mapping our customers' journey, it became apparent that we needed to prioritize and develop a more intuitive user interface for our electronic signature offering.
The Problem
We discovered that customers had difficulty sending contracts and other business documents through our product. They described it as a complex and cumbersome process, requiring navigating through various parts of the product to acomplish this task. After identifying this issue, we realized the need to create a simpler process with clear instructions at each step. The team and I agreed that a wizard pattern would be our saving grace.
For obvious reasons, the sketching and design phases of the process were my favorite. As the team's designer, I was responsible for visualizing ideas and introducing Figma to my teammates as our main tool for prototyping and collaboration. Once we settled on a solution, we all participated in building out a messy but efficient prototype that we used for research. We brought back our subject matter experts and a few customers from earlier in the week, tested our solution and answered a ton of questions.
Our first prototype and a glimpse of the conference room where we started building it.
The Solution
The concept was simple: whenever a customer reached the point of needing to dispatch documents for signature within our product, a streamlined four-step wizard would come to their aid. First, customers select the documents they wish to send. Next, they pinpoint their signing parties. Then, they designate areas for information entry and signatures on the document. Finally, they craft a message to accompany the documents to the signing parties. While this process may seem intuitive, it required significant effort to lock down. We designed this solution to be flexible, capable of accommodating a variety of use cases and interaction methods. For instance, a user might start without specific documents in mind, focusing solely on the signing parties. Alternatively, they might wish to start the process by pre-selecting documents from a folder they are currently browsing in our file browser.
The Outcome
After completing the sprint and in the subsequent weeks, the team developed a low-fidelity, well-thought-out, and technically feasible prototype. Once an MVP plan was ready, I started creating visual design mocks. Using our new file browser's visual language and our design system, Basis, as a foundation.
The project's final outcome.
We named our tool the Packet Builder, a user-friendly tool for creating packets (similar to digital envelopes) with necessary documents for signing parties. The tool was highly successful, streamlining a complex process and providing an excellent demo tool for our sales team. Its positive business impact revealed a new market opportunity to our leadership. The next year, we introduced a spinoff brand called "ReadySign," focusing on a specific segment of the e-signature software market, looking for a simple and affordable solution.
As a designer, this was an amazing learning experience that would guide me in my future projects at SecureDocs. Shout-out to my wonderful teammates (You know who you are 🙌) for their invaluable support in planning, designing, and building this amazing project.