12 Steps for a Kickass Web Design Strategy

Table of Contents

What is Web Design Strategy?

The first impression that you make will matter a lot in the retention of your customers.

When did you ever see an outdated website making it to the first page of Google? It does not happen. Creating a web design strategy is the first step towards redesigning and optimizing your site to climb to the top of search engines rankings.

It is quite simple to come up with a template, change a few things, insert content and say that you have a website. It is quite another to have a website that will actually generate sales and revenue.

Web design is not just the aesthetic appeal of the website.

It is about how everything fits together to keep a visitor engaged and finally converts him or her.

We have already covered the content creation aspect in our earlier blogs, so we shall zero in on the factors that make for the physical design of a website, minus content.

In order to create a credible web design, it is imperative that you think strategically in order to have a clear direction as to all aspects of the design, which will achieve the common goal of bringing in converting traffic.

Basically, the web design strategy fuses your entire organizations goal through the design process. This is not a site that simply looks good, is accessible and usable. You are working on a site that accomplishes the objectives of the whole company.

There are so many websites that look great, have the latest design assets, but still, do not achieve the set goals. The way that you use the latest design trends into place should be alert and intellectual.

Why create a web design strategy?

There are certain reasons why the creation of a web design strategy is necessary. These include:

Purpose – This word is used a lot and is crucial. The purpose of the site will inform the web design process. If the site is to bring in leads, then it has to be designed in a way that will encourage people to sign up. If it has to convert, then it should be designed in a manner that will make people confident and buy your products or services.
Audiences – The design of a website should be guided by making design personas.
Brand Image – Brand image represents how your potential customers view your brand. You need to keep this in mind as you build your brand story.
Competition – If your competition has updated their web design, it may be time for you to update your too. What strategy will you use in order to counter the effect brought about by your competitors changing their design? Keeping an eye on the competition is very important. You may find major brands having teams that are dedicated to make these changes. But if you are low on resources, you can still do the same, one piece at a time. Make changes, measure results and move on to another change.
Design voice, tone and style – The voice, tone and style of your website can have the same effect on your target audience. The voice, tone and style should encourage people to buy from you, stay loyal to you, even if it costs them a bit more.
Directions – Web design direction refers to how the design guides the eye of the customer, through the content all the way down to your CTA.
Results – You need to have a clear design/redesign strategy in order to get the results you want. The strategy will address issues like CTAs, Inspirational landing pages that will make people dig deeper, kind of language that you use, kind of visual appeal speak directly to your target audience at first glance.
Gradual Design – You need to have a strategy on which elements will be used as they are, and which ones will be changed
Mood Board – A mood board is a collection of text, images and other media that can be used to generate inspiration in the design phase
Wireframes – They built for mobile phones and then go outwards to the desktop version. The wireframe is very basic and does not even need coloring or anything fancy
Responsiveness – This is one aspect of design that is making companies to redesign their websites. A fairly large portion of browsing comes from mobile phones. If your site is not responsive, you lose a lot of traffic and conversions. It is time to strategize on how to make your site responsive.
Optimization – Web optimization is about making the best buyer journey and it has to be properly done. At this point tests like A/B testing will be considered to find out which version or customer journey is the best for the business.
Third Paty tools – Any changes in third party tools will require you to change your website, and you must have a clear strategy over how you will integrate them. Sometimes a redesign, or new design will need to consider these tools.
Content – if you have a site that has plain text and you decide to start using videos for marketing, then you have to change the design to accommodate such content. If you want to add an infographic, the design has to change too.
Functionality – You may not realize it, but a web design strategy has to address the functionality of the site. The site should be user-friendly in every way. You should test the site, and ask others to test it too, and you must have a strategy for this. Functionality should address web design features that could improve how people react on the site.

1. The goals of web design

You need to define what the goals of the design process are. These will differ according to niche and other organizational differences.

It is not enough to just state that you want a better website. You must have goals that are clear, so you can build a functional website.

Some general goals that most websites should address in the design strategy are:

Improve interaction – The web design should be done in a manner that will quickly capture the attention of visitors, and then make sure they stay on the site.
Increase revenue – You are investing in a complete web design so you can get more money from your targeted audience. One of the main considerations by any CEO is the ROI. What returns will come from designing or redesigning a website?
Customer satisfaction – the user experience of using the website has to improve the final satisfaction that the customer achieves. Without such satisfaction, you will end up losing that customer and others like him or her.

