In this previous post “Does your service business really need a website? The honest answer”, I explained that as a service provider, a marketing website is the most efficient way to build the online presence you need to attract clients and generate opportunities
But how exactly do you proceed to create a website that will both inform and inspire trust to your visitors?
In this master post, I detail step by step the workflow I use with my clients to build sites that really help their service businesses: all these steps listed will eventually get their dedicated post as there is plenty to say
Set the goal(s)
"Setting goals is the first step in turning the invisible into the visible." - Tony Robbins
You may tempted to skim (or even skip) this step to save time & energy but that would be a mistake. Building a website is a creative process, a succession of (small) decisions that will ultimately combine to deliver a user experience to your visitors
You can leave these decisions to chance (that would be like embarking on a journey without a map and compass) or be intentional about them, and systematically pick the ones that support your goal(s)
Here are some examples of goals that can be tracked using analytics tools like Google analytics (Traffic, Engagement) and Google Tag manager (Conversions)
Engagement
Your main goal is to deliver information & content about your business to your visitors and make sure it is properly “digested”. Good indicators of engagement are the time spent on the site, the bounce rate (the % of people who leave the site immediately because it is not what they expected) and the visitor actions on the site (reach a page, watch a video..)
Conversions
Your main goal is collecting qualified project inquiries from your website visitors (qualified means not spams or inquiries that are unrelated to your activities and that you have the information you need to follow up)
You can refer to this post “UX for forms” to learn how to maximize the conversions on your forms
Ecommerce
For E-commerce, tracking revenues is the ultimate goal and you can also set goals on the intermediary steps that lead to a sale (watching a product presentation, adding to a cart, …)
E-commerce optimization is a whole domain with its experts (on the largest e-commerce, the loading times of pages are optimized at the millisecond level)
How do I set values to my goals?
With tools like SimilarWeb, Semrush or Ubersuggest, you can analyze websites similars to yours to have an idea of the traffic they are getting (free plans available)
For conversions, you have will have to research further, by talking with professionals in your industry, purchasing studies ...
A conversion rate of 2-5% is generally considered to be a good benchmark for service marketing websites
This means that for every 100 website visitors, 2-5 of them take the desired action, such as filling out a contact form or requesting a quote.
Research your audience
15 years ago, I was having the biggest adventure of my life backpacking around Australia. Traveling one full year is costly and I made a bet with myself that I would be able to cover my living expanses with local employment which lead to very interesting jobs and learnings
One in particular happened when I was in Brisbane during a destocking event (several companies were renting the local community center to sell their inventory at discount price). The job I got was about hanging out in the street and convincing with by-passers to come in and buy (I was paid based on the sales). Really a tough job, as most people don’t appreciate to be disturbed, so the first hours didn’t go so well…
Until we flipped the approach after noticing that a large area in the fair was dedicated to jeans, the fashion kind (that was the time were slim jeans were trendy) that were seriously discounted (even some brands). The breakthrough? We changed our target and start talking only to these people who were wearing those fashionable jeans, handing them flyers with the brands names (and even accompanying them inside and helping them finding their sizes and booking the fitting rooms to reduce the frictions)
We did it for a couple of days (it was a temporary event). I was finally able to cover the cost of my open water diver certification and learned a valuable lesson: it is impossible to be convincing when you are trying to speak with everyone
You can read this post “Want To Make Your Website Impossible To Ignore? Strategies To Stand Out From The Crowd” to learn about audience focus
I usually run a dedicated Audience workshop with my clients to define their audience (it is fun, we use post it).
You can refer to this post ”How to define my website audience" for the detailed workflow (coming soon)
Make a Mood Board
The goal is to collect elements (colors, fonts, images, designs, patterns, text…) that you like and that match the vision you have for your website.
There is absolutely no constraints here, just follow you inspiration and gather stuffs
This step is not mandatory but it will help you a lot especially if you plan to hire a web designer to work with you (the Mood board will be used for inspiration and to better understand you likings)
As an example, here is a Mood board I did for a legal firm website project
Choose the Technology
Choosing the right technology for your website can be a complex process, and there are several factors to consider with plenty of options
Have a look at this post 3W (Wordpress / Wix / Webflow) - Which One For My Service Company Website? to pick the best tech for your site
Sitemap & Pages content
A sitemap is the list of all the pages that compose the website, organized in a hierarchical structure. In other words, it defines how you organize the information on the site: Make it logical & intuitive to your visitors and they will navigate the site without getting lost (and they will thank you for it). It is also used by search engine to index your site
It is important but don’t worry too much about getting this wrong as sitemaps for service marketing websites are pretty standard (this is what your visitors expect):
- Home - This is the page where visitor usually lands. It serves as a teaser to the other pages on the site
- About - Is all about your company vision, mission and what you do what you do
- Service - Describes your service (and how you solve your clients problems)
- Project - Past realizations and your know how
- People - Your team
- Resources - Blogs, posts & news
- Contact - For project inquiries (check this post to learn about efficient contact forms design)
Here is a (free) template you can use to customize to create your own
Each of these page is composed of sections that wrap the content (Check this post The Must-Have Sections Any Service Company Needs On Its Website for details)
Design Wireframes
Wireframes are the first visual representation of your website pages (and a pretty excited step for clients the first time they see them)
They are designed in black and white on purpose so the discussions remain focused on the information organization, layout and the navigation which are key to great user experience. We use them to test the user workflow and reorganize the content if need be
Here are some examples of wireframes:
Design Mockups
An other client's favorite: in the mockups steps, we start including all the assets (colors, fonts, icons, patterns) that create the look & feel of the website and support your branding. This is as close as it gets to the final version of the website (without starting coding which is the next step)
Have a look at this post "A Detailed Guide To Pick The Right Visuals For Your Service Website" to learn how (and where) to choose stunning images
Here is an example of mockup (same page as the previous Wireframe) - The client is an Architecture firm
Coding / Integration
This steps happens with the Technology that you have selected previously. I have chosen Webflow to develop all my the websites as this no code web builder offers a lot of design flexibility without the need to write code.
I used this flexibility to make final design adjustments directly during the building phase and publish the website fast and before the stretched deadline
My building process starts with creating the classes & components (footer, navigation..) that will be used through the site and group them in a styling page (this practice insures that the styling is consistent and that the website is easy to modify and maintain)
My second step is usually about building the pages on the desktop breakpoint) and creating the logic to get the content from the CMS collections (filtering, search...).
The 3rd step is about making the website adaptive or responsive (this goes usually pretty fast as always I design with tablet & smartphone breakpoints in mind). Often it is a simple a reducing the number of columns in my grids, or changing the direction of my flex box (You can check this post to know more about how to make responsive designs) and adding the animations that will fluidify and support the navigation
The 4th step is about optimizing and importing the final content (blogs posts, image, projects). This steps comes last to give enough time for the clients to gather all the assets
And the final step is about publishing the website which includes optimizing for performance (minify code for speed), fill in SEO metadata, cleaning the unused code and publishing the website on the client domain without forgetting to connect an analytics tool so we can track the progress vs the goals we set initially (top of this post)
Launch & Life cycle
Clicking on the publish moment is always a great moment - that is when your new website becomes visible to everyone and it starts its jobs of informing your potential clients
It is a good idea to plan a launch campaign that can be attached with a special event in your company life
Having a website running is the beginning of the story: the next challenge is about bringing qualified traffic to your website which a continuous process that can involve blogging, SEO optimization and Ads.
It is an incremental game and every steps you clear, every content you add to your site will contribute to make it easier to find. Use your analytics to improve the process, produce better content and deliver a more engaging experience to your users
Until you ultimately "outgrow" your website and decide a redesign (check the 10 Signs Your Service Company Website Needs A Redesign)
(Your) Game is on!
