Tell me if this sounds familiar: It’s been a couple years after your last website redesign, and everything feels a bit stale and outdated.
In calls with clients, your sales team is using newer language that’s not reflected on the homepage. Your content team has to employ annoying workarounds to make blog posts look good. And you wish the team page didn’t show off your old haircut.
But let’s be honest, a website redesign can be an abysmal experience. It can carry on for months past the original re-launch date, falling victim to internal disagreements, bugs without end, and the fact that the longer it takes to build a new site, the more stale and outdated the future design itself starts to feel.
A website redesign doesn’t have to be terrible.
Lemonly just launched our new site, and let me just say, as a copywriter and developer: It was really fun. You can sense that fun in the site itself.
With a solid plan, a smart team, and leadership dedicated to both the plan and the team, your company can also enjoy your website redesign.
Here’s how:
1. TAKE STOCK
Triage the current site’s ailments, praise the pieces you love, and dream big about new features.
Set up a meeting with your main stakeholders. In a shared document, list out “love it,” “lose it,” “edit it,” and “add it” columns, and allow everyone to contribute to the list before the meeting. When you talk in person, discuss the list and take note of any new points discussed.
Here are a few of Lemonly’s notes on our old site:
LOVE IT
Blog post layout
LOSE IT
The background video on the homepage
EDIT IT
Reposition homepage copy to be ‘infographic first’
ADD IT
Blog categories: Culture, Design, Resources
2. WRITE THE COPY
Create an overview of what you want the site say, make a list of template pages, and send to the copywriter.
Using the results of step one, develop an overarching theme for the new site. In Lemonly’s case, we focused on storytelling, with our homepage following a who, what, where, how, and why structure. Generally, your homepage will lead the charge here, and once you’ve got an idea of what you want it to say, the rest of the site will fall into line more easily.
Next, make a list of the kinds of pages your site will need. At this stage, remember that you don’t need to reinvent the wheel across the board. With our site, for example, we kept our case studies virtually the same content-wise, but refreshed the design.
This is Lemonly’s list of template pages for our new site:
- Homepage
- Work portfolio
- Work archive (full archive, by work type, client, and subject)
- Single work piece
- Case studies/results archive
- Single case study
- Clients archive
- Single industry
- Blog archive
- Blog category
- Team page
- Contact page
- Jobs page
- Work examples page for clients
3. DESIGN
Decide how you want the site to look, find yourself a kickass designer, and let them work.
It’s incredibly important that your leadership can decide on a general idea for how they want the site to look before enlisting a designer. If they can’t describe the feelings they would like to invoke, there will no doubt be more than a handful of drafts before the team settles on a final.
As for finding a designer, well, I don’t have a lot of advice there. We’re lucky at Lemonly to have a creative director in Amy Colgan who performed magic in turning our ideas into this wonderful website. Here’s all I can say: No matter who designs your site, always provide specific feedback, making sure to give props where props are due. But then again, that goes with any feedback.
Even with the best designer, some ideas just aren’t meant to live on, and that will become clearer at this stage. To let you in behind the scenes a bit, here’s some copy for our homepage that ended up on the cutting room floor, for instance:
(Sidenote: While Lemonly doesn’t redesign full-blown websites other than its own, we do make some sweet interactive infographics. If you like the look of our homepage, then it may behoove you to check out our archive of interactive work, and contact us if you’re interested.)
4. DEVELOPMENT
Set a detailed timeline for development, and allow devs to try new things.
Web development might seem like smoke and mirrors to some, but really, it’s just like any other job role. A strong plan, clear expectations, and creative freedom can go a long way.
When the design timeline is ready to go, sit down with the developers to review the template list, hash out a timeline, and set individual deadlines for each page. As you go through each page with the designer present, note where devs can try out the new “web wizardry” they’ve been wanting to practice. At Lemonly, the wizardry is usually in the realm of animation, but it can also mean making the user experience as smooth as possible.
It should also be said that these steps aren’t necessarily chronological. The whole website redesign doesn’t need to be approved before individual pieces can move to development. It’s best to approve sitewide sections, such as the header and footer, before anything else. Devs can set up a site’s backend and code these sections while the rest of the site is in design.
Then as each page from the designer comes in, pass it along to the dev team and get their edits. A good developer will explain in easy-to-understand language which parts will be harder to code than others.
Most anything can be done on the web, but not everything should be done, when budgets and timelines are taken into account. Get fancy where you can, and be practical where you need to.
For curious minds, that timeline you saw above is what we set for first dev drafts.
5. INTERNAL TESTING
Give the whole team an early look, ask for feedback, and look for bugs.
This one’s easy: Give your whole team buy-in to the new site, and let them provide feedback on the first draft of developed pages. If your employees feel like they were a part of the site’s creation, they’ll be more proud of it when it comes out.
From a tools standpoint, we recommend using the ProjectHuddle WordPress plugin to collect pinpointed feedback. With it, you can leave comments directly on the site, and the tool will collect important info like screen size and browser version. If your site isn’t on WordPress, a Google Sheet will do just fine. Here’s a template you can copy if so.
6. EXTERNAL TESTING
Do a soft launch, fix bugs, do a wider launch, and fix more bugs.
Once you’re satisfied with the site after internal edits, go live. Let any visitors see the new site before you’ve shared it publicly, and send it out to friends and ally companies to get their edits. Once your developers have resolved edits, then share the site with the world.
Over time, you’ll likely get smaller edits in from your team and others. Hopefully, your devs are in-house and can tidy up any rough edges. If your site is being made by an outside agency, be sure to plan for work after the launch date, whether that’s priced by the hour or a sort of retainer.
Websites can be wily beasts, and no matter how tightly you run your ship, small bugs are bound to surface here and there past the launch. Unless, that is, you have robots building your site, in which case, we come in peace, robot overlords.
7. REST EASY
Enjoy your new site!
There are a multitude more facets to a website redesign that you can also get into, from SEO to developing a content roadmap, but if you follow this basic framework, you’re on a better path to more beautiful, more current, and more flexible online digs. Reach out to us on Twitter @lemonly if you have any questions.