How we built a website in 5 months
Building a company website used to be an incredibly demanding task, often plagued by miscommunication, disorganization, and things falling through the cracks. While still difficult, today more than ever we have a multitude of resources at our disposal that can help ease the process.
At Replicon, we recently completed a full remodel of our website, converting from Drupal to WordPress, migrating hundreds of pages, and implementing an entirely renovated design and layout. We did this in five months, which, for a website our size, is a fairly ambitious timeline. For those of you looking to follow a similar timeline (without sacrificing quality), we’ve compiled these handy guidelines for building a website from the ground up:
At Replicon, we had a clear need for a website remodel. Our old site felt outdated in a way that didn’t reflect our products, so we wanted to use this project as an opportunity to rebrand, clarify our message, and present our products and ourselves more intuitively online. There are, of course, many other reasons to justify a website overhaul – the important part is to make sure you have some. Clearly delineating what you want from a new website (and where your current one falls short) helps pave the way for the entire process. Find your bottom-line goals and stick to them.
Partnering with an agency:
For us, our bottom-line goals were improved conversion, a more appealing, intuitive layout, and a new CMS (WordPress). Having personally worked with Vital before (at a previous company), I knew they were the ideal partner to get the job done. An award-winning digital agency that emphasizes brand and website design equally with conversion, SEO, and inbound strategies, Vital struck the right balance for us between design and performance. The success of a website project relies heavily on the success of your partnership with a digital agency – make sure the company you choose understands your needs and brand aspirations. It doesn’t hurt to check out their own website as well. Is the layout thoughtful? Is the design compelling? Does it convey their brand values well overall? A little due diligence here goes a long way.
Of course, there are many instances where a website could be created in-house. We ultimately decided to seek out an external agency because of our transition from Drupal to WordPress – Vital has extensive WordPress expertise, and we wanted to tap into those resources.
Initial contact & onsite meeting (Week 1-3):
To get started, Vital sent us an extensive questionnaire, in which we detailed everything from our brand values, top five competitors, and target audience, to what our preferred colors are, what websites we admire, and any anticipated challenges or goals for the project. This is your chance to give the agency any and all information they might need. Lauren Formalarie, our Vital rep, puts it this way: “We need to become just as good as you are when it comes to knowing your brand and your product – we need to know how your product is positioned, how you speak to customers, what differentiates you, etc. We need to be experts.”
Try to stay away from delegating this initial discovery process to one person – you want all key decision-makers to offer up their knowledge of the brand, and their aspirations for the new website. By looping in key people right away, we were able to get everyone on board with a budget, timeline, and project goals fairly quickly.
Vital then reviewed our completed questionnaire, did extensive competitor and keyword research, and scheduled an onsite meeting at Replicon HQ. If possible, push for an onsite meeting with your chosen agency to allow for more candid discussion. Sitting down with Vital in-person, we were able to review the various example sites they presented, and they could gauge our initial reactions live for more extensive feedback.
Useful tools: We used Basecamp as our go-to resource for communication with Vital and internally throughout the duration of the project. Again, it was crucial to have all key voices in one consolidated place, and Basecamp helped us all stay on the same page.
Sitemap and page selection (Week 4):
In order for Vital to build us a sitemap, we looked to Google Analytics to create an inventory of our top-performing pages in terms of leads, sessions, traffic, etc. Additionally, we sifted through every page on our existing site, and decided which pages were redundant or ineffective. This process helped streamline sitemap creation by pinpointing our most important content, and eliminating unnecessary content right off the bat.
Make sure your sitemap goes one to two layers deep so you can visualize how everything flows together. Try to really build out the paths you want your visitors to go down.
Useful tools: Vital used Gliffy to create and present their sitemap (see an example sitemap here).
Wireframes and site design (Week 6-11):
If your website were a house, then the wireframes would be your blueprints. The homepage wireframe is arguably most important, as your homepage sets the tone for your whole website, and should showcase your brand and your products well. Ideally, you want it to immediately iterate who you are and what you offer as a company, which should include not only product information, but also some sort of validation for these products (customer testimonials, etc.). Be wary of being too artsy or convoluted with your design – your homepage (and every page) should have a clear direction for its users.
It’s helpful to recruit someone who is incredibly product- and detail-oriented as your point person for this step. You want someone comfortable giving a lot of very specific, technical feedback.
Useful tools: Vital sent us wireframes in batches using UXPin, which allowed for truly precise feedback and communication between teams. Instead of having to describe desired changes in detail, UXPin lets you drop a comment directly where you need the change to be made.
Upon approval of the wireframes, Vital worked to design each interior page and the homepage using InVision – an incredibly useful tool that allows you to turn your wireframes into clickable, interactive prototypes.
New content creation (Week 12-13):
We ended up contracting a writer to update copy on our most prevalent pages. Before she even touched existing copy, we demoed her on each of our products to ensure she understood the company, the brand, our products, and the specific buyer personas we want to target. You want to maintain a consistent style and voice throughout the website, so we intentionally used one writer to do so as much as possible.
Useful tools: When it came to actually populating our wireframes with both new and existing content, GatherContent was a critical resource for content formatting and organization. GatherContent essentially mimics the structure and restrictions of your wireframes, so we were able to methodically input content for each page, and ensure that it conformed to its corresponding wireframe.
Development (Week 14-20):
When it came to coding the new website, we were happy to let Vital’s team of developers take the reins on this one. If you’ve chosen your digital agency well, and armed them with all possible information, you should feel confident in their ability to get this done.
On your end, now is the best time to start planning the logistics of your website launch (think internal communication, customer and partner communication, marketing strategy, social promotion, etc.).
Bug bash & pre-launch SEO (Week 21):
Vital had its own QA team that tested the site for about a week before sending the dev link over to us to do our own testing. Once we had the link, our team and a team from Vital began documenting any bugs or other issues we encountered (form issues, missing images, functionality errors, etc). Even with an aggressive timeline, it’s best to give yourself at least a month of leeway before launching so you can really do some comprehensive testing on your site.
For pre-launch, Vital came up with a list of relevant keywords for us to reference, as well as SEO best practices documentation. With these tools, we added new keywords and meta descriptions to pages, and completed over 5,000 redirects. To ready the site for launch, Vital dug deep into the SEO trenches to look for any errors (i.e. broken links), and ensure the site was set up from an analytics and tracking perspective.
Useful tools: We used GitHub to document the errors we came across. Having one consolidated form for all feedback should help reduce redundant testing and significantly speed up this process. For the pre-launch SEO, GatherContent has an SEO tab to add keywords title tags, meta descriptions, and URLs.
A website is never finished, so prioritize fixing the functionalities that are absolutely critical for launch, and set aside what can be taken care of post-launch. At the end of the day, we wanted our website to perform its fundamental function when launched (capturing leads), so we prioritized forms, our most visited pages, and our pages that bring the most conversion. Post-launch we’ve continued to test and tweak the site – something made that much easier with WordPress as our new CMS.
Many thanks to our team at Replicon and the folks over at Vital for their hard work and dedication to this project. See the finished product at Replicon.com.