How We Rebuilt Fresh Proposal UI, And Why It Was Long Overdue

Part 1 of the Fresh Proposals UI/UX Redesign Series

At Fresh Proposals, we help sales teams at professional services firms, accounting practices, digital agencies, IT consultancies, close deals faster through smarter proposals. Our users send dozens of proposals every month. The software has to be fast, intuitive, and frictionless. For years, we knew our interface wasn’t living up to that standard.

This post is the first in a series where we walk through the UI/UX overhaul we undertook, page by page, decision by decision. We’ll cover what was broken, what we changed, the technology choices that made it possible, and what the results look like for real users. We’re starting with two foundational areas: High-Level Navigation and the Dashboard.

The Problem: When Technical Debt Becomes User Debt

Fresh Proposals was built on legacy Angular, a solid foundation for its time, but one that accumulated years of incremental additions rather than intentional design. The result was an interface that worked, technically, but put a quiet, constant burden on the people using it every day.

That burden has a name in UX design: cognitive load — the mental effort required to process information and make decisions within an interface. The higher the cognitive load, the slower users move, the more mistakes they make, and the more exhausted they feel after a session. When your sales team is sending fifty proposals a month, a cluttered, inconsistent interface isn’t just annoying, it’s costing you money and morale.

We knew a patch-up job wasn’t enough. We needed to rethink the UI from the ground up, using a modern approach to styling and component design. That’s where TailwindCSS came in.

Why TailwindCSS?

Traditional CSS frameworks, and legacy Angular’s component styles, tend toward bloat. Styles accumulate in sprawling stylesheets, specificity conflicts breed workarounds, and visual consistency becomes something you have to manually enforce rather than something the system guarantees.

TailwindCSS works differently. It’s a utility-first framework, meaning styles are applied as small, composable class names directly on HTML elements. The result is a codebase where every component looks exactly the way it was designed to look, spacing is mathematically consistent, and the design system enforces itself. Combined with Angular’s component architecture, it gave us:

• Consistent spacing and sizing across every screen through shared utility classes
• Faster iteration — changing a component’s appearance no longer requires hunting through stylesheet hierarchies
• Smaller CSS bundles — Tailwind’s build process strips unused styles, improving page load performance
• Accessible, predictable hover states and transitions through built-in utility modifiers
• Dark/light mode readiness baked into the design system

The rebuild touched nearly every surface of the application. Let’s walk through the first two areas.

Part One: High-Level Navigation

The Before, A Crowded Top Bar

Look at the old navigation and you immediately spot the problem: the top banner was doing too much work. Action icons (notifications, help, create, profile) were clustered in the top-right corner. The profile menu, which holds account settings, help desk access, and logout, appeared as a floating panel triggered from a small avatar photo in the farthest corner of the screen.

On a typical widescreen monitor, this meant users were constantly moving their cursor from the primary working area in the center of the screen all the way to the upper-right corner to access utility functions. On smaller laptop screens, the top bar became genuinely cramped. More critically, this top-bar real estate was consuming vertical space — and vertical space is the scarcest resource on any screen.

The left sidebar itself, while functional, used large spacing between items and muted icon styling that made the menu items feel disconnected rather than part of a purposeful navigation system.

The After, Left-Bottom Anchoring

The redesigned navigation makes a deliberate choice: consolidate utility controls at the bottom of the left sidebar.

This is a pattern that has become standard in modern SaaS products for good reason. The left panel is already where users go for primary navigation. Keeping secondary controls (account, help, create) in the same vertical column means users don’t need to shift their attention or cursor travel to two different areas of the screen. Everything they need is along one axis.

What moved:

• Profile / account menu now lives at the bottom-left with a clean expandable popover
• Main utility actions (Main, Create, Help) are positioned just above the profile row
• The top banner is now clean — just the Fresh Proposals logo and a collapse toggle

The main navigation items also benefited from the redesign with clearer icons, tighter spacing, hover feedback, and a clean active state highlight.

What users gain: Less cursor travel. No visual competition between utility and navigation. A larger content area. A system designed intentionally rather than extended piecemeal.

Part Two: The Dashboard

The Before, Stats Without Story

The old dashboard presented Deals, Revenue, an acceptance rate gauge chart, and an Activity feed. While reasonable in theory, execution fell short.

The acceptance rate gauge looked informative but conveyed only a single number while consuming excessive space. The activity feed was a plain log of system events with no icons, hierarchy, or actionability.

The dashboard focused on historical reporting rather than answering the operational question: what should I do right now?

The After, A Command Center

The redesigned dashboard is built to help users begin their day, not just review it.

Performance Overview cards show key metrics with clear labels and contextual data.

Active Proposals displays live proposals with status badges and quick access links.

Quick Actions provides shortcuts to start work immediately.

My Pending Actions highlights payments, approvals, and signatures requiring attention, with action buttons directly available.

Recent Activities introduces structured, icon-based updates with direct links.

Recent Proposals offers a time-bound pulse check.

Renewals adds structured tracking for ongoing contracts.

What the Redesign Achieved

The new dashboard structures information around what users need to do. Within seconds, a sales director can understand performance, active work, urgent tasks, and renewal risks, all from the first screen.

What’s Next in the Series

Future posts will cover Proposals Listing, Bulk Send, Integration Pages, Settings, and the Emailer. The consistent theme: modern tooling allows the interface to encode design intention directly into the system.

When spacing is consistent, feedback is clear, and hierarchy is obvious, users stop thinking about the software and start focusing on their work.

Fresh Proposals is a B2B proposal software platform built for professional services firms. Follow this blog series for a full walkthrough of our recent UI/UX rebuild.