Under customer satisfaction, remember that people want to get what they require and then move on to other business or issues in their lives. A site that is easy to navigate generally provides more satisfaction and will increase loyalty. Usability testing tools will come in handy when dealing with this aspect.

Integration of technology – a web design strategy has to address what other features will be used. Other systems, Security features and applications, scalability of the site and also its performance. These are all Information Technology aspects that should be addressed by the design strategy.
Streamlining – the web design should be streamlined to reduce costs and also automating some tasks and workflows. A simple example is by doing integration as above, and then streamlining the systems so they work fluently. Customer support systems, accounting software, CRM, etc. must all work together to make it easy for employees and customers to work effectively.
Employee – the website must support your current employees and also attract new ones. This may seem a small aspect, but it is critical for the employees to be able to work effectively and efficiently through the site.
Marketing – you cannot do a web design without strategizing on how it will market your products or services.
Sales – The web design strategy has to improve the sales process. It will be easy for the sales team to interact with potential customers, thereby closing more sales, if the website is well designed.

2. Target Audience and web design personas

The design of a website should be guided by making design personas. This is somewhat different from content personas. The web design personas will help determine the target audience of real people.

The design personas are more about how different people interact with the web interface, rather than the content they read.

Web persons should be differentiated by browsing habits and not content consumption.

A target design audience may inform you that women between ages 40 to 45 are better at donating money to schools. A design persona will add more details, like these are mothers of children who go to school, and are happy to educate the kinds on how to help.

This will inform you to add a video in the web design, showing kids helping other kids, and this will increase retention on the site for these mothers.

In the case of John, the construction company owner, the web design personas of his target will define the web design.

They are corporate investors or other individual investors who would rather go through a corporate design and not a site that resembles a video game store. The colors should be subtle and have very clear pictures of the properties he has constructed in the past.

A credible and professional “About Us” page should be carefully designed to give detail and also increase confidence in the investors.

Proper information on the contact of the company is paramount.

In the case of mark, who is starting a school, the web design personas should have a more relaxed browsing habit. They would be attracted to a colorful website that displays the playful learning atmosphere of the school. Bright colors and lots of images will work very well here.

The design can be casual, but also easy to browse. It is a delicate balancing act between being casual and being unprofessional, by going too far in adding too much fanfare to a website

Clear directions to the school are the crucial information, apart from the images and content.

As you can see, the niche determines the design, since the target audience differs.

3. Brand Image in web design strategy

In web design, the brand image represents how your potential customers view your brand. You need to keep this in mind as you build your brand story.

The brand story is a promise that you make to clients about helping them meet their pain points using your products and services. You need to create one that is believable in order to have tangible results.

Now you may be saying that a great logo makes a good brand image, but this is not always the case.

The brand image is about the core element f your business, combined with others, which come together to form the whole brand. With a poor brand image, not even advertising will work out for your business.

Brand image is the differentiator that sets you apart from direct and indirect competition, making you stand out. Customers keep getting information thrown at them by several competing brands, and your brand image is the one to capture them and retain tem as paying, loyal customers.

Let us look at the key elements of a great brand image.

The logo design – If you are creating a new logo, you have to think of colors since they will ultimately determine which complementary colors will be used in your website. You also think of the size and other physical/visual aspect that must have a great strategy.

The red color of Coca Cola is seen in all their websites, and their logo is very prominent when it comes to color. It shouts at you right from the top center of the home page.

A lot of attention is given to the design of a logo and a strategy must be done for it.

Research and discovery play a big role here. They help in understanding the whole company – we have already covered this in these two blogs.

After the needs are understood, it is time to come up with proposals. A good proposal should have 4 to 5 different logos for comparison. Mockups are used to see how each logo would look in real life applications, such as a billboard advertisement or web copy.

Then the logo is delivered and signed off.

Bear in mind that the words and visuals of the website will have to come together in order to complete the brand identity. There must be a consistency that builds trust in your existing customers and potential customers. Words include slogans and actual content.

4. Competitor analysis

If you do not perform a great competitor analysis, then you are planning to fail.

You have to know the design strategy that your competitors used, by analysis design features on their website.

You can use tools to analyze a lot in a competitor’s website, but for the sake of this topic, we will only look at research about the design and user experience.

What is their design?

