websoite design steps

OUR 8-STEP WEBSITE DESIGN PROCESS, AND WHERE YOU (THE CLIENT) COMES IN

We’re not going to lie, there’s a lot that goes into the website design process. In order to successfully redesign a website you’ll need:

  • To understand who your customers are and what they need
  • A site structure that can cover all of those customer needs
  • A clear, easy to follow user experience
  • A slick, consistent, and memorable design
  • Copy that resonates with your audience
  • A compliant, easy to edit, and expandable code base
  • The ability to tie in business-critical third-party software (CRMs, Marketing Automation, ERP, ATS, etc)
  • A well-optimized on-site SEO structure
  • A fast website

Starting to feel overwhelmed with what goes into designing a website? You don’t have to be.

The best agency partners have a clear cut and strategic website design process that addresses everything in the list above and takes the majority of the burden off of you and your team.

That, in a nutshell, is how we at Dotlogics approach the web design process. Don’t think about it as lines of code and finding the right images. Think about it as a comprehensive, strategic process that takes its time to get it right, and get you the online presence you need.

So without further ado, this is our (relatively) simple 8-step web design process. And don’t worry: our clients play a key role in each of them.

A Quick Web Design Process Overview

  1. Pre-Kickoff. Here, we’re just getting the web design process started. We’ll get to know each other, and start setting up market research. Through your web design RFP, client surveys, and other documents, we’ll also learn more about your brand, business, and technical requirements.
  2. Kickoff. The kickoff, either virtual or in-person, is the official start of the project. We’ll work together in a workshop format to define success, set goals, and start thinking through structure and design and development direction.
  3. Discovery. We’re digging deeper, combining your notes from the kickoff with our own research and analytics. That helps us build personas, wireframes, and other planning documents. We’ll also set up weekly status meetings with you.
  4. Creative. At this point, we make sure we’re on the same page creatively through mood boards and concept designs. We then take those findings to build out prototypes, then the real-life interface in this phase of the web design process.
  5. Development. Time to start coding! In this stage, you can expect work on both the front-end, back-end, and content management systems. Regular check-ins and early access to a staging server allow us to stay on the same page with our clients.
  6. Pre-Launch. We’re getting ready for the big day. That means extended testing of all features, bug fixes, and other tweaks to make sure it’s just right. We’ll also schedule the launch and handover date with you.
  7. Launch. On the day of the launch, our entire project team is available to work on any last-minute fixes and adjustments. By the end of the day, you have a fully functioning, beautiful new website.
  8. Post-Launch. We’ll work for at least 10 business days with each client to fix additional bugs and make routine tweaks. We’ll also chat with you on potential long-term engagements for ongoing support.

Let’s dive into a little more detail for each stage of the website design process.

STEP 1

The Pre-Kickoff Stage

Let’s get to know each other. In this step, we’ll focus on two things: information gathering and scheduling.

That means building on the information in your RFP to flesh out the scope of the project further. All clients fill out a brand and onboarding survey and participate in stakeholder interviews. Behavior tracking software helps us better understand your audience and optimize for conversions.

step-one-image

Meanwhile, we’ll set up a schedule for the project and meetings. This is the time to set up project management tools that will guide the client and project team through the entire process.

Any initial questions? We’ll answer them here.

What You’ll Get Out of the Pre-Kickoff Stage

You get you to know who you’re working with. You also get an idea of exactly how you’ll interact with your agency partner throughout the process.

That includes both a detailed project timeline and basic training on the project management tools used throughout the process. By the end of this step, the stage has been set.

STEP 2

The Kickoff Meeting

The kickoff meeting is a comprehensive workshop. It’s the best way to learn about everything behind your need for a new website. We focus on questions like:

  • What challenges does your business face?
  • What are the pain points that led you to a new website design?
  • What, in your eyes, would make a website successful?
  • Who is your target audience/customer?

Depending on circumstances and location, the kickoff meeting can be conducted virtually or in-person. Either way, it’s a workshop format, collaborative in nature, that all key stakeholders from the agency and client-side join.

