Web form to capture business deals
How I designed a web form to help entering business deals as easy as filling out a simple form
Type
Case Study
Role
Product Design
Date
September 2021
Context
The goal of this project was to design an in-house web form that effectively captures business deals within a specific company, making it easier for users to submit relevant information quickly and accurately. The challenge was to create a form that was both user-friendly and efficient, ensuring that potential business opportunities were captured without unnecessary friction.
Approach
The focus was on simplifying the user experience, ensuring that the form was intuitive and straightforward. I aimed to reduce the number of fields to only those essential for capturing high-quality leads, minimizing the effort required from users while still collecting all necessary information.
The landing page. The user can easily select to either import data automatically or manually. In case of doubt, there is also a “What to choose” button that will give him more information regarding the two options.
Introduction
At this company, where fast-paced work and constant multitasking are common, professionals often find it hard to keep track of the latest business deals. Their daily routine is filled with phone calls, emails, and chats, making it challenging to stay updated.
In the sake of time, employees often exchange information in semi-structured snippets like:
This message translates to the following structured information:
REPORT DATE
SERVICE PROVIDER
SERVICE DESCRIPTION
START DATE
LOCATION
PRICE
CLIENT
DEAL STATUS
REPORT DATE
SERVICE DESCRIPTION
LOCATION
CLIENT
SERVICE PROVIDER
START DATE
PRICE
DEAL STATUS
To streamline this process, I designed a web form that allows users to effortlessly capture such reports, even while multitasking. Users can type or paste a statement into the form-assistant text-box, which parses the text, identifies the content, and assigns it to the appropriate form fields.
This intelligent assistant ensures data-typing, validation, and disambiguation, transforming a cumbersome, field-by-field input process into a fast and efficient experience.
(Screen 1) The user can paste the copied offer and the system will be able to translate this information according to the table above. (Screen 2) He will then be able to either go back and edit the information or proceed by reviewing the information he added and the proceed. (Screen 3) The offer has been successfully submitted to the system.
Process
User journey maps
The design process began with creating detailed user journey maps to visualize typical scenarios faced by the company’s employees. One such scenario involved an employee needing to submit a service offer received via email or chat amidst a high-paced, multitasking environment.
These user journeys helped to identify key pain points and opportunities for improvement in the current process.
The user journey maps.
Outcome
User journey maps
The web form was designed to not only improve the efficiency in capturing business deals but also feature an intelligent system that translates the format of each deal, automatically filling out relevant fields. This enhancement will reduce user errors, ensure accuracy, and make the submission process quicker and smoother, ultimately leading to higher-quality lead capture.
Interactive prototype
Please find below a prototype of the final designs and experiment yourself. It is strongly suggested that you use the full-screen option at the top right corner of the Figma snippet.
Note: Please note that in order to see the unhappy path you need to navigate through Home > Which one to choose > Proceed Automatically sections.
Thank you!
Get in touch!
If you are interested in learning more about the process and/or the designs, please feel free to reach out to me through my LinkedIn profile.