You need to see what they have done and then identify certain weaknesses that you can address in your own website. It can be as simple as a bad combination of colors, all the way to poor integration with third party tools.

You need to explore every aspect and function of the website to identify design issues that you can address better than the competition.

User Experience

How do you feel when you browse through the site? Is the user experience satisfying or frustrating?

Are products easy to find? Are the services fluid and fast? How long did it take for the website to load?

Is the site mobile ready? How is the responsive site structured?

All these are issues that must be addressed in this user experience part of competitor analysis.

What their current customers say

You can interact with some of their customers on social media and see what they say about the competitor. This will give you insights into what works and what does not for your competition, and then address these pain points.

Customers tend to go rant or praise websites, products and services on social media, and a lot of information can be gleaned from such posts.

Your customers interact with your employees on a daily basis. You should not forget to ask your employees to give an input as far as web design is concerned. They too are a great asset when it comes to creating an effective, functional, aesthetically pleasing website.

5. Web Design Voice, Tone and Style

We have covered the voice tone and style of writing content for your website, and now we shall cover the same three features, but for WEB DEESIGN ONLY.

Let me give you a story first:

There are two KFC outlets, one at a nearby mall, and another at a shopping center in the next commercial area.

When I want some Chicken wings and fries, I go to the one further away, and not visit the nearby mall. They both sell the same products at the same prices but I opt to go further away.

“Why do this?” You ask.

Simple; one of the waiters there has a charming, friendly way of getting you to enjoy the stay there. He always something witty to say, that leaves me with a smile on my face.

The voice, tone and style of your website can have the same effect on your target audience. The voice, tone and style should encourage people to buy from you, stay loyal to you, even if it costs them a bit more.

The voice and tone of websites gives the first impression within seconds.

Let us go back to our clients John and Mark, and see what web design voice, tone and style are about.

For John, who is a contractor looking for investors; the voice, tone and style should say that he is a serious contractor, so it will have what is termed as “corporate, bold, and modern”. This includes images of serious commercial property he has built, adding corporate-like colors like blue or grey.

For mark, who is starting a school; the voice, tone and style should say that this is fun school, where children can come and learn through playing. The colors, images should say the school is fun, sweet and educational.

So the web design voice, tone and style comprises how the content and design complement each other and enable your visitors to decide how they feel about your story. This generates emotions, which then push them to buy your products.

Do not just pick random images to make your website look good. Look for images that complement the content. Place them attractively in the coding of the page, and then see a change in the way people react to your web design.

We can look at some voice, tone and style voices as applied in web design:

Fun – This says that the design should communicate excitement, cheerfulness and playfulness.
Casual/Formal – If you have a tech website, or a corporate website, the target audience has to see this in the way the site is designed. The design and content shows less fluff and more facts.
Bold – This is one of those tones that need careful handling. Used wrongly, the site may actually drive visitors away. Bold can represent confidence, which is a crowd puller. Bold can also represent offensive aggression, which will drive people away.

There are many other words that can be used to describe the voice, tone and style of a website and these have to be carefully mapped out in the web design strategy.

Related Article: 40 Web Design Tips To Make An Excellent Website

6. Web design direction

When asked about what web design direction is, even some web designers do not know what it means and why it is crucial in guiding prospective customers down the sales funnel.

Web design direction refers to how the design guides the eye of the customer, through the content all the way down to your CTA.

This is something that eludes web designers, even on some big companies such as BBC.

Diagonal direction – Traditionally, the eye of the user quickly scan a web page from the top left and moves down to the bottom right. This is the most effective direction, and that is why you find most CTAs being put on the bottom left of the page.
Horizontal direction – you can opt to design a website that takes the eyes of the user in a horizontal direction. This can easily be achieved by using dividers, or full page rows with different shades of the same color to differentiate them. The user will scan the top block and then move down to the next.
Vertical direction – this is when you use columns to break up the content of the site. The user scans one column then goes back to the top. This may be effective in a web page with content but does not involve scrolling. All the content can be seen with no scrolling. This is great when you want to simple sell a product. You display the product on the left and then the CTA on the right.

Some aspects of leading eye movement

There are common mistakes that web designers make which make the functionality of the website poor and cause readers to have a hard time making purchase decisions.

