This design brief template is used as a great conversation starter with clients. It is usually presented or emailed to the client at the beginning of a project or during the pitching phase. In it we hope to start dialogue between us and the client about what the overall business objectives are, who are the users we are servicing/championing, and understand more of what the organisation does as a whole. From there we can clearly identify what the deliverables will be, but also what we hope to achieve together.

When you are working on your project your brief becomes a guiding resource on whether or not you are on the right track. Remember understanding and creating the brief is just the beginning – having ongoing, open and collaborative communication with your clients is the key to thriving projects and great relationships. This leads to more repeat business and referrals.

This is freelance proposal + contract which is used before the commencement of a project. It outlines the exact deliverables and scope of a project, a timeline, pricing along with terms and conditions. What’s great about this proposal and contract is it protects you from scope creep. (Which means the client can’t ask for extras that are not related to your original contract/proposal. You won’t do a million changes and there is a defined timeline, after which the client will have to pay extra.)

It is worth noting that the contract protects you from scope creep. However if you have charged well you should try to go the extra mile for clients even if there are a few little additionals. (I charge based on value so I always have budget to go the extra mile for clients) It is a partnership and collaboration, and we are trying to help each other reach a mutual goal, so you should go the extra mile when appropriate. The contract is mainly for when we get ‘bad’ clients and it is mainly for protection when it comes to that. Also the proposal helps prospective clients see exactly what you are proposing.

Large scale proposals are a bit more detailed and bespoke to my freelance proposals. Which are quicker to put together. I would say once you are pitching for jobs over $100k, it is about being a lot more thorough. You can approach the problems+solution in your proposal, talk about your design process and methodologies, body of work, team and deliverables in great detail. There is a lot of red tape for larger projects to get the go ahead so it also comes down to how you pitch and present as well. A great proposal alone doesn’t win you job, but it definitely helps. Building trust with prospective clients is 100% the aim of the game.

You can compare this vs.freelance proposals and how they differ in their approach. Unlike a freelance proposal these large scale projects require more work in putting them together. The key is to think in the shoes of your prospective client and key decision maker. What would they need to know and trust in you to reward you the job? Think backwards from there. Please note: I’ve removed client names and changed some details for confidentiality but these are real proposals used during my agency days to win these large scale jobs.

This is an example of the invoices that I send off to clients. It covers all the key components needed for tax purposes and of course for you to get paid. You can use this template as reference to create your own. As a rule of thumb for new clients I always opt for 50% upfront payment. It ensures that you have the clients trust, that you’ve built great rapport leading up to signing which is very important. Because this trust will trickle down to how you collaborate with the client and how much they trust and respect your expertise. But also to protect you if the project goes south for whatever reason. I work with less clients per year that are higher value so the manual invoicing system works. However if you opt to have many clients there are great invoicing software out there – such as Harvest or Freshbooks.

The credentials doc takes on many different forms. The overall objective of a credentials document is to showcase expertise in a particular area to gain trust from prospective clients. It is used to showcase expertise and authority. Usually it displays a body of work that relates to the client's industry, project requirements (Apps, e-commerce, experiential, service design). Of course it is not limited to this and can also showcase specific areas that you are proficient in – UX methodologies, Design Process, tools you are proficient in for example. In my example you can see that I collated all my best ecommerce clients and projects. From large scale clients like Target, to Billabong to more bespoke clients. It presents the work in a beautiful visual manner but also gives context on the role I played on each project. This builds confidence from prospective clients. That’s the purpose and why you should pair your proposal and follow it up with a credentials document. Or to start with a credentials document and then send over a proposal.

The Design Vision doc is used to unite all key stakeholders with the overall design and project team. It outlines a set of values and overall “vision” for the direction that we want to take with the brand and/or product. Whether that’s a site, app, service or experience. It is to say this is what we are about, when you design or create use this “vision” and information as the overall guiding principle. When do you create or use a design vision doc. It is usually created right at the end of the product creation or at the very beginning. When there is fragmented thinking on what the overall experience should be between designs, developers and stakeholders. Then the design vision doc is great for everyone to get buy in together and say ok this is what are making and this is what we are aiming for.

The Lean UX canvas is a great framework to use as the basis for covering the essential elements of a project, to champion the user whilst meeting business outcomes. You can use the Lean UX canvas with the design brief, or you can use it as an outline to run client workshops to discuss the core components of a project. This canvas is a great beginners guide for laying the foundation and information needed to design great user experiences. This framework is from Jeff Gothelf and I’ve kept it true to his document. Whilst in my own work I don’t codify each phase as a step by step process I definitely cover all these elements. Coupled with this information and Design Thinking, that is my overall process. Once you get a grasp of it you can be more fluid with how you translate and interpret the data. Once you’ve gained confidence you can start customising the process and workflow that works best for you and your clients.

