Proppy

We Are Wizards

UI, UX, Web app

Proppy is a tool for freelancers and small agencies needing to send proposals to clients. I had the real pleasure of working with the guys at We Are Wizards to bring the project to life, helping them recognise the issues they needed to address, as well as designing the interface and a temporary brand.

Finding the problem(s)

In order to work out the most important factors for Proppy to consider, I worked closely with the team to investigate the common issues around creating proposals:

We discovered the following recurring problems:

1) Creating a great proposal takes time

Winning a project requires a huge amount of time and effort. Competition is always high and although you’re confident that you have the best proposal on offer, the way in which you present yourself and your work matters the same or more than the actual work you’re pitching.

Therefore, a tool that cuts the time spent trying to convince someone that you’re amazing — time that you’d prefer to spend doing the actual job — would be essential to freelancers and small businesses.

2) Some of the tools to make great proposals are not for everyone

Most of the users I interviewed would create fairly standard documents to send externally. To create better looking proposals, they usually need the help of designer. But what if Proppy was easy enough for anyone to use while still delivering visual impact? Proppy’s key idea was to allow people to deliver the wow effect, without the traditional skills required.

3) It’s hard to collaborate on the same proposal…

…unless it sits somewhere in the cloud. Even then, how can you easily separate the conversations you have internally with your team, and the discussions you have with your client?

4) Keeping proposals organised

Many people send quotes to potential clients by email, and use other tools depending on how complex is the proposal. I wanted to figure a solution to get all of this data in one place. I also started thinking how cool and useful it would be to access meaningful data like ‘Proposals Won/Proposals Lost’ during any given year. This would allow people to analyse their performances to improve for future work.

The design

I created a list of features that would solve one or more of the problems above, and sorted them by priority.

1) Editor

First question:

‘What are the differences between the editorial interface and the one seen by clients?’

I decided on three key stages:

Different stages of a proposal / Initial sketches

Different stages of a proposal / Initial sketches

Second question:

‘What level of customisation would freelancers and companies want for their proposals?’

I had to ensure that non-designers are able to create good looking proposals. For this reason, and because decision making is time consuming, I decided to limit the number of style choices and locked the editor to one particular design, albeit a freaking good one. There was one colour scheme, a simple font option, and nothing too unusual in between. I then provided users the freedom to add their brand on top of the base layer, which is why I added customisable covers and logos.

The design principle behind the editor’s interface is to look as minimal and clean as possible so that whoever is creating the proposal can focus on the work without getting distracted or bogged down by other factors.

This is what the current version looks like:

This is the editor

This is the editor

This is how you create and change blocks.

This is how you create and change blocks.

Re-using existing content

Quite early on, I considered an import function for proposals; parts that don’t change so often, like an About section, a Team section, or a Case Study section. How great would it be to be able to quickly and easily import only the Case Studies relevant to a certain project?

Import section pop-up

Import section pop-up

After finishing work on a proposal, you can preview the whole document to see it through the eyes of the client.

For example:

Preview

Preview

Dashboard

I realised that proposals often share common structures and that when starting a new one, people often duplicate an old one before changing the contents.

I also wanted a search function that was smart and effortless to use, capable of filtering proposals by client, tags, project name etc. I experimented with templates and anything else that could make the process as easy and seamless as possible.

Initial sketches / Dashboard

Initial sketches / Dashboard

Dashboard (different layout) and Create New pop up / Initial sketches

Dashboard (different layout) and Create New pop up / Initial sketches

This is the final dashboard design:

Dashboard design

Dashboard design

The colours next to the proposal titles indicate its status and are coordinated with the colours found in the navigation panel.

Menu, active/inactive states

Menu, active/inactive states

Proppy is currently undergoing a heavy series of tests, and therefore we’re constantly improving it. It doesn’t yet have a finalised brand image, which is something I will be working on very soon.

If you want to learn more about the technology behind Proppy, the Wizards have written a fantastic post about it that tells you all you need to know.

The Children’s Society Digital Rebranding

Manifesto Digital / The Children’s Society

Design, UX, website

Prev

Want to work together?

Ask for a quote