The Problem

Dedoco’s version 1.0 signing flow lacks intuitiveness, causing a peak in user drop off and an increased load for customer support. The visual design also leaves much to be desired.

The Goals

🚀  Create a simplified and intuitive signing flow
🥇  Align the visual style with the rebrand's style (and begin to build the design system!)
🤝  Convey Dedoco's unique market offering and values of trust and security

The goals can be summarised into a problem statement that underpins the theory and process of this project:

"Optimize Dedoco's signing process: streamline flow, harmonize visuals, convey trust and security."

Step 1: Competitor Analysis

The next step was conducting a heuristic evaluation of our competitors' current signing flow:

• Docusign
• Adobe Sign
• Dropbox Sign

As user research and key insights were already conducted prior to my arrival at Dedoco, I conducted a supplementary competitor analysis to achieve 2 goals.

• To better understand the market and Dedoco's unique business proposition as I was new to the team
• To gain inspiration and understanding of common design patterns and user flows offered by competitors

The flow we tested was adding 3 signatures and 3 custom dates, submitting the document, and downloading a signed copy.
‍
‍The task assigned was "You are a new Dedoco user and signer that wants complete your assigned process and downloading a signed copy."
‍
‍The evaluation method we used was assigning a score based on friction and time required to complete a task. A simplified scorecard complied scores across competitors.

Competitor feature consolidation

Emerging insights:

• Less is more - the signing process should be as intuitive and simplified, while informative and engaging.
• Reinforce brand values - Dedoco has a strong business proposition that stands out from competitors, and the designs should showcase that.
• Provide clear progress and system updates - the interface design should guide users along the process and give clear indication about error states to increase transparency and build a trusting relationship with users.
• Following the mental model - creating a logical flow that matches the expectations of the user

Step 2: Auditing our Existing Signing Flow

Due to time and resource restraints, we were unable to source many external participants for user research. As a workaround, we conducted a 'lite' version of user testing by:

• Conducting research with existing users who are familiar with the signing flow
• Asking new Dedoco employees who had not familiarised themselves with Dedoco's product.

We set out a simple scenario: complete the signing process as a signer and approver.

Existing flow

Participants tested all user flows including edge cases, and were instructed to look for blocks in the flow, UI issues, and bugs. As participants had expertise in design and engineering, we were able to identify issues that typical testing participants may not be able to pick up.

TC& modal upon starting the signing process

Document signing process

Action modal after clicking on document action field

Key findings:

• There isn't enough direction for new users to complete signing, but the process is similar enough to competitors that most users who have used other signing products are able to pick up on.
• The visual components fails to convey professionalism and build user trust, and feels clunky at best.
• Certain UX issues such as unpredictability when interacting with certain elements create a confusing user experience.
• Viewport space isn't utilised well, leaving much visual real estate unused.
• Though barebones, the user journey is comparable to competitors' products, and users are able to navigate through the process without much guidance.

Step 3: Initial Designs

Due to limited time and resources allocated for this project, I dove directly into high-fidelity iterations in order to test our assumptions with our testing group.

In this process, we prioritised speed and output above following a structured procedure, something that was necessary when projects were required to be shipped rapidly. We collected feedback during our weekly critiques and check-ins, as well as design grooming sessions to keep stakeholders in the loop and to manage expectations of timeline and workload.

Iteration 1:

Key findings:

• Lack of friction for the ‘sign all’ feature - users didn’t realise the other fields were clickable, leading to frustration when users realised certain fields were signed incorrectly.
• Most users used another product for instantaneous signing.
• Users expressed concern about signing too quickly - ‘sign all’ enables users to sign without reading.Too many numbers!
• Users were focused current item more than the required number of items.
• Progress shown in the form of completed fields / checkmarks were counterproductive - users felt they had yet to complete the process.
• Additional engineering effort required to add new signing methods.
• Dropdown menu was not prominent enough for users who wanted to sign quickly.
• In the situation where there are 5+ users, the personalised fields and colours would become overwhelming.

Iteration 2:

Key findings:

• Some confusion on whether or not to click on PDF or sidebar first.
• Progress bar and numerical progress aided visualisation.
• Horizontal overview of signing methods provided clarity, but limited future addition of different methods.
• Personalised colours helped guide users to the required fields, but some users expressed interest in seeing what other users have completed.

The Latest Design