blogTest | 4SDS Danville

October 2nd, 2016

How long does it actually take to build a website from start to finish?

by Steve Forcash

For-eeeeeh-va. Okay, not forever, but you're not going to knock out an effective website in an afternoon. We'll look at the end to end process that we went through for the relaunch of 4SDesignStudio.com

For 4S Design Studio, we’ve obviously been intimately involved with the business since day one, but that doesn’t mean we just shot from the hip. You absolutely have to have a process.

Let's get the disclaimers out of the way

Before we begin here, let’s qualify this article by saying that this isn’t going to be a laundry list of every possible step that needs to be taken for any given web development project, but it is meant to be a 10,000 foot view of the process. We could spell it out 100 different ways, but each project is different. You knew that already. Projects vary in scope, complexity and each has different goals in terms of the business.

For point of this article, we’re going to go through the process that we’ve been working through for the relaunch of 4SDesignStudio.com. While that project will be different from many client projects because of our ownership of the material (it’s our company), the only real differences would be on the front-end, as our discovery process has taken place over the course of almost 4 years instead of the significantly shorter window we’d have with a new client.

Every Web Development Project, Whether Internal or External, Needs a Discovery Process

A solid, structured discovery process is critical to any project’s success. We won’t bore you with endless paragraphs on our entire process, but in short, we need to be able to understand your business, your goals, your customer, your competitors and then all of the components that will need to be put in place to create and implement an effective digital marketing strategy. Secondly, the discovery process allows us to effectively scope out a project and make some realistic recommendations on budget ranges and expectations within those ranges.

For 4S Design Studio, we’ve obviously been intimately involved with the business since day one, but that doesn’t mean we just shot from the hip. We spent significant time prior to getting started on the new build to understand where we stood in the market currently.

We’re based in the San Francisco Bay Area – a metropolitan market with roughly 7 million people spread between 9 counties. While we’ve taken web development clients from coast-to-coast and all over The Bay Area, our marketing efforts from day one were focused on the San Francisco East Bay. If for nothing else, it was an easier nut to crack from a search engine optimization (SEO) standpoint - a critical component of our lead generation. We’ve had a lot of success there – We rank first on Google for most “East Bay Web Design” type searches and our lead generation as a result is sizeable.

Know what you're working to accomplish

So the big question in our own discovery process was, “Can we expand to start targeting The Bay Area as a whole without jeopardizing our current rankings in the East Bay?” We spent a couple weeks working on keyword research and profiling similar sized web development agencies in the San Francisco Bay Area to make sure that the structural changes we planned on making didn’t cannibalize our past success.

Figure out what your message is and then refine it. Then refine it again. Scrap it altogether and start over if you have to

We wear a lot of hats as a boutique web design company in the San Francisco Bay Area. Of course we design and develop websites, but our business has grown on the backs of our ability to deliver more encompassing solutions – specifically, the inbound marketing component. So we design websites and we develop & implement content strategy (something our original site barely touched on), but we also help clients with branding projects, graphic design, photography and even some general IT work. While we’ll continue to do those things, our discovery process narrowed our focus down to our core competencies – Web Design and Content Strategy. From a marketing standpoint, we’re not going to invest resources into developing stand-alone graphic design, photography or other campaigns. We do those things, but as a compliment to our core services.

Budget for a detailed discovery process - Likely more than you want to. It will pay off. We promise.

So without going into too much more detail, we already had a strong understanding of our business, but we still took the time to go through a structured process to focus ourselves on where we’re headed, where we can improve and then to schedule out a timeframe to complete the transition to our new platform. We also ironed out the budget necessary to do this correctly, which being an internal project, was primarily man-hour based. That’s a real cost.

For us, we collectively spent just shy of 40 actual man-hours over 3 weeks on the legwork pieces – Message refinement, market research, keyword research, competitive landscape and overall content strategy. The process started in July with a goal of a late October launch, mostly because we knew our current bandwidth and what our project load looked like during the process. Is that a realistic discovery timeline for many of our clients? Some yes, some no. We’d love to be able to take that amount of time with every project as it really does pay dividends on the back-end, but we’re pragmatic as well.

Long story short, you should go into any project (with any developer) with an expectation that there will be hours spent on the front-end doing the legwork to have a real plan in place. Maybe that’s 10 hours and maybe it’s 100.

You talk too much. I'm ready to talk about our project

Whatchya working on?

Time to have some fun - Working on the design

The design phase is generally the most fun, both for us and for our clients. It’s where we start to visualize how the pieces will come together and what it’s going to look like. With the 4S Design Studio build, we had a general sitemap in place which was edited for our go-forward content strategy. We identified which content was going to be pulled in from the original site and what would need to be created. We knew we were going with a long-scrolling design and we knew the focus would be on highlighting both the webDev and content marketing pieces. Finally, our portfolio needed a serious refresh, both with new projects and we wanted it to be more modular so that new projects could more efficiently be added as time passed.

More efficient design through wireframes and static mockups

When working with a client, we’ll generally use wireframes – Bare bones placement of elements on a grid so that we don’t waste time with multiple static mockups that don’t go anywhere. Even for simple sites, we’ll spend at least an hour or two working out a general layout for the homepage and at least one sub-page. For larger projects, this can stretch into days fairly easily. Once a consensus is reached with the client, we’ll move into actual designs where we start working with images, typography and colors.

