Welcome Guest! Login
0 items Join Now

RocketTheme Blog

Tips for Presenting Website Mockups to Clients


A lot of our customers at RocketTheme are Web developers that use our products to build sites for clients. This process includes several phases of production, including the initial mockup, early build, and final reveal.

At any point during this process, customers can and often will change their opinion about how their site should look or function. These changes can add time to development, as well as overall complexity to the project.

In this article, we’ll go over some tips to help you avoid confusion late in the development cycle, as well as present your vision in a way that is clear and easy for the client to follow.

Take Detailed Notes During the Initial Consult

The initial consult where you are learning what the client needs from their site is the single most important meeting throughout the development process.

This is where you can ask as many questions as you can to understand not only the functional requirements of the site, but about the customer’s style and visual tastes.

Before the consultation, ask them to find five websites that they like, encouraging them to look in an industry similar to their own. If they run a bakery, consider asking them to send you links via email before the meeting of other bakery sites they like, and what they like most about them.

This not only enables you to get a clear idea of what their tastes are, but also gives you a set of questions to present during the meeting in order to further define their needs.

Take detailed notes, or ask if it’s ok that you make an audio recording of the initial consultation. This will prove important later on when you’re gauging which features absolutely must appear in the initial mockup.

Consider How Users will Navigate First

Matt Perry, a Web developer and member of the RocketTheme moderator team, noted: "I always build and present navigation/site-map first. Once it is approved, I build mockup pages to match the sitemap."

If the site is a house, it’s navigational structure is the framework. This should be considered first and foremost as it determines not only how the site will flow, but what will be required for user navigation.

Perry added, "Once the sitemap is complete, the client is usually responsible for providing content to fill those pages."

Content is key, and how this content is written and presented depends greatly on the site’s general flow. If the short bio of the brand is on the front page, it will be presented differently than if it was in its own about page. By getting navigation down first, you set both yourself and your customer up for success during the next phase.

Make One Mockup

Once you are armed with the information from the first meeting, create one mockup image of the site. This gives you a single point of reference from which to build, and avoids the possibility that the customer will feel choice paralysis.

By presenting more than one initial mockup, you aren’t just giving the customer a choice. You are presenting them with two entirely different sets of features, and it is far more likely they will pick and choose bits and pieces of each of the selections rather than offering critique on a single working piece.

It also gives them the impression that you do not have confidence in your first design.

Make it clear what the mockup is, and be ready to have each part of it critiqued.

You can even go so far as to print out your mockup and take a marker or pen to it during the meeting, noting each change they’d like to have made so that you (and them) have a visual guide of what needs to be done during the next phase.

Remember the Details

Pär Andersson, a Web developer and moderator of the RocketTheme forums, recommends, "Mockups should also have a social element where your customers can rate, comment, and/or share pages. This is often an afterthought."

Often, the initial mockup of a site includes the main features, and not the extra bits and pieces that are usually added during the final build. Comment boxes, contact forms, and share buttons are an important part of a modern site, and shouldn’t be overlooked during the initial mockup phase.

Make it Personal to the Brand

Don’t be afraid to ask for photos taken of the company, its products, and its staff. Using stock photography in mockups, and even the initial final build is common, but it doesn’t connect as well with the customer as brand-specific photos would.

Andersson noted, "Avoid using stock photography in your mockups. If the stock photos in the mockup are good enough, the company will buy it and replace the text."

This could be a disservice to the company down the line, as stock photography is made to be used as an example, rather than being representative of the brand.

If you are building a site for a church, having photos of its congregation instead of stock photos will have a much bigger impact not only on the client, but their customers.

Send Mockups as Images or PDF Files

If meeting in person isn’t an option, you can send your customer image files of the mockup via email.

This avoids any confusion caused by sending them to an early development build of the site, which is likely to be incomplete and/or not fully functional.

For a multi-page site, a multi-page PDF is a popular option. It not only gives the client a clean, printable example of the design, but gives them a much easier to follow page-by-page file to browse through.

Build in Contingencies and Prepare to Pivot

Even during the final stages of development, when the site is being polished and made ready for the final reveal, the customer can and often will have major change in mind.

Communicate frequently with them. Give them verbal updates about progress, and assure them that their needs are being met. If the customer has any doubt, they will often look for ways to improve on the design themselves after the fact.

You should build a contingency budget into your initial proposal. This will ensure that you have room to make changes during development without forcing an uncomfortable conversation of additional fees or undue pushback early into the relationship.

Make it clear, however, that there is a point in development where changes are no longer possible. Either during a mid-development meeting or within a certain number of days of the initial mockup approval.

At the end of the day, your ability to pivot is what separates you from the competition. If you are exceptionally good at receiving late critique and pivoting around it, you will be far more likely to receive future business from the client, and anyone they recommend you to.

Present the Final Draft and Prepare to Take Questions

Presenting the final build should be done in person whenever possible. This enables you to not only give a guided tour through the site, but to give your clients the ability to ask questions and make any last-minute requests.

Be prepared to answer anything the customer might ask. This includes questions about how to host the site, what maintenance requirements the site has, and more.

This is an opportunity for you to not only get final approval for your creation, but to offer additional services, such as finding and managing hosting or offering periodic maintenance such as updates on the CMS.

You can also take this time to present the customer with a guide to help them get started in adding their own content to the site, especially in the case that they’re using a CMS such as Joomla or WordPress.

Your customer will appreciate the level of detail and care that goes into the project, and will appreciate having been able to have a clear understanding of the process from the beginning.

These tips may not cover all of the situations that come up during the mockup and draft presentations, but they should help you avoid some of the more common issues that occur.

Do you have a tip to share? Leave it in the comments section below.

Join the Conversation

comments powered by Disqus