How to Present a Web Design to the Client
The design phase of creating a website is fairly standard for most web designers. However some problems can arise. In this article, we’ll share some secrets of an effective presentation. It’s originally from instantshift.com. InstantShift is leading design and inspiration related community for web designers and developers daily resource, inspiration and premium web design and development. About the author: Daryna Pukha is a skilled writer at software development company RubyGarage. She enjoys reading and searching about latest web design projects, marketing trends, business practices, and technology advances. She’s been contributing to various blogging platforms covering these topics. Image courtesy of cookiestudio via Bigstockphoto.
The success of your design relies not only on your ability to create something visually appealing but also on your ability to sell it.
As a professional designer, you should know how to communicate with your client and present your product in the best possible way. The better your presentation, the better chance your project will be approved.
In this article, we’ll share some secrets of an effective presentation and some tricks to make your clients fall in love with your work. We’ll start with the number of options you should present your customer with.
How Many Design Options Should I Present?
Sheena Iyengar, a world-renowned expert on choices and decision-making, says that a variety of choices may draw consumers’ attention but at the same time overwhelm and confuse them. That is, given too many consumers will just pick something even if it might not be the best option.
Why present multiple options including ones you’re not so sure about? If you offer too many options, your client may very well ignore your favorite design. This is why we recommend presenting only the final prototype.
This doesn’t mean you should show just one picture, though. Tell the whole story from the very start, providing snapshots of your project at various stages. Explain the decisions you’ve made and how they meet your client’s business goals. Guide your client through all the iterations you’ve gone through to come up with a solution to their problem. This will speak to your expertise and prove that you’ve not simply redrawn an existing design but rather performed a large amount of work.
The main character in your design story is you. Clients will watch and judge you by your words and actions. Therefore, you’d better think about what you’ll say in advance.
How to Charm Clients with Your Presentation
Sometimes, when presenting your design, you can set off a flurry of speculation, disclose too much information or make your client bored. Obviously, that’s not what you really want to do. If you want to deliver a smooth presentation, try to arrange it using these five steps:
#1. Formulate the Problem
What should you do first? Set expectations for your audience: announce what your clients are about to see and what they’ll get out of it. Formulate the problem posed at your first meeting, the assignment you’ve been working on (e.g. to create a fast and great design for a web fitness app), and the approaches you’ve used to handle this problem.
Alternatively, you can start with a quick recap of what your clients have already seen: the last design, an existing product or a re-designed item. You may also touch on the last feedback your clients gave. By doing this,e you’ll lay the groundwork for your main presentation and avoid needless questions.
#2. Address Your Client’s Business
Try to make your presentation more personal. Discuss your client’s brand and their target audience. Your aim is to show that you understand your client’s business. Suppose you’re designing a website for the Soft Blankets company. This website needs to reflect the company’s range of products and prices as well as convey a feeling of warmth and coziness to customers.
You can enrich both your mockups and the final design with your client’s company photos instead of stock photography. For instance, if you’re building a charity website, real photos of a charity auction the company held will have a much bigger impact on your clients and their prospective patrons.
#3. Describe the Design Process
Give a short description of each individual phase of your design process and talk about the information you’ve gained. You should underline as well the ways you leveraged this information to improve the overall design. Here it’s quite important to present the design components as benefits for your client’s business. For example, you might explain that you used more red for a fast food website as it increases a customer’s appetite and may encourage customers to order more food. Now the secret of McDonald’s and KFC is revealed.
#4. Hold a Conversation
A design presentation is a conversation. If you want to get informed feedback, answer questions when they arise and explain anything your client has missed. Make sure that your presentation is clear to your client and that you’re on the same page. Besides, constructive dialog may bring new ideas and solutions.
#5. Gather Feedback
The last and probably most important step is to obtain feedback. Give your clients some time to appraise your work. The time you need to wait depends on your client, their workload and the size of your project. Obviously, large projects take more time to review than small ones. Don’t panic if your client doesn’t respond in the first three days. The website you’ve designed is a big part of your client’s business and they need to be sure it will win their audience.
How to Collect Feedback the Right Way
Sometimes, however, you may work hard and still receive feedback that’s useless or that you can’t manage properly, or the response may take months. How can you avoid such a situation and set the right direction for your clients? Just follow these tips.
1. Plan Ahead
We advise that you clarify all issues prior to collecting feedback. Set a specific date on which your client will provide feedback on your work. Take this date seriously. It would be nice from your side to remind your client about the feedback date a few days in advance. You should also agree on the form of feedback – whether via call, email, or in person.
2. Ask Focused Questions
Quite often, design presentations turn entirely into discussions on content. Clearly, some content discussions are expected, but your client shouldn’t devote all of their feedback to this theme. If you want to get useful feedback, ask specific questions and direct conversation to what you’d really like to hear feedback about.
Don’t ask your clients “What do you think?” Instead, ask them whether this concept meets their business goals or in what ways it fails to do so, or ask them whether the color palette fits the brand positioning.
3. Grasp the True Meaning
While commenting on your project, clients frequently propose solutions rather than point out the problem: “Can you make this button bigger? Can you add more green?” Your task is to identify the core problem or challenge hiding in that feedback.
Always ask them why: “Why do you want this button to be bigger? Why do you think that more green will be better for your website?” Dustin Curtis, founder of Svbtle, asks at least three questions to his clients about their opinions.
4. Apply Logic and Cite Famous Brands
If you don’t share the same opinion as your client, don’t start to criticize and discredit them. Back up your arguments with facts, studies and research instead. Let these facts speak for themselves. Additionally, you can cite famous companies as examples.
Imagine that your client asked you to reduce the font size from 22pt to 12pt. In this case, you could respond with something like “That’s an interesting point. But you know, I recently read a study showing that larger font sizes can arouse stronger emotional connections with a brand. By the way, Medium also uses 22pt font.”
And don’t use phrases that fall into the “I told you so” style. Try to show empathy: “Yes, I was shocked when I heard this too.”
5. Respect Your Client’s Opinion
Even though you likely have much more experience in web design, your client still knows their business better than you. It’s they who will be using the design on a daily basis. So they need to feel comfortable with the website you’ve designed.
If your client remains unsatisfied with your design, revise your work together. Try to find a compromise and adapt the design based on your client’s feedback. Remember that symbiosis of your client’s knowledge and your experience may bear a genuinely successful product.
Now you already know the theoretical part: how to act and what to say while presenting your design work. Yet it’s not clear in what form you should frame your design. What should your prototype look like?
What Type of Prototype Should I Choose?
We can’t give you a universal answer and say “just draw it like this.” But we can ease your job by offering you some handy tips about prototyping flow. We advise you to choose the type of prototype and the tools you use to create it based on the design stage you’re currently in – either the early stage or the final stage. Let’s take a closer look at both of these stages.
Early Stage
The early stage is when you think through the logic and functionality of the website: layout, features, connections and transitions. With your target audience in mind, you form elements that will make the website intuitive for users. Your main goal is to check the product’s operability.
Therefore, at this stage, you can present a low-fidelity prototype in the form of simple schematic screens usually in basic colors and without visual effects or details.
To design a low-fidelity prototype, you can try out the following tools:
- Wireframe.cc – One of the most basic tools that designers can use to create wireframes. Its main advantages are its simple interface and the possibility to start designing wireframes immediately without any signup.
- Moqups.com – A web app that helps you create wireframes, mockups and prototypes. Moqups offers a built-in library with thousands of icon sets, cloud-based storage, and comments and feedback features.
- Pencil Project (pencil.evolus.vn) – A free and open-source prototyping tool for both desktop and mobile platforms. Pencil Project provides built-in collections (shapes, flowchart elements, etc.), diagram drawing support and inter-page linking.
With a low-fidelity prototype you need to be careful, as you can face misunderstandings and negative remarks from your client’s side: “Why are the screens so simple? Why did you use such a poor color scheme?” If this happens, take the time to explain to your client what the UX is and how it’s important for their product – that UX is the heart and soul of their future website – and that this prototype is far from the final version.
Final Stage
At the final stage, you need to deliver a high-fidelity prototype to your customer: add interactive elements such as micro interactions, navigation from screen to screen and other animations.
A high-fidelity prototype is a computer-based interactive representation made as close to the final design as possible (in terms of details and functionality) to allow your client to examine the product’s usability and make conclusions about user behavior.
High-fidelity prototypes let you feel transitions and functions of the website more realistically than low-fidelity ones and reveal potential bugs or difficulties at this stage before creating the UI.
If you’re not sure what tools to use to animate your prototype, try these:
- InVision (invisionapp.com) – A digital product design platform that allows you create interactive prototypes in a matter of minutes. Using InVision, you can create stylesheets and generate real code for any design element. Moreover, InVision lets your clients, team members and stakeholders comment directly on your designs.
- Adobe XD (adobe.com/products/xd.html) – The all-in-one UI/UX solution that helps you turn your static layout into an interactive prototype in one click. Using Adobe XD, your prototype updates automatically with every change you make: no syncing required.
- Principle (principleformac.com) – A prototyping tool that lets you design animated and interactive user interfaces no matter if you’re designing the flow of a multi-screen app or new animations and interactions.
Are You Ready to Present Your Web Design?
The form in which you present your design depends on the kind of product, what design components you’re presenting (e.g. layout or functionality) and the stage of the design process you’re in. At the early stage, you can stick with low-fidelity prototypes, whereas the late stage requires you to approach the final product as soon as possible and deliver a high-fidelity interactive prototype.
Of course, the success of your presentation lies in your confidence and the data you possess: keep facts and logic-based arguments at hand to support your opinions. And don’t be afraid to ask your client “why?”.