10 steps to a 90-day website renovation
Or, “How I learned to stop worrying and ❤️ post-it notes”
What happens when your website no longer meets your needs, and it’s time to redesign? Whether due to market shift, the old version starting to look dated, or a change in your product strategy (PIVOT!), times change and websites must too.
At Granify, we hit that point this year, and had to answer the question. I’m a big believer in asking questions about questions; sometimes you sound like a 3-year old (“Why?”) but I honestly believe that you can get the best answers just by asking a few more questions.
Here are 10 crucial questions (and of course, some sub-questions) we asked ourselves that guided our process and led to our new website launching in only 3 months. Hopefully they can help you with your next website redesign.
Step 1: In-house or agency?
While this is not going to be the answer for everyone, the internal vs. agency question boils down to:
Can your team design, build, maintain, and iterate on a website at a similar or lesser cost than an agency?
In our case, after some rigorous project planning and estimating sessions, we felt confident that the answer was yes. With one designer (in this case yours truly) and our Director of Marketing allocating their focus to the project, and accounting for supporting internal resources, we outlined a plan to rebuild the site in 3 months.
Taking into consideration other benefits, such as pride of ownership and codebase familiarity, we presented the plan to our executive leadership and reached consensus that the site would be built internally. Stakeholders for each stage were defined early.
So what comes after deciding the “Who?”
Step 2: Where will the site live?
Whether you already have a live website that you are replacing, or are starting from scratch, the biggest question here is:
Which tool gives you the best ability to maintain, optimize and iterate on our site over time?
At Granify, our site has always been hosted on Hubspot. While it had served us well historically, the redesign presented a prime opportunity to explore other options.
We looked into migrating to WordPress, as well as hosting on our own servers. While each had pros and cons Hubspot’s interface, WYSIWYG page editor, COS system, and site management tools proved to be the best solution for our needs. As one member of the team said,
Hubspot does a lot of useful things, it does most of them really well, and it doesn’t do anything poorly.
Plus, our design, marketing and sales teams already knew how to use it; no extra overhead in on-boarding the entire user base to a new tool.
So we knew where the end product would live; now to the drawing board.
Step 3: What are the goals of the website?
You never want to get too zoomed-in on the small things too fast. At the outset, you need to identify at a high-level:
What, at its core, does this website need to accomplish?
These goals should drive your subsequent decisions at each step of the process to come.
For Granify, we needed our new site to enable and enhance our:
- Demand generation
- Content marketing
- Culture & recruiting
Once we knew what we needed to do, we started getting into those weeds.
Step 4: Who is this site really for?
It’s all about the user, right? To make a website that users will actually find useful and provide value, start by asking…
What are the biggest opportunities and pain points for your users?
Our People team had already done a ton of research into the goals and problems of potential future team members, which proved to be a huge help in directing that section of the site.
To zero in on demand generation solutions, I worked with our Growth and Product teams to uncover the biggest pain points of past, present and future partners. We bucketed areas of focus by user type (marketer, executive, product manager, CRM specialist, IT, and so on) and prioritized accordingly.
Were there post-it notes involved? Oh, let me tell you. There were post-it notes involved. We aggregated broader user data into discrete goal-based groups through which we could provide better context to frame our message.
So with your audience and goals in mind, let’s talk about content.
Step 5: How will the content be organized?
This is where the sitemap comes in. What are your top-level pages, where do you need to create deep paths, and where can you offer everything at once?
What should your users’ journeys look like?
For our purposes, this entailed two primary user types: prospective partner and prospective Granifite (what we affectionately call members of the Granify team 💚).
Of course there are distinctions and divergences among those users, but our focus landed on creating a deeper potential journey for our Solution and Company sections of the site; to enable prospects of all types to learn more about our cutting-edge product and our world-class people (for real, these people are wicked smart + talented).
We used Writemaps for our site-map planning purposes. It was easy to plan and modify content structure on the fly, as well as share with stakeholders for quick review. Would recommend.
Step 6: Where does your in-progress content live?
As a website progresses, content gets refined more and more. With copy breaking out of a sitemap’s bullet points and growing increasingly specific, what we found really matters is:
Who is doing the writing ?
If your team is still defining the content, your focus is checking for accuracy in details and collaborating in real time. Google Sheets is probably the best place to do this. Our sales and product teams spent a lot of time collaborating in documents to get the direction nailed down early on.
If you have a dedicated copywriter or content marketer on your team, they will likely have a preferred tool of their own; the G Suite worked well enough for us, but the writing and refinement portion was probably one of the more ad-hoc portions of our project.
As we got into grammatical edits, Hubspot’s page editor worked great for us as anyone making copy changes could do so in seconds.
Step 7: How is it all laid out?
Once you have the content structure mapped out in the aforementioned sitemap, you can start planning for hierarchy and interaction.
What order does this information need to appear in, and where should it take the user next?
You may have heard of my well-documented love of Figma as a collaborative design tool. Working in tandem with another designer we built out wireframes for the full suite of pages over the course of a few days.
Using a component-based system, we re-purposed similarly-composed blocks of content across various pages, in a way that would easily translate to Hubspot’s modular page-building system.
From there, we built interactive prototypes in Atomic to start some early-stage user tests and make sure the journey felt right. Clicking something and seeing where it takes you is a more authentic experience than simply following a sitemap. So now…
Step 8: How do you approach final visuals?
With the planning, strategy, and wireframes complete, you need to determine the best workflow for your team to get into high-fidelity visuals. For us the question was:
Do you build in the browser or create mockups?
While I love a good mockup, and our Figma wireframes could have been converted to hi-fi visuals with minimal effort, we decided to go straight into HubSpot to build working, interactive visuals from the jump. Why?
- Internal changes on our design team forced us to optimize on a leaner site-building process
- I know my way around a CSS file, and we have killer front-end devs on hand if I got in over my head with too much *gasp* jQuery
- Increased confidence that the HubSpot platform and its modular page-creation tools could support this process
- Our early design strategy involved the creation of reusable components that could be tailored to suit multiple use cases
Step 9: What to do with the old site?
Since you’re more than likely replacing pages that already exist, you need to decide where to bury the proverbial page bodies. This can get more complicated than it needs to be, but ultimately:
What is the best way to smoothly replace an entire website worth of content, and make sure people can find it?
Hubspot has a staging feature that allows you to do 1:1 replacement of existing pages. While this feature likely would have saved us a day or two along the way, our all-hands-on-deck approach in the previous days of the site meant that there were not just new pages to add, but old pages to re-organize and remove.
The ability to archive & un-publish allowed us to quickly and easily make old pages… disappear. We used Hubspot’s URL mappings tool to redirect any adjacent pages to their new counterparts. For example, our previous parent-level Careers, About, Our Story, Contact, and Press pages were now siblings under an Our Company parent page. There was a similar re-structuring of our How It Works family of pages that became nested under the new Our Solution page.
As we cleaned up old pages, we used the sitemap editor in Hubspot to ensure we were indexing only the new and relevant pages.
With all that done, using Moz and Google’s Webmaster tools to ensure that our SEO was all in order was the next step. With that done, it was time to talk launch.
Step 10: How do we show it off?
So you have this new website, cool and functional and good, very exciting. But… all of that means nothing — if nobody knows about it.
What are the most effective means of unveiling the new website?
You’ll likely want to roll out a wave of PR and/or paid advertising to get as many eyes as possible on your product. There are some free and low-cost PR distributors that can get your press releases in front of the right people at the right time. Social media and blog posts can be an effective and high-ROI method of driving organic traffic as well.
At Granify, we decided to proceed with a mix of press release distribution, blog posts (like the one you’re reading right now… *inception sound*) and a social campaign that highlights high-value content on the new site.
How can I apply this to my new website?
Of course, a project that impacts such a diverse range of a business as your website is not possible without a range of support and contributions.
To egregiously paraphrase Pixar founder Ed Catmull…
“Computers don’t make websites. People make websites.”
(substitute movies for websites and he said it, I swear)
It’s important to know your team, and their needs and skillsets. By finding your answers to the 10 questions outlined above, you should have a roadmap in place to drive your next website project to a successful launch!
Check out our new website at granify.com and make sure to tell all your friends (and leading eCommerce pros) to do the same. If you have any web redesign stories of your own to share, or have any thoughts on our process, hit me up in the comments and don’t forget to mash that 👏 button (RIP Recommends, you had a good run).
