MY ROLE
Product design / UX strategy / Interaction design
Team
Evan
/ Product Designer
Ayomide
/ Lead Designer
TIMELINE
2 weeks
Plutio Proposal Builder
Turning a powerful proposal tool into a focused visual editor.
Overview
Plutio is an all-in-one client work platform for freelancers, studios, and small agencies — bringing proposals, contracts, invoices, projects, forms, scheduling, files, and client communication into one workspace.
As Plutio prepared for a broader platform refresh, I joined on contract to focus on one of its most business-critical surfaces: the proposal builder. The goal was to improve how people create, edit, style, and send proposals — turning a powerful but heavy tool into a cleaner editor closer to Canva, Framer, and Notion.
The old builder had many useful features, but the experience felt fragmented.
The short story
Plutio already supported many important proposal features — users could create proposals, add sections, include items and summaries, collect signatures, take payments, and connect proposals to the rest of their workflow. But building a proposal still felt heavier than it needed to be.
The old experience had the right ingredients, but the workflow was not always clear. Inside a wider exploration into AI, automation, templates, and a more modern editor, the proposal builder became the clearest place to start — it is where work gets sold.
My role
I joined on contract to focus specifically on the proposal builder while the wider team explored a larger refresh. My work covered the structure of the editor, the design of key screens, the interaction model for sections and blocks, and the handoff of states and components.
The constraint was to modernize the experience without ignoring Plutio's existing product model — real proposal logic, templates, items, signatures, payments, and client workflows all had to be respected.
Product backdrop
The redesign happened during a very exploratory phase. The team was discussing AI-generated templates, automations, client portals, a marketplace for experts and templates, better support content, improved navigation, and a more flexible design editor.
That mattered because the proposal builder was not just a standalone screen — it could become the foundation for a wider creation system across Plutio. So the design had to solve the immediate editor while creating a structure that could scale.
The proposal builder inside a broader product exploration.
Design direction
The main shift was to give every part of the interface a clear job. The left panel became the place to add sections and browse templates. The canvas became the place to build and edit. The right panel became the place to adjust design, details, and activity. The top bar held proposal-level actions like preview and send, and a floating toolbar handled section and block actions.
Instead of asking users to hunt for controls, the interface now responds based on what they are doing.
Five design principles that kept a complex editor simple and scalable.
Core editor experience
Empty proposal state
The empty state shapes the first moment of use. A blank proposal should not feel like a dead end — it should make the next action obvious.
The redesigned empty state gives users a clear way to begin: add a section from the canvas or set proposal details from the side panel. It stays calm, but it never leaves the user guessing.
Start building your proposal. Add your first section or choose a template to create a proposal your client can review and approve. Primary action: Add section · Secondary: Browse templates.
The empty state gives users a clear starting point without overwhelming the workspace.
Section-first creation
A core decision was to make sections the primary building unit. Users do not think ‘I need a block object’ — they think: I need an intro, a pricing section, a summary, a signature area, an image or video.
The redesigned left panel reflects that mental model. It offers familiar proposal parts — text, image, video, code, items, summary, intro, signature — and lets people build from structure instead of a blank page.
The builder starts with common proposal sections, making it easier to assemble a document quickly.
Inline editing
The redesign makes editing feel direct. When users select text, the formatting toolbar appears right beside the selected content — keeping attention on the proposal instead of sending people across the interface to find basic controls.
The toolbar supports the common actions: bold, italic, underline, link, alignment, and delete — a familiar editing experience with far less attention switching.
Text formatting appears beside the selected content so users can edit without leaving the canvas.
Section selection
Proposal builders need strong selection behavior. When a user selects a section, they should immediately understand what is active, what can change, and where to add more content.
The redesigned selected state uses a clear outline, a contextual toolbar, and a nearby add button — surfacing the actions people need most: rearrange, duplicate, delete, change color, adjust spacing, add a block, and edit content. The goal was a builder that feels predictable across every section type.
Selected states show users exactly what they are editing and what they can do next.
Add section experience
Users can build from the sidebar or directly on the canvas. Some prefer to browse available sections from a panel; others want to work in the document and add the next section exactly where it belongs.
The blue plus button keeps the building flow active — a quick way to continue without moving away from the proposal. The add menu covers text, image, video, code, items, summary, intro, and signature, so momentum never breaks.
Users can add sections from the canvas or the sidebar, depending on how they prefer to work.
Proposal settings and reuse
Design panel
The right panel was redesigned to make styling feel structured. Instead of scattered visual settings, the Design tab groups decisions into clear categories: color, typography, font size, spacing, padding, border radius, and a style sheet.
The aim was not unlimited design control — it was enough control to make a proposal feel polished, professional, and on-brand without advanced design knowledge.
The design panel groups styling controls into a simple proposal theme system.
Proposal details
The Details tab keeps proposal-level information in one place: recipient, project, issue date, expiry date, currency, proposal number, custom fields, localisations, connections, and automation.
Separating these from the Design tab makes the editor easier to understand — Design changes how the proposal looks, while Details changes the business information behind it. It also gives Plutio a scalable home for future proposal settings.
Proposal metadata lives in the Details tab, separate from design controls.
Templates and reuse
Many users create similar proposals again and again. A freelancer reuses the same intro, pricing format, payment section, or signature block; an agency reuses summaries, scope sections, packages, and terms.
The template area lets people start from reusable structure instead of rebuilding from scratch — and connects directly to Plutio’s broader direction around AI-generated templates, user-submitted templates, and a possible marketplace.
Templates help users start from reusable structure instead of rebuilding proposals from scratch.
Commercial proposal blocks
Pricing and item sections
Pricing is one of the most important parts of a proposal. The items section gives a clean way to show what is included, how much each item costs, and how the total is calculated.
The redesigned pricing area makes proposals easier to scan and easier to trust — supporting item detail, quantity, rate, amount, subtotal, tax, and total while still feeling like part of the document, not a separate finance screen.
Pricing is treated as a structured section inside the proposal.
Component system
A builder made from reusable parts
Because the builder has many moving parts, I designed it as a system of reusable components: editor top bar, add-sections sidebar, section template card, canvas breakpoint bar, proposal canvas, proposal section, floating block toolbar, text formatting toolbar, add-section button, design panel, color picker, typography settings, layout settings, details panel, activity panel, preview, and send.
This made the design easier to scale and hand off, and kept interaction patterns consistent across section types.
Reusable components kept the builder consistent across sections, blocks, and settings.
Key flows
Add and edit text. Add a text section, select the content, and edit directly on the canvas — formatting appears only when needed.
Add media content. Image, video, and code sections all follow the same selection and editing model.
Add items and summary. Structured sections make proposals easier to scan and approve.
Style a proposal. Color, typography, spacing, padding, and radius update the proposal in context.
Preview and send. The top bar keeps the final actions visible: build, preview the client experience, then send.
Each core flow was designed to feel immediate and contextual.
Before and after
Editor structure. A dense, fragmented workspace became one where each area has a clear role — add content, edit on canvas, style on the right, send from the top.
Empty state. A blank-feeling start became a clear next action with proposal details close by.
Text editing. Formatting moved from across the interface to right beside the selected text.
Styling. Scattered controls became a connected theme system of color, typography, spacing, padding, radius, and styles.
Section actions. Actions now appear contextually around the selected object, so users always know what they can do next.
Before — a denser, admin-style editor.
After — a focused, visual workspace.
Expected impact
This redesign was not only about a better-looking builder — it was about making proposal creation feel more natural, more visual, and easier to complete.
~40% faster time to a first proposal · ~30% faster standard build time · ~30% fewer editing errors · 8–12% lift in proposal acceptance.
The redesign aimed to reduce time-to-first-proposal, cut editing mistakes, make sections and templates easier to reuse, improve confidence before sending, and create a stronger foundation for AI-generated templates and future editor features.
Reflection
Powerful tools need clear structure
This project reminded me that powerful products do not always need more features — sometimes they need clearer structure. Plutio already had the capabilities freelancers and agencies needed; the opportunity was to make them easier to access, understand, and trust.
The biggest challenge was balancing flexibility with clarity. A proposal builder must support many content types, styling controls, templates, signatures, and business settings — but the user should not feel all of that at once. The final direction creates a cleaner editing model that can scale with Plutio’s future vision: AI-generated templates, reusable sections, marketplace submissions, and a more powerful design editor across the platform.