The use of imagery – it would be best to use imagery that directs users in a certain direction. You may have gone to a website that has arrows showing the progress of a product or service, and found it easier to read than one that just talks about the progress and uses generic images. There are many ways to guide the direction I of a user. Drawing an illustration of a road linking the above process is another way of achieving the same goal.
The use of human and animal pictures – it is another mistake to be addressed. When you place images facing out of the website, the direction of the user becomes confused and can skip over critical information, since their attention is drawn out of the screen. All pictures should face inwards, towards the content that you want the user to read.
Designing simple forms – Forms cause the direction of a users eye change. Top-aligned forms are easier to follow than left-aligned forms. This means the description of the form field should lie on top of the fields and not to the left. The horizontal setting causes less eye movement than left-aligned forms.

These are common mistakes that affect how people interact with a website.

If you are not sure, check out some websites and then be conscious of how you browse the site, and compare this direction with the design of the website. You will find that some direction fit some types of websites and not others, so you must create a strategy about the direction that you want your website to have.

7. Measuring website design

The web design must complement the content so as to take the potential customer down the sales funnel and complete sales.

We are talking about awareness, evaluation and then the final purchase.

You have to measure these in order to see how successful your website is.

Measuring awareness

What you should address is what catches the eyes of the target audience within seconds, and are they able to find the initial content that will keep them on the site?

If you fail to grab the users’ attention within a few seconds then you have people bouncing away from your website or landing page.

You have to get a web design strategy to build a website that immediately catches the eye of the user.

At this point you should measure exit and bounce rates, using an analytics tool

Bounce rates refer to people leaving a site after browsing the first page, and exit rates measure how many people left from deeper pages of the website.

You should also create a strategy to raise the interest of visitors when they come to your website. Although this is basically addressed in the creation of content, you have to think about how that content is placed on the site in order to generate interest.

Content generates interest; design makes it easy to access content for engagement.

At this stage, you should use web tracking to see how much interest is generated among your target audience. You can see the interaction with various content types, such a clicking through a video they think is interesting.

Measuring Evaluation

You have to adjust your web design strategy to ensure that the design actually helps the potential customer to evaluate the product. If the design is fitting with the niche, then you will find people buying more.

You can always tell how a fashion site will look like even before you visit it when you see it on the search engines.

There is a design trend that makes you want to buy something from the site, even if you have not decide what.

Web design does affect the evaluation process. Where a product is placed, how it is displayed will help a customer decide to buy or leave.

Measuring Purchase

You have measured how the web design affects the evaluation of your products and service, now it is time to finalize and see how best to push the customer to buy.

The main issue here is to see how many people click on the CTA. Not all landing pages are about making sales.

You could be having a landing page that will increase leads and another one that converts the leads and makes them buy a product.

The strategies used to get a CTA click-though in each case is different.

The leads page should have a form that is easy to fill, while the sales page should have the buy button very near for easy access.

8. Gradual web design

Whether building a new website, or redesigning one, you need to have a strategy on which elements will be used as they are, and which ones will be changed. Sometimes it might need a full overhaul of the site, and other times just a few changes.

With gradual web design, you allow customers to focus on features that you are changing.

If you want to use a different version of your logo, make the change and let customers notice that first, before making the next change.

Making such changes can be accompanied by launching a new product or service, or launching an update. It excites the customers and they will gladly buy the items you are selling.

When you make huge changes, then customers get the feeling that you are not performing well, lose confidence and may move to another competitor.

Remember brand loyalty also depends on the image you portray so make changes in small iterations.

Related Article: Web design trend

9. What is a Mood Board?

When it comes to web design strategy, you must consider the mood board. What will its purpose be in the final design of the website?

A mood board is a collection of text, images and other media that can be used to generate inspiration in the design phase. Mood boards can be created for web design, illustration design, video production and a lot of other areas where creative designing is important.

You probably have seen some products properly packaged in the store, and you needed to know the font used, or you keep adding images to your Pinterest account – all this is called creating a mood board and it I a crucial part of the web design process.

The purpose of a mood board

One of the main reasons is to get the designer to be more creative; if the designer sees a layout he loves, he can save that on Pinterest; if he sees something in a magazine, he can cut it out and stick it to a physical board.

This collection is then rearranged and used in making a design for a client. Once the design is complete, each mood board is cleaned up and then put into a file. This is so the images (cutout and digital bookmarks) can be used in other future creations. A mood board can b created from new elements that you find.

