The Web Design Process

At Atilus, we’re always trying to get better at our web design process. I’ve mentioned “process” so many times over the years that now when the “P” word comes out of my mouth, people roll their eyes. This post is part historical record of our process, part breakdown of our current process, and just an even deeper look into the inner-operations of a web design business.

The technical process of designing a Website doesn’t really fit into conventional project management modalities. (Uhhhh-ohhh he just said modalities – I don’t like where this is going.)

There’s AGILE, RAD (Rapid Application Development), WATERFALL, etc. These are just formal structures on how a team works and communicates to execute a project (and plan goals for the project). Web Design can work under these systems, but often there’s not enough of a budget to formally build a team around this – and these structures presuppose a LOT of trust. “IE – I’m going to pay you $10,000/week indefinitely, and I don’t know what I’m going to get?” – With some of the above, that’s the nature of the relationship – you pay for a team’s time (per week, or month) and they accomplish as much as possible for you.

Crazy, I know.

Web Design, though, doesn’t really fall under any one of these strictly (in my opinion). It’s a balance of various types of clients, with communication needs, technological understanding, and, probably most importantly, budget. Each project will have set, strict needs – i.e., the name web design presupposes that a design will have to be created and then all the steps that follow to get it up and working on the web. But things start to get tricky when you add contact forms, membership sections, forums, and integrations with a company/clients’ existing tools.

• “I want to accept payment automatically for invoices through my website.”
• “I want members to be able to post courses, videos, etc. for sale, under their profile and take a commission.”
• “We need to be able to pinpoint whether a particular restaurant delivers to the exact location.”
• “Can we get the website to integrate into our physical machinery to begin printing cabinets as soon as an order is submitted – the factory is in another country…” – Yes, we really worked on something like this once!

So, as you can see, none of the above really has anything to do with design. Additionally, one of the most interesting things about web design is that, unlike other media, the production process affects its exposure. Basically, the way we structure code, the way we create and add stuff to a site, plays ONE OF THE MOST IMPORTANT ROLES IN DETERMINING WHETHER OR NOT IT WILL GET SEEN.

It would be akin to the process of designing a magazine ad – and saying that the way you build an InDesign file, or Photoshop file, will determine HOW the editor or designers place your ad in the magazine.

Never before has such a technical process had such an impact on marketing success (thanks to the Internet & Google).

Connecting the above two dots – not only is the line between web design and heavier programming/engineering-centric tasks blurred, so is the line between design/development & marketing. I’d argue your web designer is responsible for the success of your website. The company you choose – their code – must take into account who you are, what you’re trying to accomplish, and specifically, add (in the proper ways) the keywords for which you want to rank.

And this is just the beginning 🙂 – a company’s success online is determined less by its initial site, but more by what it continues to do – add content, network online, advertise online, etc.

With all of the above considered, what does our process currently look like? Let’s take a look:

The Web Design Process

Pre-Production

Pre-production refers to everything that’s done before we touch software related to a project. It’s fact gathering, research, etc.

1. Sales & Research – The sales process is one of the most intriguing steps to me (and the one I’m directly in charge of, and I NEVER thought I would in any way be involved in sales). How do you get someone, or a company, to trust you? To spend their money with you? Our current average sales take anywhere from 1-4 months from initial contact or connection to contract signing. During this phase, we put a lot of research into what we’re proposing, be it just a site or more. We look at keywords and methods of implementation to present to our new clients the best range of services that will fit their particular situation.
2. Client Launch Meeting – Once all of the sales details have been formalized and a general outline of what is to be provided is created (i.e., the contract), we bring our clients in for a launch meeting. In the case of a website, we’ll re-review what was discussed during the sales process and dive deeper into specifics. We’ll then work with our clients over the coming days/months to completely flesh out the internal documentation that allows us to effectively execute a site (once approved) VERY quickly. This is most commonly the step where we discuss imagery, motifs, sitemaps, etc., with clients and help to guide them towards the site that works the best for their business and personal needs.
3. Internal Launch Meeting – Once the above is completed, we’ll have an internal launch meeting where the team members dedicated to a particular project are briefed on all of the details of said project.

Production Begins

Production is where we “start doing stuff,” although there’s probably about 20 – 30 hours on the above steps alone, they’re typically planning steps, so Atilus doesn’t have anything exciting to show off quite yet. But we think the planned & budgeted communication in this way is what differentiates us, what allows us to retain clients for years, and what allows us to execute not just what our clients want, but combine that with our understanding of the web – to provide what they need.

1. Wireframes, Designs – The two steps at the beginning of production are really combined and often handled by separate resources. In this step, we create a wireframe – literally a quick sketch on paper (or the computer) as to what will go where – navigation, etc. We’ll then take this, once approved by the client, and design an example of exactly what the site will look like once complete. This is a flat file, produced with Photoshop. This is probably the most exciting step in the process, and we dedicate a lot of time to the actual presentation of the design, for feedback and updates, in order to ensure our clients are happy. We’re actively communicating with clients during this and all steps in this process via email, phone calls, and our internal project management system.
2. Hosting Setup, Front-End Development & Software Installation – This is “boring”.  That’s in quotes, because personally, this used to be my favorite step in the process when I was doing it. I love the idea of actually taking a site from a flat file to a living site. There’s computer stuff in the background; we have to make this happen. We allocate space on our server for the site, take care of domain name things for our clients, and just get it working.
3. Site Launch – At this step, everything’s been green-lighted, all text is in the site, all imagery is selected and in, and we launch the site live.
4. Post-Launch (Marketing) Steps – We’ve had this step since the beginning. The launching of the site is really the most critical phase in marketing your company or website online. At this step, we go through 15 different steps to make sure the site is as search engine optimized as possible and to give it the best leg up online. This means configuring things like analytics, AdWords conversion tracking, submitting the site to webmaster tools, etc. At the end of the day, just doing all we can to improve the performance of our clients’ sites both initially and for the duration of their time online.
5. Post-Launch Meeting – Finally, we set a meeting with our clients for a coaching session on how to use their new site, SEO best practices, tips on blogging, etc. We also wrap up this meeting with a 3rd party review of our process. Someone from our team who our client hasn’t worked with directly asks a couple of simple questions about our process, their experience with us, and at which time they provide feedback. From that feedback, we adjust all of the above 🙂