Kickoff meetings work best when every decision-maker on the client-side is included. That might end with your CMO or go as far up as the owner. The more brainpower, the better.

We bring the agenda. You bring insights. That includes exercises to truly understand your brand, establish measurable goals, think through the structure of the new site, and hone in on the creative direction.

By the end of the workshop, the project is officially kicked off. We have what we need to start planning.

What You’ll Get Out of the Kickoff Meeting

By the time the workshop is over, you truly know who you’re working with. You also get a fresh perspective on your business, and how your website might help it grow.

But that’s just the start. All clients will receive a concise list of goals the website needs to accomplish alongside a document with key takeaways on-site structure and creative direction.

In other words, by the time we wrap up the meeting, you’ll be able to see the first pieces of your new website.

STEP 3

The Discovery and Planning Phase

It’s time to expand on that kickoff meeting. A comprehensive analysis compares its findings with quantitative data and analytics. Our goal is to find both points of convergence and divergence.

Out of those points, you can expect our proposed next steps. That means a comprehensive sitemap of the website’s structure. We’ll also create other supporting documents like wireframes, along with user flow charts and personas.

steps-on

At this point, the weekly meetings are going strong. We’ll also establish a regular flow of collaboration in our project management software to keep the productivity going and keep you in the loop.

What You’ll Get Out of the Discovery and Planning Phase

We’ll keep you in the loop. Ultimately, you get a comprehensive plan describing your new website’s strategic direction. That starts with a summary of our findings and rationale, but also includes a more intuitive and logical site structure.

User personas and key user flows matter for our process but can be valuable for other marketing efforts as well. Finally, we’ll deliver and discuss creative mood boards to give you an idea of the creative direction.

STEP 4

The Creative / Design Phase

So far, it’s been all about the strategy. In step 4, we begin to boil that strategy down into actual, visible, appealing creative and concepts during the design process.

Wireframes

step-four

The mood boards in the previous step kick off that project, your feedback included. Now, it’s full steam ahead on exploring the creative direction. To get there, we’ll deliver high-fi designs and content, prototypes that allow you to visualize your new site.

Based on your feedback, discussed in the now-standard weekly meetings, we’ll collaborate on more polished user interfaces and potential animations. We’ll also source all visual assets to make sure we have what we need to produce the creative.

Copy & Content

Copy and content are created in parallel with the high-fi designs. We develop Google content doc templates mirroring the structure of the wireframes that both teams can collaborate with. Here we’ll help refine the voice and intent of the content of the website so it sounds as great as it looks.

Preparing For Development

step-four-two

The design process ends with a formal hand-off to the web development team, but only once everyone involved is 100% behind it. In this hand-off, we’ll produce visual style guides and technical specification documents to ensure the website design is consistent and matches up with the functionality requirements.

What You’ll Get Out of the Creative / Design Phase

Other than beginning to see your brand in flesh and blood? You get multiple concepts that help you identify your preferred direction. Interactive, high-quality prototypes and a polished user interface make that decision easier.

By the end of this stage, we’ll deliver a comprehensive plan for your new website’s creative direction. But we’ll also deliver all native design styles. You retain ownership and can leverage them in other marketing efforts.

STEP 5

The Web Development Phase

If you’re not in the weeds on web development, it’s easy to get confused by the many potential approaches. Agile, waterfall, what? With us, you don’t have to worry about the details. Instead, we’ll guide you through it in our development process.

Dotlogics uses a section-based development, which means we don’t keep you in the dark until the site is ready. Instead, you’re involved throughout the web design process. All we need is your continued collaboration and participating in our software and weekly meetings.

The development process starts with setting up the dev, test, and live environments of the site. It also includes setting up the framework and content management system. We’ll map out content management needs, work on software integrations, and, of course, the actual coding on the front and back end.

The end of the base set up brings with it data migration and analytics set up. It also includes testing for performance, load, and any other functions. And of course, we’ll run regular backups to preserve your site. We want you to have a well-oiled website, after all.

