Partner Dashboard

& Proposal form

Partner

Dashboard

& Proposal form

Designing a Proposal & Payment Management System for DE

with Form-First Thinking

Designing a Proposal & Payment Management System for DE

with Form-First Thinking

Company

DE

Platform

Web and Mobile

Role

Sole Product Designer

Timeline

Feb - April 2025

Forms are a part of our daily life

Forms are everywhere — from booking tickets, making a purchase, signing up for a service to submitting proposals. Though often overlooked, their design plays a key role in user experience and efficiency. This case study explores the redesign of a proposal form, focusing on simplifying the flow and integrating AI to make the process faster and more intuitive.

Historical Context

DE, a leading solar energy consultaning company, faced challenges with its outdated project management system. The system was difficult to navigate, lacked essential features, and did not meet the needs of its diverse user base. To address these issues, we conducted user research and redesigned the system to improve usability, enhance functionality, and streamline operations.

Inspiration and Reference

When I started designing a Proposal & Payment Management System, I knew one thing—I didn’t want to create just another complex, rigid form. Instead, I wanted a system that felt intuitive, effortless, and human-centered. This book made me completely rethink how forms should be designed.

User Persona

User personas of essentially two types of users who would be using the proposal dashboard

Key Problems

Cognitive Overload – Long forms overwhelmed users, making them hesitant to complete them.

Cognitive Overload – Long forms overwhelmed users, making them hesitant to complete them.

Cognitive Overload – Long forms overwhelmed users, making them hesitant to complete them.

Repetitive Data Entry – Users kept entering the same details across multiple forms.

Repetitive Data Entry – Users kept entering the same details across multiple forms.

Repetitive Data Entry – Users kept entering the same details across multiple forms.

Late-Stage Errors – Mistakes weren’t caught until submission, requiring time-consuming corrections.

Late-Stage Errors – Mistakes weren’t caught until submission, requiring time-consuming corrections.

Late-Stage Errors – Mistakes weren’t caught until submission, requiring time-consuming corrections.

Disorganized Information – Poor visual structure made it hard to scan and find key inputs.

Disorganized Information – Poor visual structure made it hard to scan and find key inputs.

Disorganized Information – Poor visual structure made it hard to scan and find key inputs.

How might we?

User personas of 3 types of users who would be using the tracker

Information Architecture

Take aways

Ease the form filling experience for the users

Ease the form filling experience for the users

Ease the form filling experience for the users

Reduce errors and confusion

Reduce errors and confusion

Reduce errors and confusion

Reduce the total time taken to fill up the form

Reduce the total time taken to fill up the form

Reduce the total time taken to fill up the form

Use visual hierarchy to guide users intuitively.

Use visual hierarchy to guide users intuitively.

Use visual hierarchy to guide users intuitively.

Initial Designs

After reading the book and compartmentalising the form and creating an IA for the form elements the next part was to design the same


Looking at various examples and keeping in mind the mobile responsiveness We decided to have a single column clean layout

where the user can fill in the sections one by one

A/B Testing

An A/B testing was conducted between two versions of the form,

one being a two column layout and the other was a longer single column layout


Contrary to my expectations the double column layout function better as it needed lesser scroll time and also induced lesser anxiety than the

single column layout

Final Design

Final Designs were created to be much lighter and cleaner on the eye as well as to create a smooth and direct experience


✅ Added progress indicators - Stepper at the top (1-2-3) gives a sense of progress and encourages completion


✅ Instead of overwhelming users, forms are structured to reveal only what’s needed at each step.


✅ Broke down the form into thematic clusters (like Organization Details, Installation & Energy, Personal Info), which improves readability.


✅ Created a clean, minimal layout using ample white space and aligned fields for faster scanning.


✅ Simplified the CTA with a bold, single “Next” button to keep the experience action-focused and reduce friction


Mobile Version

Initial Wireframe

A wireframe was designed for the mobile view having a card layout which looked clean and mobile friendly


But once tested with the users and stakeholders,


❌ The additional click element on the cards seemed to be blocker as the users couldn't parallely compare different proposals

❌ Hard to read the table as information is scattered

Revised Design

The Dashboard was redesigned to have a scrolling dashboard as


✅ It displayed more lines of items

✅ Easier for clients to compare proposals

✅ Easier for system admins to look at all the pending proposals

Final Version

A mobile version was created for users ease of access