Personas are the embodiment of all the information and research we gain from the user insight phase. (Refer to your Lean UX canvas) I will caveat by saying not every project needs personas, but if you have time it is great to bring life to the users you are representing. The persona templates I use are very simple – some ad agencies with $1 million+ budgets go ham with these and get super detailed. I use them mainly to remember that “hey this is who you’re designing for”, this is who you need to impress and they represent all the info and data we’ve collected thus far. It helps to give meaning to the client/stakeholders that we are designing for real people and not just for pixels on a screen or solely for business objectives. Good design and user experiences lead to great business. Use personas in your work and couple them with user stories. As you build out designs and user flows.

Moodboards and Styleboards are great for exploring different approaches to the Art direction without committing too on each concept. You can create a lot of different approaches and select the best one. Clients get to have early input in the process and get a higher sense of collaboration and ownership on the work. Moodboards are a collection of references such as images or videos that capture the essence of the end result we want. They come from existing examples. Moodboards are perfect when you need to communicate the visual direction in a broader sense. Styleboards display the look and feel at a more detailed level than a moodboard. They can sometimes show components, typography and colour that is custom designed for the project. Styleboards are perfect when you need to get more detailed and specfiic.

These are example files of how I setup my design projects. And in this case a responsive ecommerce site. The main thing to notice is the use of a grid system - columns and baselines. Consistent spacing, typography and styles. Every project's deliverables are different. Depending on where in the design process you are introduced the output will vary. Ideally all projects should have every screen designed. However due to timelines and project complexities this is not always feasible. When collaborating make sure your files are logical and thoughtfully constructed, so that designers, developers and others can easily understand how things are laid out. If time permits create a UI Kit or styleguide so you can have all components, type structure, icons, colours all in 1 location. For large ongoing digital products having a design system and living styleguide is hugely beneficial. So when designing think of systems, user flows, user journeys, how should users feel and how can we give meaning to that through interactions and visual design.

These are example files of how I setup my design projects. And in this case a responsive ecommerce site. The main thing to notice is the use of a grid system - columns and baselines. Consistent spacing, typography and styles. Every project's deliverables are different. Depending on where in the design process you are introduced the output will vary. Ideally all projects should have every screen designed. However due to timelines and project complexities this is not always feasible. When collaborating make sure your files are logical and thoughtfully constructed, so that designers, developers and others can easily understand how things are laid out. If time permits create a UI Kit or styleguide so you can have all components, type structure, icons, colours all in 1 location. For large ongoing digital products having a design system and living styleguide is hugely beneficial. So when designing think of systems, user flows, user journeys, how should users feel and how can we give meaning to that through interactions and visual design.

Prototypes are great for doing user testing and also to communicate how something functions and feels. It’s also great for getting by in from clients. Prototypes allow us to quickly make our designs tangible and tactile. Allowing us to iterate, feel and experience how something flows, how something works and what I like to call the “x” factor. Whether everything flows and feels seamless. Once we reach that point we’ve done our job. In the example I’ve attached are some principle files and some exported videos of the prototypes in action that I send to clients. But there are many tools for prototyping. I also use invision to prototype flows of all key pages and use that for user testing. The key with prototypes is to make things feel tangible early on. Users will interact with living and interactive designs not flat pixels in Sketch/Photoshop/Figma/Your design tool. The quicker you make prototypes the quicker can actualise how a product should be, and how users will receive it. Use whatever tool you are comfortable with to prototype. I use Principle and Invision but there are other great tools out there.

UI Kits and style guides are great for when you need to update work, are collaborating on a big team as it allows re-usability and a defined system, and also increases efficiency for you to build screens quickly. Particularly useful for large complex sites and apps. It also promotes consistency and cohesiveness in your designs. I don’t have an exact formula on when you should create a UI Kit whether that’s at the start, middle or end of the project. Do what works for you and your team. Most projects of mine I vary it up. I tend to have wires, user flows, user stories and then design a few screens to get a feel for where I’m heading. From there the UI Kit will come into play. UI Kits also adhere to Atomic Design by Brad Frost. However my preferred thinking and method is the Full Stack Design System proposed by intercom. You can read through both methods and take a look at my UI Kit as reference to create your own.

You’ll need to visit Zeplin and login with the below details to see this Zeplin + Sketch example.

login: Source_students
password: Source

This is what I use for dev handoff. It helps streamline things with developers and makes their life easier. Zeplin has assets such as images and icons available to download in one place, along with spacing, colours, type styles and basic CSS that can be used and repurposed. There are also notes attached. The pages are tagged based on breakpoint and categorised by page type. Depending on your project you can use different tags and categories. This is only a project preview, for full projects we’d have interactive examples and ideally every page and flow laid out. You can learn more about Zeplin on their site and through their video walkthroughs/tutorials.

The living styleguide is a system that streamlines the work of designers and developers. It takes the concept of the UI Kit and take its one step further by making it more modular and integrating it with code. It becomes a key resource that the product team can access at anytime to create new pages, flows, sites or systems.