Another reason for using a mood board is to approach a client. Sometimes clients do not fully understand what a designer is saying when communicating at the start of a project. Using the mood board can be used to discuss about direction, fonts, images, and other important design features.

A mood board sheds light on color, fonts, lighting, composition, style, shapes, images, texture and so much more. It is therefore an important and crucial part of web design and a strategy has to be designed for its collection, use and storage.

10. Creation of wireframes

A wireframe is the basic schematic that guides the design of a website. This is a very loose description to make sure that you understand its importance.

In the world of responsive designs, wireframes are being built for mobile phones and then go outwards to the desktop version. The wireframe is very basic and does not even need coloring or anything fancy.

It shows where each feature will be, content placement, CTA placement, navigation elements, and a lot more.

This process helps the designer come up with the design from an informed point of view. When creating a wireframe, the designer needs to know what content will be placed so he can assess how the design will flow.

Wireframes are also made to address client concerns. The client gets to see the full design in wireframe so he or she knows just how the site will look like in the end. This process gets to save time and money from making changes after the website has been designed. When a client signs off on the wireframe, the designer will only need minor changes at the end, or none at all.

We should mention mockups here because they support wireframes.

A mockup is a visual and detailed representation of how the website will look like. It has colors, typography, images and more. A mockup can be created after a wireframe is approved for better visualization by the client. Content strategy needs to address whether to use one or both.

What tools will you use?

You need a strategy for the tools that you will use to create your wireframes. Traditionally, people used a marker pen, pencil and paper; some still do so to show quick design concepts to teams.

The next thing is to create a wireframe on the computer, which can be shared by the team and also sent to the client by email.

Most people use Illustrator, Photoshop and other software, but these are complicated. There are online tools that are specifically targeted at creating wireframes. Most people use these to make it easy to collaborate with teams that may not even be in the same geographical area, or clients in other continents.

11. Planning for responsive web design

Today, a website design must incorporate responsive design. It is true that most web traffic today is from mobile devices and this needs to be planned for.

Here we look at some of the major factors that MUST be planned for when creating a responsive website.

Fit all sizes – consider that browsing on mobile devices means testing the site through hundreds of devices and seeing how it performs. Most web designers wing it and test on only three devices and say that the site is responsive. But what if someone wants to use a smart watch or Glass device? Is the site optimized for these very small screens?

Optimization of images – there are websites that simply download full images on mobile devices and then shrink them down. This leads to a lot of data being used to load images and not content. This has brought about low page load speeds which affects the bounce rates.

A web strategy has to look at how these images will be optimized for mobile devices.

Plan for long edits – this is something that most web designers do not address. You need to make a strategy that will take the time taken to create the website and also make it responsive will extend even during edits.

The edits have to be tested on all devices once more.

Performance – what are the page load speeds? Responsive websites must load quickly in order to get a good ranking on search engines and also retain potential customers. Having a site that take more than a minute to load will just not work at all.

The cost factor – responsive websites can be very complicated especially when it comes to the coding. The code can take very long to write and streamline. It has to maintained, and all these have a cost factor. You must have a strategy that addresses the cost so you get the client to give you a proper budget.

12. Web Optimization

Web optimization, not Search Engine Optimization has to be planned before the design is done.

Web optimization is about making the best buyer journey and it has to be properly done. At this point tests like A/B testing will be considered to find out which version or customer journey is the best for the business.

Basically, you are optimizing the sales funnel for the website, so you have to find strategies that optimize for awareness, evaluation and purchase. These can include

Getting the right information consumed – in design where are the essential elements placed and how are they formatted to create interest and awareness.

Make the message to resound well through succinct messaging – design how is information such as product descriptions formatted and placed?

Create very strong calls to action – Where are the CTAs placed and designed? Where is the contact information for easy communication?

These are the three basic needs of having a website optimized. There are various elements involved, but we went through them earlier in this blog.

Takeaway

Creating a credible web design strategy is just as important as having a content strategy and content marketing strategy. You have seen that the two come together to define your brand and show you are the authority in your particular niche.

The web design strategy is not simply about knowing where each element goes, but also how customers will experience the site and interact with your products or services. Make sure that it is part of your web design process for every client that you get.

Product placement and display should be done in such a manner that the reader is guide (directed) by what you have placed, towards the goal of the website or landing page. If it is leads, then make it clear with your design direction.

12 Steps for a Kickass Web Design Strategy

What is Web Design Strategy?