Secure Proposal Experience

Watch an overview of the project

In one of the industries I work in, we live and die during the sales proposal phase. Our reps receive a formal request for proposal, and that’s when the sales engines start. How we do long-term with a prospect often hinges on the speed of the proposal response, the quality of the information and of course the price.

Secure Proposal Experience

Each year I redesign and update our proposal templates using InDesign with export to PDF for the final product. And over the years our PDF proposals grew. What started as a 5-page document about the company with a price, turned into a multi-PDF zip folder with over 60 pages of content.

Each year we prune the content and question what needs to be in our proposals. However, our feedback from won sales notes our proposals as a key differentiator and our extensive content as being one of the significant factors.

Death of the Interactive PDF

My first thought was to produce a sizeable interactive PDF. I would combine all the documents and then create some clickable navigation for the user. That way our prospects wouldn’t have to scroll through all those pages to find what they wanted.

Justin Putney wrote extensively on the death of the interactive PDF. Mobile and different PDF readers make for unpredictable experiences. If we can’t guarantee a consistent experience for our prospects when viewing proposals, then our final results may also become unpredictable. Even more, you’re quite limited with the media you can use in a PDF.

Dynamic Content

Another aspect of this project involved the custom data that each proposal needed. From proposed job dates to the pricing itself, there was a lot of ‘find and replace’ going on when producing the proposals. I wanted a more efficient approach than hunting and pecking for 60 pages.

File Size

More than sixty highly designed pages with pictures and graphics start to add up in the file size department. I wanted a leaner meaner approach that didn’t lack in content and design.

Enter HTML

I wanted to do this four years ago and finally got the green light to attempt it. I knew a lot was weighing on this change. With so much hinging on our proposals, to dramatically switch formats meant a lot was riding on it.

The proposal uses HTML and CSS Grid for the design. However, the power of the document comes from the single JavaScript file that holds all the dynamic data. Changing the variables in that file changes the experience for the user throughout the entire proposal. Finally, I wrapped the whole thing in a little bit of PHP code so that I could secure each proposal with a login for the prospect.

As a result, I reduced our proposal response time by about 80% and decreased the proposal file size by 50% despite adding more content to the final product.

Here’s how I did it:

CSS Grid

We produce a considerable amount of proposal packages each month, so I wanted to keep the template lightweight. A small footprint allows us to duplicate the presentation many times over without taking up too much space.

CSS Grid | Secure Proposal Experience

I decided to style the proposal using CSS Grid instead of a dependency rich and often overkill framework like Bootstrap. CSS Grid is growing in popularity within web browsers, and I’d always wanted to use it in a live project. I thought this was a perfect candidate considering the desire to keep things lightweight.

I wanted to go with an admin dashboard style using navigation in the left sidebar. I came across the CSS Grid Admin Dashboard design on MXB which became the inspiration for my CSS Grid style. If you get a chance, stop over and read the article about the CSS Grid Admin Dashboard. You’ll learn a lot about CSS Grid and what it can do.

JavaScript

All the merge content comes from a single JavaScript file I can edit with the relevant data for each proposal. When a sales rep receives a request for proposal, he or she fills out a form with all the data I need to complete the proposal.

// Insert Name of Client
function myClientName() {
  var t = document.write("ABC Company");
}

// Insert Month and Year of Proposal
function proposalDate() {
  var t = document.write("January 2019");
}

I then take that data and paste it into the different lines in the JavaScript file which ultimately populate the proposal’s pages. No more find and replace. I go line by line in the JS file knowing all the merge data shows up in the right place.

<script>myClientName()</script>

PHP Login

Because each proposal contains sensitive data, I knew we needed a way to secure the content. I didn’t want to have to dive into an extensive database as I felt that would weigh the project down and slow our time to launch. We want to churn out an accurate, high-quality presentation quickly and I didn’t want to have to deal with database management on top of everything else.

Secure Proposal Experience

I came across a Micro Login Script that relies on a text file instead of a database. This simplicity was perfect as I knew we would copy and paste the template to create a new proposal each time. Storing the users in a text file enables anyone to manage user credentials regardless of their tech proficiency. An important aspect as we scale operations.

This method involved a minimal amount PHP, again keeping it small and fast. You call the authentication file at the top of every page you want to secure. The user must pass through a login screen if they aren’t already logged into the proposal.

<?php
	require_once('common.php');
	checkUser();
?>

While this is admittedly not the most secure application known to man, the username and password do deter the average nosey competitor and keep web crawlers at bay.

Analytics

Lastly, I created a separate property in Google Analytics to track the performance of our proposals and dropped the code into each page of the template. This code will allow me to learn what pages our prospects care about the most so we can better serve them in the future.

Secure Proposal Experience: Final Thoughts

I’m looking forward to perfecting our proposal over the next few weeks and months. I plan to experiment with CSS print styles and also tighten up the mobile part of the experience.

Secure Proposal Experience

On the production side, the new proposal format is a huge hit. We’re still waiting for feedback from prospects over the next quarter, but I hope that this will further differentiate us from our competitors while also freeing up some valuable time that was once spent copying and pasting to produce proposals over and over each day.

Regardless it was a fun project that allowed me to experiment with JavaScript from the ground up and also play with some PHP that wasn’t attached to a WordPress build.