What You’ll Get Out of the Web Development Phase

Other than a functional, coded site on the development server? Yes, it doesn’t actually end there. You can expect a full development schedule and launch plan that follows your required timeline pending any surprises.

Meanwhile, weekly progress reports keep you up to date, while early access to a staging environment helps you preview your website in all its glory.

STEP 6

The Pre-Launch Checklist

We’ve completed the design and development process, it’s time to get ready for launch. During this step, we make sure that everything is ready for launch. Think of it as the count down in Cape Canaveral. By the time we’re done. You know your site will be ready for the final push.

Don’t underestimate the importance of this step. It’s our chance to write and double-check all page titles and meta descriptions. We’ll clean up 301 redirects, and block confirmation pages from being indexed. Compressed images, Javascript, and CSS ensure fast and efficient load times.

We’re not done yet. Through lazy loading and caching mechanisms, we’ll further speed up the site. All analytics and goals tracking and optimizations will be ready, and we’ll also make sure Google likes your site for search results.

The final piece is a comprehensive quality assurance from both the development and the client team. Now is the time for any bug fixes and improvements before anyone pushes the go-live button.

What You’ll Get Out of the Pre-Launch Checklist

First, you’ll get plenty of time to review the website and make sure it’s right. We’ll work with you on a website acceptance document that walks you through everything you need to be prepared for.

And then, we’ll set the launch time. By the end of this step, you’ll know exactly when your beautiful, functional, new website finally sees the light of day.

STEP 7

The Website Launch

It’s the day of the launch. A stressful, exciting time. Dial-up the exciting and tone down the stressful if you’ve gone through all the above steps, but you still want to get this day right.

In our case, that means all critical members of the project team will be available the entire day. That way, we can quickly squelch any problems that might surface. To catch them, we go over a comprehensive final launch checklist with you.

We’ll make sure that the SSL is working and your site is secure. We’ll also switch over your DNS, the domain name that your users will use, to point to the live website. Any issues there? We’ll resolve them on the spot.

And of course, we verify the successful launch with you at the end of the day. That way, everything is clear and ready to go.

What You’ll Get Out of Your Website Launch

A shiny, new website of course! Even better, you’ll get a website that you know will function well, is secure, and free of bugs. Congratulations—you’ve made it.

STEP 8

The Post-Launch Phase

Your website is done, but our web design process is not over. Not quite, at least. If this is a comprehensive website redesign, you might see your search results dip temporarily. We’ll prepare you and walk you through the reasons.

That’s not it, though. All of our clients receive limited ongoing support for 10 business days after their website launch. During that time, we’ll monitor your website speed, conversions, and form conversions. If any issues pop up, we’ll resolve them.

Beyond bug fixes, we will also start talking to you about a longer engagement. That might include ongoing QA or feature requests that were beyond the scope of the initial launch.

We also offer ongoing SEO services that will improve your site’s (and business) visibility and brand awareness over time. Expect a conversation about how we can help you build SEO-focused content and links to accomplish those goals.

Finally, you’ll hear from us about our Grow agreement, an ongoing engagement that keeps us working together to improve your website over time.

What You’ll Get Out of the Post-Launch Phase

First and foremost, you’ll be able to rest easy knowing that your investment is safe, and the launch went well. The initial post-launch support helps you clean up anything you need to get rolling on the new site.

The other piece you’ll get is the option for ongoing website support. We won’t pressure you on that. But we will walk you through your options to make sure you have what you need to run (and improve!) your website over time.

And that’s it! By the end of this step, you’ll have a website in-hand that’s as beautiful and on-brand as it’s functional. Any questions about our web design process? Just email us or leave a note in the comments below.

Wrapping Up

That’s it, you’ve reached the end of our web design and development process! By the end of this step, you’ll have a website in-hand that’s as beautiful and on-brand as it’s functional.

Any questions about our web design process? Just email us or leave a note in the comments below.

Let's Get to Work.

Have an unsolvable problem or audacious idea?

We’d love to hear about it.
contact us