Website Design Processes & Checklist: How We Build Sites For Our Clients (CASE STUDY)
This is how we complete every web design project for every client.
In this case study, you will learn how to achieve the following:
- ✅ Step by step process to create a highly functional website for your business
- ✅ Strong processes and checklist for both parties
- ✅ Transparency: Know what to expect throughout the entire web design project
The Outdated Method
The Bingo Method
Introducing The Bingo Process to onboard every client
Table of Contents
- Introducing The Bingo Process to onboard every client
- The Preparation
- Step 1 – Interview and write content
- Step 2 – Web design and UI/UX
- Step 3 – Web development
- Step 4 – Launching the website
- Step 5 – Post-launch sequence
- How do you announce a new website launch?
- Tool & Resources for launching your first website
- Frequently Asked Questions
At the beginning of this phase, we will spend a lot of time communicating and clarifying the deliverables.
Step 1 – Interview and write content
Setting up a communication channel is the first priority with the client.
What color pallets? What your logo stands for? What sort of design do you like?
If you are clueless, I will show you a few samples of existing designs.
Develop a consistent brand
If you have your own existing branding, then I will collect whatever you have.
No previous brand assets? No problem, I can create one for you.
Usually, I will fill in the missing pieces with dummy content or written content from our qualified contractors.
Create your technical SEO strategy
We want our clients to get the most out of the website, so having a solid foundation for SEO is a must.
SEO (search engine optimization) is where visitors find your website through the Google search engine.
- perform keyword research
- create content strategy
- map out pillar pages, remove unnecessary pages.
Set a launch date
Experiences taught us that if we don’t set a launch date, the client will take 1-2 years to launch. Typically we can launch a website within 3 months.
Step 2 – Web design and UI/UX
Based on what you need, I’ll start off by outlining the ‘sitemap‘.
This is how your website’s content is structured, we start from the pillar pages, and break it down based on the client’s requirement.
Extra pages will be created based on the amount of content provided by the client.
We would suggest to the client what sort of content should go to the website.
Then, the rough sketch of the website will be drawn on pen and paper, I call it the ‘wireframes‘.
Wireframe normally has the following characteristics:
- pen and paper sketches — avoid client commenting on color and font
- easy to navigate – can visitors find what they need within 2 clicks?
- content flow – is every page serving its purpose?
- make sense – visualize how the content is presented, does it makes sense?
At this stage, we only want to only focus on the layout of the website, and how the content is presented.
Let’s get our creative juices flowing!
If you do not have an existing brand design, I will suggest a brand-new branding kit.
or what we call a ‘visual recipe’ as shown below:
Typically the visual recipe will include:
- color palettes
- photography style
- branding elements
How you can benefit from this visual recipe?
- strong identity – apply the design to your future brand assets (letterhead, name card, social media content)
- improved branding – increase your brand awareness
- building trust – increase ROI
Read more here if you’re interested in branding.
Although not included in my list of services, I am happy to do this for you because this will benefit you in the long run.
Website mockup (UI/UX)
If you’ve been agreeing with the progress so far, our designer will sketch out the website in high-fidelity mockups.
This will be the first time you see the website comes to life.
At this stage, you can see the designs in any screen size — desktop, laptop, tablet, and mobile.
You will get unlimited revision at this stage, but this hardly happens if we get the briefing right in the beginning.
Step 3 – Web development
This is where the designs transform into a real-functioning website.
Choose a solid CMS
We love to use WordPress to power our websites.
At this stage basically, we are implementing the codes, databases, functionality, and all those geeky stuff.
Website functions with Elementor PRO
We no longer code website with <html> or /css. We could help clients save lots of time by using drag-and-drop page builders like Elementor Pro.
Common functions like these are inserted into web development:
- forms (inquiry/booking)
- links (navigation/buttons/menu)
- external functions (social media/WhatsApp/FB messenger)
- animations (mouse-over, image change colors)
Tracking codes & analytics
Connect with 3rd party tools to make the website more functional, also to provide more data to work with.
- analytics – know where your visitors are from, how long they stay and which page they visited
- schema & open graph – show up properly on Google and Facebook
- pixels – advance tracking code for Google and Facebook
Depending on the nature of the website, we will recommend what to implement for the clients.
Website launch checklist
But before going live, the website needs approval from the client, making sure all functions are working properly.
These are only a portion of our ‘website launch checklist’:
- Replace images with final images and designs
- make sure text is accurate and error-free
- Make sure navigation works
- Browser compatibility test
- Get ready for 404
- … etc
All technical issues should be solved during the web development phase.
Step 4 – Launching the website
Congratulations — your website is live!
Our work is not done yet, though. We still have lots of work to go through once the website is live!
Don’t worry, your website will not have many live visitors yet, so don’t be afraid to push your website live.
Domain name and web hosting
Your website is going to be accessible via your official address (yourcomapny.com)
The website will be transferred to the web hosting of our choice, we prefer SiteGround.
- Activate SSL certificate – standard technology to keep your connection secure
- Activate plugins – make sure all plugins are updated, and functioning well
- Server-side configurations – more advance settings on the server-side to improve performance
To have a better experience, the website will be optimized even further for loading speed too.
We have a list of checklists to make sure nothing falls through the crack.
- Load time is optimized
- images are properly compressed
- HTML and CSS at minified.
- Pre-load and have the browser cache settings set up properly.
Optimize for SEO
At this stage, we will adjust a few more adjustments for “OnPage SEO“, so the website can be found on the front page of Google.
For example, if your main keyword ‘Florist Kota Kinabalu‘ , you will notice other local florists are ranking on the same page too.
If you want to appear higher than your competitors, we would recommend the client check out our SEO services.
Check technical SEO components for errors:
- XML sitemap submitted to Google
- Page URL is consistent
- rel=”nofollow” tags are in place
- optimize metadata and schema
Want immediate results? Then go for PPC (Pay Per Click) services for Google Ads.
Step 5 – Post-launch sequence
Taking care of the website
- Create site backup strategy – the backup tools we use depending on the size of the website, and frequency it required
- Make a copy of the final website for backup purposes – we store multiple backups of the finalized website locally and online
- Ensure backups are running properly – it’s important to make sure this works
- Plugin updates – automatic updates, but occasionally manual involvement is required.
Check integrations with third-party tools are running smoothly.
Tools such as ahrefs and Website Auditor will be used.
The website we launched should be functional and well-designed. But we take it one step further.
Instead, we recommend you continually test the website, collect data on how the user interacts with the navigation and layout — and we adjust the layout accordingly.
We normally use Hotjars for A/B testing.
Passwords and Credentials
All passwords and credentials are stored in a secured place. The full access will be given to the client (it’s your asset, after all!)
How do you announce a new website launch?
Launching your website is only the first step of your digital marketing journey.
You’ve invested so much into launching the website, why not make good use of it?
Create a social media strategy for the announcements
Decide what channels you want to promote, how you want to announce it, and how long will the campaign lasts.
And most importantly, your visitors should know why the website launch matters to them.
Find ways to promote engagement for the new site
Provide exclusive offers for the first users who visit the site. Or, create contests with the site’s new features.
Continue to promote the launch for a specific purpose?
The more visitors we get to your website, the more data we are able to work with:
- does the visitor leave a certain page?
- do they find what they’re looking for?
- any difficulty navigating the website?
- are the features useful for the visitors?
Tool & Resources for launching your first website
Here are lists of articles we recommend you to read:
- Small Business SEO: Ranking Your Business on First Page Google
- 7 Online Marketing Strategies For Small Businesses
- How To Design A Website On A Budget For Small Businesses
Tools We Use
- coming soon
- coming soon
Having a website is only the first step for online marketing success — your digital marketing journey has just begun.
You can get in touch with me and I’ll strategize a marketing plan for your business, so you know what to expect, and how much the marketing will cost. — Daniel Wong
Schedule a call with Daniel?
No hard sales or pitches — I promise.
I hope you find this article useful and have a better understanding on how our website building creation process.
Frequently Asked Questions
Estimated time frame to execute the website design project?
Assuming the client is helpful and responsive, we could push the website live within 3 months’ time. If the client wants express delivery, we could do it within 1.5 months with premium charges and making all the best decisions on behalf of the client.
Do you use a website template?
We don’t recommend using website templates due to flexibility. Most of our websites are custom build. We will only use templates when the client has a limited budget to work with.
I want to update the website content myself
Some website needs more frequent updates, but the client wanted to do it themselves. Video training will be provided to guide you on how to update the website content. This is useful if you have a tech-savvy person on your team.
Can you help me update the website content?
You can subscribe to wpfix.my for a monthly care plan. Unlimited 30-minutes tasks for only RM99 per month. We have a dedicated team to help with your website tasks.
I found an issue on the website
We provide 30-days support to fix any issues found on the website. If the issue only arises after the period, there will be additional charges for fixing.
I want to add a new feature(s) for the website
We can do that for you too! Depending on the features and complexity of the function you’re looking for, we will give you an estimated price based on our hourly rate.