At Ubstream, the topic was entrusted to the team responsible for PDF document features.
The Design Thinking and Agile methodologies are applied within this team, which consists of a product owner, an UX/UI Designer (myself), and developers.
At Ubstream, the topic was entrusted to the team responsible for PDF document features.
The Design Thinking and Agile methodologies are applied within this team, which consists of a product owner, an UX/UI Designer (myself), and developers.
Ubstream (digital product publishing, SaaS)
Fonctionnalité
Allow users to sign and request signatures on a document stored in their collaborative workspace.
• Market research on electronic signatures and benchmarks.
• Design of wireframes.
• Development of user journeys.
• Creation of prototypes.
• Writing of technical specifications (guidelines, wording, etc.).
• Creation of icons and addition via GitLab.
The product aims to provide the most comprehensive workspace possible for its users’ needs.
Product users regularly use external services to sign documents that are initially stored within the product.
Integrating electronic signatures into the product is the solution that allows everything to be managed in one place. Users benefit from increased convenience and faster execution.
The electronic signature service is also included in the subscription plan, eliminating the need for users to subscribe to an additional service.
Each meeting helped us clearly define the goal, the problems to solve, and the technical limitations.
The priority for this first version was:
• To offer the functionality on desktop screens only, in order to optimize usage and ensure good accessibility.
• To allow users to sign documents themselves, send signature requests to other users, and be able to sign a request for signatures.
• The available fields for signing are signature, initials, and stamp.
• Additional fields will be included in future iterations.
The brainstorming, benchmarking, and user audits are key stages in understanding and gathering as much information as possible on the subject.
By using the Figjam tool, we can quickly create diagrams to map out the first user journey.
This approach allows us to connect all the desired interactions while taking the scope into account.
Using Figma, the wireframes illustrate the placement of blocks and possible interactions.
The wireframe prototypes are tested within the team, as well as by other product owners and UX/UI designers from other teams.
This step allows us to:
• Define all the elements present at each stage of the user journey.
• Ensure that the journeys are intuitive and fluid.
• Verify that the information hierarchy and main focus areas are correct.
• Define the expected animations and interactions.
• Enable quick adjustments.
Each journey is composed of multiple screens and interactions. Detailed and prototyped screens help ensure that the final functionality aligns closely with the team’s expectations.
This way, team members can easily express their viewpoints through the prototypes to improve the user journeys.
When all the user journeys meet the expectations established by the team, they must be supplemented with technical indications for both BACK and FRONT developers.
On Figma, technical specifications are added.
With Notion, all the necessary information is provided to ensure smooth integration and development, including translations for French and English.
In this phase, each user journey is tested before going into production.
The tests ensure that the design fidelity matches the delivered screens, test animations, and integration with other product features. Any bugs are reported.
While waiting for the implementation, planning for the next iterations has already started.
This iteration allows for time-saving when adding identical fields on documents with many pages.
For example, if you want to place your signature on pages 1, 2, 3, 4, and 5.
The steps are:
• Drag and drop the signature field onto page 1.
• Click the “Duplicate” icon to access the feature.
• Choose to place the field on custom pages.
• Enter the pages “2, 3, 4, 5.”
Users will be able to add “text input” fields to indicate to signers the precise text they need to enter.
Example: We want the signers to write “Read and approved” on the document.
User feedback is crucial for improving the product and adapting it to usage habits.
In the case of electronic signatures, internal tests were conducted with novice users of the product.
In addition to this feature, a summary view of all signatures made on documents is being considered to enhance navigation and improve management efficiency.