We already had a general idea of the look and feel we were going for, but we did spend a few hours looking through other sites for inspiration. We're big fans of awwwards.com. We’re also in the industry, so we’re pretty keen on bookmarking sites that we come across that sing to us. All said and done, we had about 30 hours on the books into the general design of our homepage, our portfolio layout, the layout for our core pages and finally, a similar but different layout for blog style posts like this one.

Great design means nothing without great content

Like many of our clients, a reasonable amount of our content would be migrating to the new site, but much of it had grown stale and out of sync with our actual business. While yes, we do build “blog sites”, advertising this as “we build blog sites” is sort of like McDonalds advertising that they sell cookies. Worse than that though, there were just these gaping holes.

Have a purpose for your content and create content purposefully

A sizeable percentage of our business is helping clients manage inbound content marketing campaigns. We build these fantastic marketing machines for our clients. Our site was not only NOT telling this story, it simply wasn’t acting like a machine for us. We had admittedly done a great job with the SEO piece, but we weren’t doing much of anything to convert the resulting traffic from site visits to leads to new clients. We were simply getting lucky.

So obviously that needed to change but that’s also a longer term proposition that we’ll be working on for the foreseeable future. Prior to launch, we needed 4 new portfolio pieces, we needed at least a foundation to explain the inbound marketing portion of our business and we needed a couple of immediate blog posts to target some low hanging fruit search terms identified during our discovery keyword research.

Writing compelling content takes time. There's no way around it. You've hopefully spent all of this time during the discovery process to refine your message, but articulating that message in long form is so often where the rubber hits the road. You're looking to strike a balance between achieving your sales goals while not selling your soul to stuff a page with SEO drivers. Clea Hernandez, a copywriter we have a lot of respect for, has a great two part piece on content copywriting called "Keeping it Real: Writing with Intention" that really hammers this home. You can see part 2 of that piece here.

It takes research. On a good day, it takes a couple rewrites. And then there's editing. Then there's some more editing. And finally, there's some more editing. Less is more, something that judging by the length of this article, is something we continue to struggle with.

We’re wrapping up these content pieces as I write this. Prior to launch, we’ll have somehwere in the neighborhood of 40 hours into our initial content development and our goal is to allocate about 10% of our budgeted man-hours towards continuing with our inbound campaign.

The puzzle pieces are all turned over. Time for some clean, well-documented code

If you’re still with me here, we were about 100 hours into the project and the only code that had been written was to test how the video background might look on our homepage with some various fonts and color schemes.

This website isn’t that complicated, which is a good thing. There’s no real eCommerce component. Our general responsive framework is one that we use often and didn’t require a lot of customization. There’s some behind the scenes integrations that were new for us, but we were already familiar with those platforms because we’ve used them on multiple projects with clients. In short, we were able to invest more on the front-end research and content pieces, realizing that the technical components weren’t going to capsize our budget.

As far as actual coding goes, we knocked out the vast majority of the site in about 12 hours. We’ll have some tweaks to make here and there once we go through a final testing phase, but in short, the actual coding piece was quick.

Testing. Testing. Is this thing on?

Nobody wants to see their site launched only to find out there’s a bunch of hiccups or usability issues. It's perhaps extra embarrassing for a web development company. The nice part about testing is we’ve got a solid process in place and we use a number of tools to automate that process. We’re spellchecking, we’re testing all of the links throughout the site and we’re making sure the layouts on mobile, tablet, laptop and large-format monitors all look the way we had planned. We run our code through compatibility testing and then test it against W3C compliance.

Spend the time to optimize your meta and hosting

We need to put the finishing, behind the scenes pieces in place. Much of this is working with meta tags where we’re making sure our Google listings show up the way we want them to and that when we share something on Facebook, we’ve defined which images and text we want to show up in those posts. We’re making sure our Google Analytics and other marketing automation tools are all firing correctly and included on EVERY page. We make sure that when a user clicks through various links and forms on our site, that we can track those things to better understand how our potential clients are using our site and its content.

Last but definitely not least, we need to spend the time to work within our hosting environment to handle any redirects from old pages to new pages. We don’t lose any of the “Google juice” we’ve built over the years and taking the time to properly handle redirects is critical.

Having been involved with as many projects as we have, we’re pretty good about keeping up with most of those housekeeping pieces throughout the development phase, but even then, we have 8 hours budgeted for testing and optimization and it’s not unusual for that to run over a few hours.

Wrapping it all up

We still have a few pieces to finish up, but we’ll have invested at least 130 hours into 4S Design Studio’s new website which will have roughly 20 pages at launch. Does that mean your project will need 130 hours? We won’t know until we get a chance to talk about it, but that’s not unrealistic by any means.

I would say we invested more on the front-end discovery process than many of our clients, but we’re confident that will provide a significant ROI on the back-end as our content strategy matures. We also had an advantage due to our intimate familiarity with our own business.

We're excited to launch our new site, but launching doesn't mean the job is done. If anything, it only gets more involved from here. We've planned our work. It's just about time to work our plan.

How Long Does It Take to Build a Website