How we build your website from start to finish

Hiring someone to create your website can be a challenging decision. Every web designer has a process that is different from everyone else’s.

At Dephlex Creatives, we understand that your website is a crucial part of your business. It’s often the first impression potential customers will have of you, so it’s important to ensure it’s a good one! We’re here to help you with that. You might have many questions about what goes into building your website.

In this blog post, We will walk you through our entire process of designing a website from start to finish, so you know exactly what you will get when you hire us. This way, you’ll know exactly what goes into making your new website and feel confident that you’re getting the best possible product.  Let’s get started!

In this article, we will cover:

8-Step Web Design Process:

So in this article, We will walk you through our proven 8-step web design process.

1. We talk, usually via Zoom.

Before we start working together, we’ll book some time to have a chat about your project. We’ll usually do this on a live video call and discuss what you want to achieve from your new website.

We first look at your existing site (if you have one) and your ideas for the new site you want to build. We can use this time to discuss your goals and objectives to understand better how we can help.

Essentially, this call is to determine whether we are a right fit for each other. I work only with clients I can genuinely help, which is why this call is important. We’ll also discuss your budget, and I can give you an indication of what we charge.

2. We send you a quote

Once we have all your requirements, we will send you a full proposal for our services, including all the website features you requested. We may also include additional elements that would work well for your website. The fee for our services is more often than the price we discussed on the call. We will have a call to present the proposal to you and answer any of your concerns or questions you might have.

3. Discovery Meeting 

