If you’ve ever been involved in the process of creating a new website, wittingly or not, you’ve followed a web design process. Whether this was formalized or not, whether you were aware of it (or not), you still went through a number of design process steps, until you finally reached the desired outcome – a fully designed, developed, and launched website as per the original requirements.
BeeWits is also about optimizing all of the steps of the web design process.
Today, we’re going to discuss these in detail and show you how to optimize each and every part of the design process, such that the end result is what you (and most importantly the client) wanted.
1. Optimize your Web Design proposal
As a freelance web designer or a digital agency, if you’re looking to improve your bottom line, the first area which probably requires a lot of work (at least in our own opinion) is the web design proposal.
Too many web designers fail to close enough deals because they don’t “get” the web design proposal right. So if you want to optimize your web design process from top to bottom, your first stop is the web design proposal.
Contrary to what many web designers may think, a web design proposal is not about the features of the website and what fancy-schmancy design you will be designing and implementing.
It’s about how your website design is going to increase the bottom-line for your client.
That’s why, the web design proposal should focus on this core idea, rather than the actual website “look-and-feel”.
Of course, the look and feel, the design, the functionality, and features are going to be a determining factor on whether you close the sale or not.
If you eventually present a web design proposal for a website that looks like shit, you’re hardly likely to close any business.
Yet, if you really want to impress your potential client – you need to keep in mind that the website is meant as a tool to drive business. This should be the central theme around your web design proposal.
We’ve already covered fully [How to] Write a Winning Web Design Proposal (Every Time) so we won’t go through this in too much detail here, but we’ll briefly outline the necessary steps.
- Beautify your web design proposal – Just like your web design process involves creating a beautifully designed website, so should your web design proposal be beautifully designed. Because really, if you want to showman your design skill, what better way than designing a beautiful web design proposal?
- Research the client and tailor the tone of voice – this is also going to help pave the way for when you actually win the project. A critical requirement of your success is your extensive knowledge of the client. So if you’re not fully familiar with the client, you should fully acquaint yourself with the client and their tone of voice – and use that knowledge in your proposal. This will have to be done anyway as part of your web design process, so might as well do it now – and do it right.
- Define the problem your website will solve – the web design project you’ve taken on board is probably not being done for the heck of it. There is a problem that needs to be clearly articulated and addressed. If you show the client that you fully understand the problem and can propose feasible ways of solving it, you’re halfway there.
- Show the client how the new website will solve their current problem – understanding and articulating the problem is great for your proposal, but proposing ways which can solve the problem, which the client can understand and relate to, is the key to winning the proposal. You need to speak the language of the client, no technical jargon, you need to speak to the client in terms they understand.
- Make sure you’re fully focused on mobile – the importance of mobile-first web design cannot be understated. In the age of ubiquitous smartphones, consumer-oriented sites are going to be getting more mobile traffic and anything else. Your website should not just be responsive, it needs to be centered around mobile – with functions and features designed primarily around mobile.
- Give a clear timeline of deliverables – an assertive, and ideally, aggressive implementation timeline will stimulate both your and the client to get the web design process implemented quickly and efficiently. If you can come up with a timeline that you are able to deliver on and promise the delivery to the client, in line with their own requirements, you’re going to reduce any potential barriers.
- Absolutely clear pricing information – this is another part in which a lot of proposals end up losing the business. Rather than the actual price of services, it’s how they describe the price of services which is the problem. You need to break the pricing down to terms which the client once again is able to understand. Breaking the proposal down into various parts makes the pricing more digestible and understandable. If you can also calculate the ROI of the website design, you can make a much better case for the web design. So if you price the proposal as 10% of revenue for the first year, that’s much easier to digest and to sell. If you can make clear conversion improvements, and estimate the revenue boost based on these optimizations, and actually work them into the pricing, you’re setting yourself up for a win.
These are the essential parts of creating a winning web design proposal – but we’d highly recommend visiting our article and giving it a thorough read!
2. Identify the exact goal(s) – set a SMART target
So once you’ve submitted your web design proposal, maybe had a few meetings with the client, and finally actually got contracted, it’s time to set the ball rolling.
(N.B. – Two things which you always should get done as soon as you get an approval: 1) Sign a web design contract, 2) Get an initial deposit. Both of these are designed to ensure both you and the client are fully-committed to the project).
If you want your web design process to result in a successful project, you need to know exactly where you want to arrive. You need to define your exact goals.
You’ve probably already worked on this as part of your web design proposal, but you’ll want to revisit this based on any feedback which you might have gotten during the negotiation phases.
But how do you go about defining the exact goals you need to do?
First of all, you need to follow the SMART philosophy.
- Specific (simple, sensible, significant) – in terms of the web design process, we’d recommend a significant goal, which would include the bottom line. Increase the conversion ratio from 3% to 10%. Increase online revenue by 200%. Increase online sales revenue to 40% of the total. You get the idea. Be very specific. Don’t aim for something which is design-related – aim for something which is business-oriented.
- Measurable (meaningful, motivating) – on our previous examples, we made it very clear that the goal we want to choose has to be measurable. If you can’t measure it, you won’t know whether you’ve achieved it.
- Achievable (agreed, attainable) – we do like the idea of aggressive growth, but never set yourself unrealistic targets. If your client is a small business, sit with them, and work out the best and worst-case scenarios. You should aim for the best-case scenario of course because this is what provides the best value.
- Relevant (reasonable, realistic, and resourced, results-based) – your goal, should always be relevant to the business. Once again, we focus on revenue and bottom-line as opposed to let’s say, website traffic, is because revenue is relevant. If you set traffic as your goal, and get traffic that doesn’t convert, you’ve reached a goal which is not relevant to the business.
- Time-bound (time-based, time-limited, time/cost limited, timely, time-sensitive).
The above are all great in theory, so let’s go down to a few specific things you’ll need to do as part of the web design process optimization.
First of all, identify the website user personas.
- Who are the people visiting the website?
- What specific demographics are they? Men / Women? Both? Ages? Interests? Intent?
- Are they for information?
- Are they looking to acquire something?
- Are they looking to book a service, restaurant, want to buy something specific?
Define a website user persona
These are a few of the questions you may want to ask yourself in the process of identifying your ideal user persona.
Second, you need to fully understand your client.
- What are their strengths?
- Who are their competitors?
- What kind of product/service do they offer?
There’s a whole bunch of questions that you’ll need to get answered such that you’re fully aware of the “circumstances” of your web design client.
To optimize the efficiency of the web design process, we’ve actually fully defined a web design questionnaire (70+ questions) – these are all the questions you need to ask your client such that you fully understand who they are.
The great thing about this questionnaire (besides the fact that it’s asking all the right questions), is that it’s fully available for download. You can just attach the questionnaire to an email and send it off to your client.
Once you’ve fully understood your client and their circumstances, you’re in a much better position to identify and set a SMART goal for the web design process you’re about to undertake.
Just so that we’re not theoretical without giving any practical examples, let’s give a few examples of achievable goals.
- Get 20% more orders from the website
- Increase the time-on-site on mobile from 30 seconds to 2+ minutes
- Increase sales conversion ratio to 10% of traffic
- Increase email conversion ratio to 20%
- Generate 20% of revenue from direct online sales
These are all totally business-oriented web design goals. In one way or another, most of these have a direct effect on the bottom-line. Once you’ve set your goals, you’re ready for the optimizing the next phases of the web design process.
3. Create a winning web design focused on desired persona actions
We’re now at the point where we can start the actual designs. It’s great though that we’ve spent quite a lot of time PLANNING for our web design before we started developing and designing. In reality, the optimization of the web design process is all about making sure you’re planning to do things correctly from the get-go.
At this point, you’re ready to start scribbling your designs.
But how do we actually achieve the goals we described in the previous phase? Since you’re starting from a blank slate, you’ll need to actually ensure you do the following:
Focus on the desired actions of the various personas from the start, rather than as an afterthought.
In essence, whatever the goal for your site is, you should design your website for that specific goal.
The phase where most web design fails is this, they design a pretty website, designed around beautifying the brand, without giving enough focus to the ultimate goals of the site. The goal is then added in when the website is complete.
Got a website where you need to push for a software trial? Design your website to push people towards trying the software.
Are you looking to increase product conversions from mobile? You need to make it as easy as possible to press the “Buy Now” button on a mobile device.
Are you looking to boost email conversion rates? Design the site such that content upgrades and other email conversion mechanisms are at the forefront of the design, rather than as an afterthought.
The goal(s) for your website should be the guiding principle of your designs.
Make sure you’re thinking of the sales funnel as you are designing.
If you think of the goals of your site during the design, reaching your goals are a given.
Now, good designers are probably one of the more expensive resources. So when you ask them to design, you need to make sure you’re sending them a good design.
So how do you go about creating good specs for the designers, which you know will require minimal modifications following complete?
Wireframe your web design
Why are wireframes an essential part of web design? Wireframes are able to give all the stakeholders a feel of what the web design is going to look like, before actually fully committing with the designers and developers.
Just like we mentioned above, designers (and developers) are expensive resources, both because of the nature of the job, but also because of the length of time these types of jobs take.
Wireframes ensure that you’re designing the correct final product, without expending much time and money on (potentially incorrect) designs.
That’s because quick, drag and drop wireframes can be put together in a matter of hours, as opposed to the weeks of work typically required by designers and developers.
Have a look at the following mockup. Such a page takes a few hours to complete. It’s also trivial to move stuff around because unlike a designer’s designs, wireframes are meant to be draft mockups, rather than pixel-perfect designs.
Once the internal team is happy with the wireframes, you can present them to the client and get a first-round of approvals. It’s very important that you keep a firm grip on what will modifications will be allowed. Besides slipping the timeframes of project and scope creep, design by committee is a sure way to kill a project.
Design your design!
Once you’re happy that all of your essentials goals have found their rightful place in the designs, it’s time to get the designers to complete your design.
Of course, you’ll have to create a detailed design brief, now based on both the mockups and your original proposal. We won’t go into details of a web design brief here, but you’re going to have to use much of the information you’ve obtained through the web design questionnaire.
But what if you’re actually using a ready-made template? Well, most premium templates today are very nicely designed with user intent in mind. Plenty of good integration with good Calls To Action as necessary. You can then supplement any missing CTAs using the page builders provided with most of the premium templates today.
On to the next phase of our web design process – the development and the content updates.
4. Development + Content Creation
Once you’ve done all of the above parts of the web design process, the development and content creation should be pretty straightforward, since most of the strategy for this site is in place. At this point, it’s mostly a question of execution.
There’s still plenty of ways you can make sure this phase of the web design process is as efficient as possible.
Let’s speak about the development team first. While there’s some development done in-house, most teams are actually going the outsourcing way – there’s never been a better time to outsource. Prices are right, communication is (usually) top-notch and most teams are fully-equipped for outsourcing (and offshoring).
This goes for both the supplier and the provider of the outsourcing work – Eastern European countries, Pakistan, India, and Bangladesh have all got plenty of talent, although, finding the right team, usually feels like looking for a needle in a haystack.
In reality, the first part of making your development team as efficient as possible is finding the right development partners.
This can make or break your project. And in reality, your whole business. Finding a good, reliable development team is essential to your web design success.
We’ll provide here a quick overview of how we do it – though this is a bit more complex than this in reality.
The development team hiring process (outsourcing)
Your development team hiring process, of course, should start prior to the web design process. Your development team should be sourced and “on standby”, in the sense that, if you try to hire developers on-demand, you’re going to get one of the things. Either very bad developers or very expensive developers – unless you get lucky.
The ideal way of hiring developers is through vetted outsourcing companies such as Toptal, rather than through something such as Upwork. Prevetted developer directories have already done the vetting process for you – though this is going to come at a cost – prevetted developers typically don’t come cheap, but then you get what you pay for. You might want to see whether you’d like to hire from Toptal compared to Upwork.
If you’re opting to perform your own developer search, you’ll want to start with a small, sample job first, rather than anything which needs to go to a client. You’ll want to start with something expendable.
Create an excellent project brief, which explains all of the details of the web design/development job that you need.
Post the job on sites such as Upwork for a few days – then be ruthless in eliminating candidates where there is even a hit of unprofessionalism. The following can all get eliminated:
- Responses who don’t refer to your by your name or surname
- Responses with poor spelling or grammar
- Responses from countries which you’d rather not work with
- Lack of experience
- Price expectations beyond what you are ready to pay
- Other criteria you set yourself in the job description (which have not been followed)
Once you’ve eliminated the vast majority of your applicants, you can choose two or three to run a paid trial with. Send them the exact same job, with a set deadline.
The outcome and result of the job should put you in quite a clear position which of the applicants seem to be a good fit. If you find multiple good developers, so much the better, you’ll have a backup in case one of them is unavailable.
The development process
Once the team has been set, you can actually start with the development work. Send the approved designs to the developers, so they can use it as their blueprint for development.
Now, with all due respect to developers (I’m an ex-developer myself!), most developers (at least the ones I’ve worked with) tend to not be as perfectionists as, let’s say, a designer.
Designers tend to be quite picky with results, developers, on the other hand, are mostly glad to get the work out of the door, and testing be damned.
That’s something which you’ll have to take in your stride. To resolve this, you’ll need to put a process in place which actually handles this.
Let me explain how we do this with Wrike.
First, the project manager or project owner sets all of the development tasks which need to get done to the various developers. As soon as a task is assigned to a specific user in BeeWits, that user gets an email notification.
Now – and this is the important part. The developer should NEVER mark the task as Done.
It’s the project owner who decides when a task is Done, and does the “Closing” of the task.
So when a developer completes the task (or say they did), they should assign the task back to the project owner (or task owner) – and another notification is sent to the task owner accordingly. The task owner is then responsible for doing the testing of that development task (or assign a tester to do this). If there are issues (bugs) with that task, a comment is left on the task, and the item is assigned back to the developer.
This to and fro with the task keeps on going until the task owner is satisfied with the work on the task, and the task is then marked as Done by the project owner.
Create the website’s copy
Besides how your website is going to look, one of the most important “assets” your website will contain, which will make or break your success, is the website’s copy.
The look and feel are going to help build trust in your company (without which, your clients would never buy). But it’s the company, with the right triggers, which is going to actually compel them to buy from you.
Start thinking about a content marketing + SEO strategy
Besides the actual copy for such pages as the About Us page, landing pages, the home page, and other crucial pages, you’ll have to actually conceive a content marketing plan for driving traffic to your website.
To do that, you’ll do to do sufficient keyword research, to determine how users (local or international) typically search for the product or service you’re selling.
In reality, we’ll be skipping this part, since it’s much too vast a topic. We’ve mentioned it here because it is another essential piece of the web design process, which needs to be given its due importance.
Iterative Client Approvals
Now that you’re in a phase where the site is being developed and tested (as per the above process), you’ll want to run it by the client to get any feedback.
This is another important part of optimizing your web design process. Client approvals can go one of two ways:
- The good way – where the client is thrilled with the progress and result.
- The bad way, where the client keeps asking for drastic changes.
Let’s start with the good way. You should keep your client in the loop as often as possible. By keeping them informed of what’s going on every step of the way, you’ll always know that they’re on board with what you are doing.
It’s also much easier to fix any deviations which occur if you discover them early on in the project. By correcting the trajectory early, you’ll eliminate the need for complex rework further down the line.
Keeping the client informed matters.
Again, Wrike is the perfect way to give your client limited access to your projects such that they are kept in the loop.
You do that, first by inviting them to the Project team:
You can then mark any tasks you want to client to see as public, and tag them if you want their direct feedback. By allowing the project’s internal team to decide which tasks and content is visible, and what isn’t, you’ll maintain full control of the visibility of the project.
It is recommended to update the client on the project, at least every two weeks, or whenever major updates have happened to the web design.
Now, if you don’t do this, you’ll probably end up with the client asking for drastic changes. Getting right, without client feedback, is no mean feat, and is typically more a question of luck than anything else.
If you don’t keep your client in the loop, that’s where the deadly scope-creep starts.
Make no mistake – scope-creep can throw your project off completely. Both in terms of time and budget, you need to make sure you don’t give in when the client starts asking for major changes.
Strictly speaking, you should actually already have put a limit on the number of revisions possible. These should also be limited in scope.
If the client does not play nice, you need to be friendly but firm that changes will impact both the deliverability of the project and the charges.
5. Testing your developed + designed website
Given that you’ve been optimizing your web design process, your technical and client testing phase should be quite short. In reality, most of the testing should have been completed during the development phase.
However, if you’ve been in development and web design for a while, you’ll probably know that Murphy’s Law likes to strike at the most inappropriate of times.
So, you still should pass your site through a final website review – to make sure you’ve not missed anything.
Technical and usability testing
Because we like to help you guys out, we’ve already built a huge Website Review checklist – so have a look at that now, bookmark it, and be ready to refer to it every time you’re about to review a site.
If your site is meant to be selling a product or service, funnel testing is essential – you need to really test the complete process and see that all of the moving parts have come together nicely. Besides actual technical testing, you should perform some real-user testing.
Ideally, you’ll get a few of your existing customers or visitors and send them to a beta version of the site. You’ll then monitor them closely to see how they are reacting, see whether they’re able to achieve what they need to perform.
Essentially, you’ll need to ensure that you’re achieving the goals which you set out to achieve at the beginning of the web design process.
6. Launch your new website
Really and truly, once you’ve completed all of the above – your launch should be pretty straightforward.
Switch off the old site (if there was one) and switch to the new one!
It’s as simple as that.
Of course, if you’re running a larger site, make sure you’ve set such stuff as good capacity hosting to handle the traffic. Make sure you’ve put performance monitors in place to ensure your site is not running slow (ruining any chances for conversion).
7. Monitor the new website design
After you’ve launched, your work is not done.
Remember we set a few SMART goals above? It’s not time to monitor the actual results, because the proof of the pudding is in the eating.
In web design, it’s not whether you or the customer, think you’ve created a great web design, it’s whether you’ve actually hit the targets you had set for the website at the start of the website design project.
Monitor your goals and KPIs
Set a few Key Performance Indicators based on the goals you’ve set and monitor them closely for a few weeks. Make sure you’re comparing apples-to-apples. If you’re running campaigns, or you’re in peak or low seasons, you can’t attribute the success (or failure) to the web design.
If you find there have been significant losses, you need to sift through the data and information you’ve gathered to figure out what’s going on. The data sometimes cannot give you the full picture, you need to go and investigate beyond that. Speak to the customer, analyse external factors, competitors, and dig deep before you come to a specific conclusion.
Monitor your user behavior
One of the most important things you can do to enable improvements on your new website design, is to actually monitor user behavior, for CRO (Conversion Rate Optimization) purposes.
By using such tools as Hotjar – you can monitor actual user behaviour, to help you discover key stumbling blocks in the visitor’s journey towards conversion.
We use Hotjar on most of our sites, and you can clearly see where users typically get “stuck”. Once you can see where problems lie, you can then get together and discuss a plan to tear down that wall. Doing this every few days or weeks will really help you make changes that can make significant differences.
8. Traffic generation
Once you can see that most of the web design is in place, you can now start ramping up the marketing efforts. We left the traffic generation to the last because the thing is this, ramping up your marketing efforts on a website that does not convert is a complete and utter waste of money.
Converting clients on an unoptimized website does not make much sense. It’s going to be expensive to bring people into your site, only to lose them once they’re there because your site has not been fully optimized for conversion.
We’re not going to go into the realm of traffic generation techniques. There’s too much to be said about that topic, and is typically, not the web designer’s primary aim.
There are plenty of avenues of traffic generation you can explore
- Social Media Marketing
- Content Marketing + Search Engine Optimization
- Pay Per Click Marketing / Search Engine Marketing
- Email Marketing
- Co-marketing / Co-promotions
It’s essential to get a blend of different traffic sources, just to be able to hedge your bets.
But we’ll leave that to the marketing guys.
9. Iterate and Improve your Web Design Process
The last thing we’re going to say about improving your webdesign process is this – don’t allow your website to gather the proverbial dust.
You should ALWAYS keep monitoring and improving your site. There’s always going to be things you can do better. You should always have “mini-projects” which allow you to keep pushing your website design to the next level.
By performing constant iterations and improvement, you’re guaranteed to keep pushing the results of your website, and reaping the benefits of the constant investment in the site.
What does your web design process look like? What suggestions can you make to further improve this process? What do you think of our own process?
Nice layout and definitely will help those just starting out. I know when I first got started there were no guides or really helpful tips. I’m talking about 20 years ago.
This great article has good pointers I can really use now as well. Keep the great work.
This is quite a bit of good and useful information to have and to review and digest. Anytime a process can be structured to make it overall easier to implement then it’s a good thing. So my hats off to the BeeWits author, David Attard, that put this great article together. Now, having said that let me also add the following: For a bunch of dedicated people that design websites what were you thinking when you designed the table of contents section at the very top of this article/page??? Orange text (yep, orange) on a gray (yep, again, gray) background. I can’t believe the author made such choices? Who ever did must have neon and ultraviolet receptors for eyes to be able to clearly read orange text on a gray background. And to make matters worse, the entire page uses a light-gray for text. This is such a common practice and problem (light text) with so many websites today and has resulted in the use and need of browser extensions to correct the really bad contrast to improve readability. I had to use my HighContrast Chrome extension to correct this problem. So, while I thank you folks for the great article, I have to also suggest that you eat your own dog food and design your web pages so that they comply with readability and contrast requirements – shame on you.