I specialize in creating interactive and engaging user experiences. Currently, I am honing my skills as a UX designer through practical projects and coursework. My goal is to leverage my knowledge in cognitive science to craft compelling designs that resonate with users on a deeper level.
DocHub
DocHub is your all-in-one solution for creating editing, and managing documents online, offering a user-friendly interface to sign, fill, and share PDFs, forms, and mire, all from one convenient platform.
Project Overview
The research obtained and collected in this case study uncovers daily workflow patterns, challenges, and inefficiencies within their businesses, as well as technology pain points faced by these founders, to inform the design of user-centric solutions that address their needs.
Problem Statement
Organizational leads need a reliable and efficient way to manage document approvals with clients while ensuring accuracy and completeness. However, existing digital tools often allow errors or incomplete submissions, leading to frustrating back-and-forth corrections. This inefficiency disrupts workflows, delays critical decision-making, and harms client trust and retention. A seamless and error-proof document management experience is crucial for professionals to maintain productivity and streamline their operations without unnecessary delays.
User Research Methods
The research was conducted with user-centered interviews with open-ended questions about their daily tasks while highlighting their work routine pain points. The main topics we discussed were:
​
-
Daily Routines: Understanding how tasks are managed and prioritized.
-
"Can you tell me about your current role and responsibilities at your company?"​
-
"How do you collaborate and communicate with your team? Are there any challenges in maintaining alignment or productivity?"
-
​
-
Tool Usage: Identifying commonly used tools and their limitations.
-
"Can you tell me about the apps or tools you rely on most for managing your tasks, team communications, or decision-making? How do they support your work?"​
-
"How do you collaborate and communicate with your team? Are there any challenges in maintaining alignment or productivity?"
-
​
-
Workflow Challenges: Exploring communication, collaboration, and tool integration pain points.
-
"How do you currently handle document sharing and signing with clients or stakeholders? Are there any issues you face with this process?"​​
-
"Can you think of any moments where a lack of tool integration or communication issues slowed down progress on a project? How did you handle that situation?"
-
​
Through these user-centered interviews, we gained valuable insights into how daily tasks are managed, the tools commonly used, and the challenges faced in communication, collaboration, and tool integration. The following user findings reflect the recurring themes and pain points identified during these conversations, providing a clear understanding of the current workflow inefficiencies and opportunities for improvement.
User Findings
Based on our User Interviews, we were able to identify several common pain points:
​
-
Users are unable to view full contracts or highlight missing signatures, requiring follow-up with clients.
-
They can submit incomplete contracts which cause inefficient workflow creating unnecessary back-and-forth communication.
-
There is a lack of integration between tools, leading to fragmented workflows.
​
With these pain points in mind, we can now shift focus to the user goals. Understanding these challenges has helped clarify the key objectives users aim to achieve, guiding us toward solutions that address their needs and enhance their overall workflow experience.
User Goals
1
Process contracts faster by reducing back-and-forth communication.
2
Streamline document editing with smart detection for required signature fields.
3
Improve usability by automatically highlighting fields that need to be signed.
Proposed Solution
Our proposed solution is to refine DocHub's document editing feature to ensure the client signs all forms before submitting the document back to the user. This will eliminate recurring communication issues that DocHub users face with clients, improving the overall communication and signage process.
User Personas
To better understand the needs and behaviors of our target users, we've created user personas based on the insights gathered from our interviews. These personas represent the diverse roles and experiences of our users, helping us focus on their unique goals, pain points, and expectations. By empathizing with these personas, we can ensure our design and solution are user-centered and meet real-world needs.
Wireframes
Early UI Sketches of the Dashboard
Detect Signature Fields and Assign
Assigned Fields
Confirm and Send Screens
UX Flows
-
UX Flow 1 focuses on streamlining the signing process for all parties involved. Once a person opens the invitation to sign, an AI detection system will identify all required signature fields. To simplify signing, a one-click option will automatically apply a saved digital signature to all necessary fields. This flow addresses the main issue with DocHub: difficulty in providing a seamless signing experience. Additionally, a feature will prevent sending the document back if any required signature field is missing. The personas highlight the frustrations our stakeholders experience with DocHub, which this flow aims to resolve.
-
UX Flow 2 focuses on simplifying multi-party signatures. We aim to rework key DocHub features to enable multiple parties to sign documents with minimal effort. The flow begins when a person opens a document to sign, where they can only sign in their designated field. AI will assist in detecting missing fields, and after one-click signing, if all fields are filled, the document can be sent back. If not, the user will be directed to the missing fields. This flow reduces confusion by streamlining the multi-signature process, addressing the frustrations highlighted by our personas.
Lo-Fi Prototype
For our prototypes, we decided to focus on redesigning the Dashboard UI to fit the needs of our stakeholders. We wanted to change our design prototype from our UX Flow 1 because a one-click button that completes all signages of a contract is an unethical practice. For our prototype 1, users are able to sign and send their document or send and receive their document to the client. In contrast, our prototype 2 shows the status of their most recent action at the top of their dashboard to notify the status of this document. Prototype 1 depicts the customizing options users can have when creating a template on Dochub and gives control to the user of who can access this template. Prototype 2 follows UX Flow 2 by showing the highlighted signages required for the user. The client is also alerted if they are missing any required fields. We have decided to make that the alternative option as opposed to the one-click auto sign button. Our stakeholders had issues with their clients sending contracts back with missing field requirements so we decided to add the prompt that alerts the client if they have not completed all signature fields before sending their contract back to our stakeholder.
Prototype 1
Prototype 2
User Testing
Prototype 1
​
What Users Liked:
-
Users preferred the view of sent documents and found the document status sections (e.g. "Needs Action", and "Waiting On") useful. The workflow made sense in general. Participants suggested making "Needs Action" and "Waiting On" more distinct (e.g. bold or red text). Users preferred Auto Detect for detecting signature fields to save time.
​
What Users struggled with:
-
Users found the text generic and confusing, preferring real document templates for better realism. There was no clear indication of what was clickable, and users didn't recognize that some elements were interactive. the signing section was unclear and users questioned whether they were looking at an example of a real signature. Some users didn't realize they were looking at documents. The dashboard felt too wide, resembling a mobile design on a web browser. The hamburger menu felt oversized and the text was too large. Some did not trust AI detection and would manually review fields before seeing the document out to their client for signing. The one-click sign feature raised concerns about people signing
Prototype 2
​
What Users Liked:
-
Users liked having a “Shared With You” section but suggested renaming it to “Finalized” or “Completed”. Some users didn’t realize DocHub had certain features, which were better highlighted in this version. It was generally acceptable but could be larger.
​
What Users struggled with:
-
Users were confused by “Create New” and “New Document”, as they seemed to perform the same function. The difference between “Sign & Send” and “Send & Receive” was unclear. Users didn’t understand the “Create template for now” option. The “Client Name” section was unclear and users weren’t sure how it related to documents. The sidebar felt too large and unnecessary. Users are expected to return to the dashboard using the top-left home button or logo. Some users weren’t sure if they could create a document without uploading one first. The second upload screen felt unnecessary. Users wanted clearer roles (e.g., “Needs to Sign” vs. “Receives a copy”). They expected a better way to add/remove recipients. Users weren’t sure what they were customizing when asked to edit document fields.
Next Step Plans
​
Moving forward with our project, we will set Prototype B as our foundation, incorporating elements from Prototype A that users preferred, such as the clarity in document status sections and compact dashboard layout. As we work toward creating a high-fidelity prototype in Milestone 6, we will make sure to address specific redesign decisions such as:
-
Dashboard Organization Refinement
-
Keeping the Recent Documents section from Prototype B, but improving the visual hierarchy
-
Make sure the “Needs Action” and “Waiting On” sections are distinguishable
-
-
Improving Signing Experience
-
Implements better and more detailed document previews
-
Include elements that allow for signified interaction
-
Improve signature instructions so that users understand where and how to add signatures
-
Adding “manual review” step for AI-detected signatures to account for user trust
-
-
Rewording of Confusing Terms
-
“Shared With You” can become “Needs Signature”, “Finalized”, or “Completed depending on the required action
-
Streamline either “Create New” or “New Document” to avoid redundancy
-
-
Change “Sign & Send” and “Send & Receive” to clearer labels
In addition to reworking these features, we ultimately aim to develop high-fidelity prototypes in Figma. By taking our ideas produced through our wireframes and implementing them into high-fidelity prototypes to be tested by our stakeholders, we will be able to create a refined UI for DocHub, addressing concerns about visual appeal and usability.
Hi-Fi Prototype
For our high-fidelity prototype, we based it on our UX flow 1. Our previous screens for UX flow 1 were not aesthetically pleasing - we fixed our high-fidelity prototype to have screens that reflect the feedback we got from our stakeholders. One major critique we aimed to fix was not clarity in our texts and signs, more specifically it was stated that the text on screen 1 (the dashboard) was confusing. Therefore in our high fidelity prototype, we added texts that were clear as well as making sure the signs were intuitive for the user. We changed most of the dashboard screen to have more functionality, instead of having previous clients on our sidebar - we added a list of functions for easy navigation.
Based on our user testing findings, we ultimately decided to progress with UX flow 1. Our stakeholders showed a preference for it compared to UX Flow 2, our team also decided this was the better option. UX flow 1 allows us to focus directly on the needs of our stakeholders. In this case, our stakeholders are business owners who use Dochub as a means to get signatures from their client(s). By moving forward with this flow, we can make the signing process faster and more efficient not only for clients but for our stakeholders as well.
Dashboard Screen
.png)
Create New Document Screen
Edit Document (Highlight Signature Fields)
Confirm and Send Page
.png)
Dashboard After Sending Document (Check Status & Modify)
