Say goodbye to complicated signing
Redesigning a document signing system
My Role
UX Research · UX Design · UI Design
Project type
A SaaS application for SPS company
Tools
Figma, Photoshop, Illustrator
Client
SPS solutions
OVERVIEW
SPS is a premier provider of paperless solutions. Its digital signature system faced several user experience and interface challenges, causing frustration for users and making the signing process difficult to navigate. After conducting thorough research with users and analyzing competitors, I successfully redesigned the system to be more user-friendly and intuitive.
FINAL PROTOTYPE
LETS GO BACK TO THE START....
THE CHALLENGE
UI
- Inconsistent Design Elements:
Colors, font styles, and sizes varied across the system. - Grayed-Out Components:
Despite being enabled, certain key components remained grayed out, causing confusion for users. - Poorly Designed Document Status Dashboard:
The small size and inadequate placement of the dashboard displaying document statuses was a source of frustration for users.
UX
- Confusing Process:
Users were unsure of the proper order of steps while preparing a document for signing, such as the requirement to add recipients before signing fields. - Intricate Template Usage:
Applying templates to documents was an unclear process. - Unneeded Process Steps:
Each document creation required the user to go through an events screen, which was a redundant step for many users. - Lack of Notification Messages:
The absence of notification messages after key steps in the process left users uncertain of the document’s status.
DATA ANALYSIS
I obtained the following statistics from SPS's customer support center pertaining to the document signing system:
of tickets relate to locating documents that await signature
of tickets relate to creation of new documents for signing
of tickets deal with template usage
COMPARATIVE REVIEW
A prominent bar indicates the progression of the main flow, making it easy for users to follow
Fields can be easily positioned within documents using drag-and-drop functionality
The main flow for document creation is presented in a dialogue box, making it possible to accidentally close and discard the document
There is no dashboard that provides a unified view of all relevant documents for the user
The main flow for creating documents is very clear and intuitive
Users can easily add new fields and position them through drag-and-drop functionality
Every click in the document editing screen results in a duplicate field, causing confusion for users
There is no dashboard that provides a clear separation between documents created by the user and those pending their signature
A well-designed dashboard that provides a unified view of all relevant documents for the user and their status
The user flow for creating new documents is clear and straightforward
Editing a document can be difficult as users cannot drag and drop fields
Many menus can disorient and confuse users
INSIGHTS
Guided Process:
The system should clearly guide users through each step of the document creation process to prevent confusion and errors.
2
Streamlined Document Overview:
A clear and comprehensive dashboard should be displayed upon entering the system, showcasing all relevant documents and their current status.
1
Consistent User Interface:
A fresh and consistent user interface should be created to enhance the overall user experience and improve functionality.
4
Improved Template Application:
The process of applying templates to documents should be redesigned to make it easier and more intuitive for users.
3
Increased sales revenue
Reduced load on customer support center
PERSONAS
Yuval, as the CEO of a large company, has a daily routine filled with the task of signing numerous documents. He often faces difficulties in identifying which documents are awaiting his signature and who within the company has already signed them. Sometimes invoices have been submitted past their due date since he was not aware they needed his signature.
Motivation:
To streamline the company's signing process and make it more efficient
Yuval Gonen
62 | CEO | Married + 3
Pain point:
Inefficient process of locating documents pending his signature.
Ravit is responsible for submitting invoices to the CEO for signature. Unfortunately, the preparation process is time-consuming and often leads to confusion as she struggles to recall each step and understand she can not add fields to a document. Furthermore, tracking the status of the documents is a challenge for her.
Motivation:
To streamline the preparation process and have a clear understanding of the status of each document.
Ravit Kochavi
35 | Accountant | Married + 1
Pain point:
Inefficiency in preparing documents and difficulty in tracking document status.
CONCLUSION & SOLUTION
Re-designing the document signing process and creating consistent design by using a design system
MAIN USER FLOW
EXPLORING UX CONCEPT
#01
Home Page
2 Drafts
Draft 1:
I recognized the need for a dashboard so that users can easily track the status of all their documents in one place. Initially, I created a dashboard with a table below it, but realized there was duplication between the two.
Draft 2:
I removed the data from the dashboard and made sure that the data was emphasized through appropriate UI design.
#02
Adding Recipients screen
3 Drafts
Draft 1:
The document (that was uploaded by the user) was not visible, making it challenging for the user to determine who should sign it.
Draft 2:
I created a screen that showed the document’s content. However, it was still unclear to new users that they needed to assign the first recipient before adding any fields.
Draft 3:
I created a screen in which the user must add a recipient before beginning the document preparation process. The other parts of the screen were grayed out to clearly indicate the necessary steps. Additionally, I added a new option to load a template, which includes a pre-populated list of recipients and fields. The new option was clearly separated from the main process to avoid confusion.
#03
Document Preparation Screen
2 Drafts
Draft 1:
The screen has two tabs, one to show signing steps and fields and the other for managing recipients. However, I realized this setup was inconvenient as the users had to switch between tabs frequently.
Draft 2:
I placed the fields at the top of the screen and displayed the recipients separately to the right. This way, it was obvious who the recipients were and what fields were assigned to them. I used colors to further differentiate between signing steps.
I also added a floating navigation widget for easy field selection. When a field is selected in the widget, it is automatically displayed on the document, making it especially useful for long documents with many fields.
STYLE GUIDE
To make a consistent design, I created a style guide
based on Angular material design
COLORS:
TYPOGRAPHY:
– Assistant font –
אבגד
BUTTONS & COMPONENTS:
FINAL SYSTEM SOLUTION