Discovery is a fun, facilitative strategic planning session that will help us learn your business, understand your users, define your brand, prioritize your goals and help you succeed online. The discovery will be done in person or through Zoom software (https://zoom.us/) if client can’t meet in person.

After understanding and framing the problem to be solved, the Discovery phase begins to architect a high-level solution rooted in customer insight that looks to solve customer needs.

Discovery looks through the lens of the customer to find insights which will make a compelling proposition – what are ‘the things’ that will most positively impact customers to make them think, act or feel differently. The Discovery Session helps uncover the Strategy that will govern the design.

In this meeting, we will be looking at your website goals and the features you want to include on your website. I also need to understand why you need a new website and how it fits into the bigger picture of your marketing and sales. That lets us know if we can also help you set up your marketing or lead generation system.

We’ll also look at any existing marketing materials (e.g., your logo, brand guidelines, etc.) and your competitors’ websites. All of this information will be used to inform the design and development of your site.

We can also include a quote for writing your website content. Most of our clients hire us to write the content for their new sites. This is an optional service. You can either write your content, or we can do that for you.

3. Define (Strategy)

The Define phase takes the concepts, strategy and requirements defined in the Discovery phase and translates them into a customer-centric solution. It defines how a customer interacts with a client’s business.  

The define phase also ensure that business, technical and customer requirements are documented to ensure there’s clarity on all required features for the project. The output of the phase is a clear plan on what the project is, how it meets business and customer needs and how it’s going to be delivered. 

We will begin our research using the information you provided on the initial call and the discovery meeting. We will dive deeply into your world, learning as much as possible about your industry and competitors. We’ll perform keyword research to determine what your customers search for online. We’ll look at dozens of websites during this time, leaving no stone unturned before moving forward with any designs.

This will help us map out a successful plan to create your website that looks professional and is easy to use but also educates your customers and make them trust your business and the services or products you offer.

4. Design

Typically the Design phase will begin with User Experience (UX) and Content Strategy where sitemaps, wireframes and annotations are created in low fidelity to provide a high level Information Architecture (IA) solution, matched against content. The UX will define the interactions and so will focus on usability and ensuring that the design facilitates the most efficient and effective user journey. 

In tandem with UX development, Design develops a look and feel to align with a client’s brand and when wireframes are approved, bring the wireframes to life with page design rollout. 

The design phase considers not just the usability and aesthetics of a project but also considers the content strategy – how the content is going to deliver on a customer’s needs. Content creation, the development of copy, image and video assets also forms part of the design phase.

The phase can include:

•  Sitemap development
• Wireframe development
•  Clickable prototype
• User testing
• Look & feel development
• Interface design
•  Content creation

Initial concepts

Once we have enough information from the research, we move on to the planning stage. This is where the fun begins. This is the creative part that I love the most. We’ll start by sketching out some layouts on a whiteboard. We use a lot of post-it notes and marker pens to develop a basic wireframe of your pages. This begins the initial framework of your new site.

We’ll also discuss the main colors we’ll be using and take into account what you already have and what we would recommend. We’ll decide on the best use of fonts and where to place your headlines and content for the most impact. We’ll also decide where your calls to action will go and how to ensure they are displayed for your users.

Mockup

The next stage of the process is to take all the rough sketches and post-it notes and turn them into a work of art—your website. We use Adobe XD to pull together the pieces from our planning to create a mockup. We’ll position each element individually and add some content to bring it to life.

Everything from your logo to your social media icons will have its rightful place. Every inch of the design will be considered, informed by the research and concepts we’ve previously completed. Some initial ideas won’t work when we add them to Photoshop. And that’s fine. At this stage, there will be a lot of testing and trial and error along the way.

The design will change numerous times throughout the mockup stage until we are happy. This is one of the most important steps, and we’ll keep working on it until we have something that looks spectacular, is user-friendly, and ensures maximum results.

You See The Design and Give Feedback

This is the fun part for you. This is the first time you have seen the design since we started working together.

Once we are happy with the mockup, we’ll send you the homepage design and have a zoom meeting. In this meeting, we’ll walk you through the design and talk you through each element individually. By using zoom, We’ll explain why we’ve designed it the way we have, and you’ll get to experience it before we move forward with the rest of the project.

After the zoom meeting and having a chance to reflect on what you’ve seen, you can tell us what you think. You can also ask us any questions, and we can discuss what you want to change, if anything. This is your opportunity to let us know if we’ve missed out on any key information so we can add it before moving forward with the build.

Continue with designs

Once we have the homepage nailed down, we then design the layouts for your other pages. You will generally have 3 unique layouts for your website: a homepage, an inner page, and a blog page. We’ll design the additional pages using Adobe XD as we did before. The colors and style will match the homepage, but the structure will differ.

5. Develop

The Develop phase takes the assets produced in the Design phase – annotated wireframes, page designs and content, and builds them into the final deliverable. During the build phase, the back-end system and CMS is built out to create any functionality required and to accommodate the required templates. The front-end build then begins, creating page templates and integrating with the back-end. 

The output of the build phase is a functioning site, built to the specifications refined in the Design phase, which can then be populated with all data and content and sent to the Quality Assurance department for testing, integration and deployment.

The phase can include:

•  Back-end technical development
• Front-end interface development
• Data migration
• Content entry

6. Deploy

The Deploy phase begins with Quality Assurance (QA), the finalizing of test cases and running that plan against the project. Issues are identified, tracked, fixed, and then tested again to ensure all issues are resolved. Furthermore, once all the fixes have been verified, a full regression test is conducted to ensure the fixes did not break anything else.

Once all defects have been closed or deferred and QA has signed off, the build is deployed to UAT (User Acceptance Testing) or a staging server for client review and approval. After the client approval, the build is then transferred to production.  Once on production, QA will perform a smoke test to ensure the deployment went as planned and the build works correctly. 

The phase can include:

• Development of fest cases
• Unit testing
• Non-functional testing (standards for security, performance, accessibility, redundancy)
• End-to-end quality assurance testing
• User acceptance testing
• Deployment 
• Deployment (smoke) testing

Forms and CRM Integration

This is one of the crucial steps of your website that gets inquiries and leads into your business, so it needs to be set up correctly.

Once we are done with designing the web pages, we design the required landing pages. The next step is to set up your forms to collect customer’s details, for example, inquiry forms and opt-in forms on landing pages or newsletters.

And then, we integrate those forms on landing pages, which are further linked to your CRM, where you manage all your list of customers and leads.

Testing and Final Feedback

Before your website goes live, it needs to go through the testing phase. All major browsers are being used to test your new website to ensure it meets up-to-date standards. There are many different web browsers, Chrome, Firefox, Safari, and Internet Explorer, to name a few. Each browser will display your website slightly differently. We will test your website on different-sized screens to see how it looks. During the website build stage (step 16), we assigned a different layout depending on the device’s size, e.g., iPhones, iPods, laptops, and desktops.

We need to check one last thing before we feel comfortable releasing your website to the world. We want to test your page load speed to make sure the site is running as quickly as possible. Google advises that all websites load within 5 seconds to avoid any kind of penalty.

We use several tools to confirm that your new website is as quick as it can be, and we might even install some additional features to improve it if it needs it—the quicker your website loads, the better the experience for your users.

 There’s no real way to avoid this, but we do ensure to catch any major differences and glitches.

This will also identify any bugs or errors in your design that need fixing. We also take your final feedback as well, to ensure everything meets your expectations.

7. Going Live

Once you are satisfied with how the new website looks and performs, we will prepare to go live. With this process, we need to make sure the migration of your new website goes smoothly, and migration mostly takes about an hour. If you already have a website, we usually migrate when there is less traffic on your website, so it doesn’t affect much of your business activities.

Submit Sitemap to Google Search Console

Using Yoast, we can connect your website directly to Google. This means they can provide you with extra data about your website and send you an email if you have any errors going forward.

We then provide Google with a list of web pages from your site so they can start listing them in search results. This is known as your “sitemap.” Chances are they would find your site over time anyway, but this way, they will keep their records up to date every time you change your site.

Chances are they would index and save details of your new web pages in the next 24 hours, or sometimes it may take 2-3 days. That depends on how frequently Google is crawling your website.

Integrating Google Analytics and FB Pixel

Once we have given your site to Google, we can create your visitor tracking account, Google Analytics, and Facebook Pixel. This is a free tool that Google and Facebook provide to show you everything you need to know about your website visitor’s website performance.

These are quite valuable tools where you’ll see monthly visitor numbers and what pages are the most popular or most visited. It will help you understand your website visitors with a little more detail.

8. Ongoing Support and Care (AfterGlow)

Now you own your brand new website that you can proudly share with everyone – your clients, peers, friends, and family.

Beyond release or go live, activities shift to evaluating and supporting the client. Evaluation is conducted to get measurable results and optimize the output to ensure the build delivers the ROI defined in the planning phase. 

Support is often needed by the client to train internal teams and to make updates and enhancements to the build. Additionally, in combination with data analytics and user testing, a build will usually be constantly updated and upgraded to make use of lessons learned as well as emerging technologies. 

The phase can include:

• Managed monitoring and support services
• Updates and enhancements
• Training & organizational support
• Data analytics analysis
• Usability testing

We’ll teach you how to use your site. You will be able to update content and images and even add new pages or write a blog. You will also get access to videos that will step you through making changes so if you forget after our training you can refer back.

We’re not going anywhere. Once your website is launched, we will provide 60 days of support to make sure any bugs have been ironed out and that you are confident in using your new website. 

After this, we offer ongoing website care plans, but even if you want to manage the site yourself we’re still here and able to help you. If you can’t work out how to do something, or you want to make more substantial changes in the future, just get in touch.

Summary

So there you have it, our entire web design process from start to finish. I didn’t include every technical aspect of our team’s work in the background because that would be too overwhelming for you. Instead, I wanted to show you the broad outline to see what’s involved when designing a website. 

I hope this post answered some questions about how we build websites. So you know exactly what to expect and when.

If you’d like to have a chat to see if we can help you, feel free to book a 15-minute call with our team here.