Impact Invest

Project Goals:

The goal of this project is to design a multistep investment inquiry form for a law firm specializing in investments. The form will align with the firm's brand colors and typography, seamlessly integrating into their existing website to generate qualified leads. Designed in Figma, it will ensure a smooth user experience while gathering essential client information for tailored investment offers.

The form will feature a wizard-style layout with custom controls, including text, number, and date inputs, radio buttons, checkboxes, toggles, and dynamic buttons. A step-by-step approach will improve usability, keeping the interface clean and intuitive. The final design will prioritize clarity, responsiveness, and engagement to maximize form completion rates.

Challenges:

The main challenge was designing custom form elements that seamlessly matched the firm's branding while maintaining clarity and usability. Every input, button, and toggle had to align with the site’s typography and colors, ensuring a consistent yet intuitive interface. Achieving this balance required careful attention to spacing, contrast, and interactive states.

On the UX side, keeping users engaged and minimizing cognitive load was critical. The form was structured into clear, digestible steps, preventing overwhelm while maintaining focus. A user-friendly navigation system allowed easy progress tracking and step editing, ensuring a smooth and intuitive experience.

Work Proccess - Design:

I began the process in Figma, designing all the core form components to align with the firm's brand identity. Each element—buttons, inputs, toggles—was styled for consistency and clarity. Next, I structured the form into eight logical steps, each with a clear title to guide users smoothly through the process.

For navigation, I implemented back and forth buttons and a side panel displaying step names for easy access. Each question was mapped to the most suitable form control, with tooltips for complex fields and progressive reveal for conditional inputs—ensuring a streamlined, user-friendly experience.

I began the process in Figma, designing all the core form components to align with the firm's brand identity. Each element—buttons, inputs, toggles—was styled for consistency and clarity. Next, I structured the form into eight logical steps, each with a clear title to guide users smoothly through the process.

Work Proccess - Development:

After finalizing the design in Figma, I developed the form using JavaScript/jQuery to handle user interactions and data submission. I utilized Bootstrap for styling and its grid system to ensure a responsive layout across devices.Form logic included dynamic field updates, step validation, and smooth transitions between steps.

I implemented conditional rendering with jQuery, ensuring fields appeared only when relevant (e.g., showing partner info fields when the user selects "Yes"). The combination of custom scripts and Bootstrap allowed for a clean, intuitive, and fully functional multistep form.

Screens: