How to Redesign Your Website (like CoSchedule) in 10+ Easy Steps 72
The blog post headline analyzer will score your overall headline quality and rate its ability to result in social shares, increased traffic, and SEO value.Test every headline before you publish. Try the Headline Analyzer »
Alright. So you’re about to start a huge REDESIGN of your company’s website.
That’s no small task, and quite frankly…it’s intimidating.
301 redirects, copy, coding, A/B tests, wireframes, sitemaps, planning!
And that’s just the obvious ones.
This summer, CoSchedule’s product marketing team made the bold move to update our entire website. And while researching and learning from others was a huge help, the resources out there were pretty minimal (especially for small teams) like us.
So, we decided to recap our experiences and share some life lessons.
Here it goes: This is how two people (in-house) built a website from scratch in 4 months.
1. The Five Day Brainstorm Sprint
There’s an awesome book called Sprint: How to Solve Big Problems and Test New Ideas in Just Five Days. If you haven’t read it, here’s a great starting point:
And it’s basically what we did.
In a week’s time, we created three very different storylines with accompanying Photoshop designs. We forced ourselves to create a story, design it, and present it to leadership every other day. It was scrappy and tad intense, but it got us where we needed to go…
We started with anything and everything. Pushing outrageous ideas quickly—to help us flesh out ideas, build off of them, and create the official CoSchedule story.
From a comic book feel with super heroes to little robots guiding marketers along their journey, each idea brought us a little closer to the final story.
2. Plot Out Your Sitemap.
Put a name to every page on your new website.
It doesn’t have to be overly complex, Megan (product marketing’s awesome UX/UI designer) built one in less than an hour. And with a high level view of your new site, you’ll be able to build a strong path for conversions and a strong storyline to guide them along the way.
3. Write Your Copy Before Design.
Before a single wireframe was created, every line of copy was written for EVERY page. We spent a good three weeks creating skimmable content and placing a major emphasis on good headlines for each talking point.
- Write a minimum of 25 headlines per talking point and (if you can), test and iterate on them with a team member. CoSchedule’s Headline Analyzer is a great tool for writing headlines .
- Use the “but why” process to find your users WIIFM (What’s In It For Me). Before a single word is written, ask yourself this question to get to the real benefits or the real reason why anyone would care to read x blog, page, email, etc. If you haven’t already, watch Simon Sinek’s TED talk on Why ← it’s a great starting point to building a story your users will care about.
4. Build Wireframes For Your Designers Sanity…
Wireframes are the skeleton to design AND if you want your designer to still love you at the end of a project, DON’T skip this. Wireframes are a lot like sitemaps and are a simplistic view of a page layout. They help ensure that when designing really starts, you aren’t caught off guard by layouts and can move forward quickly.
5. Start With Photoshop, Then Code.
Create high fidelity designs of each page. Similar to writing copy for every page BEFORE design, high fidelity design should be done BEFORE code. Again, it’s a necessary step because it eliminates the need to “imagine” what your page or elements of the page will look like and makes changes easier (because you catch them earlier).
6. A/B Test (Tn The Midst Of Process).
Start testing your assumptions early.
After creating your copy and initial PS designs, start testing out a few of your ideas on your existing website (think elements: headlines, logos, images, etc).
Quick How-To for Creating An A/B test:
- Create a hypothesis: Based on your current sites performance and the particular element you’d like to test – create a hypothesis to build your test around: For example: “Replacing the static image on the homepage with a autoplay video will increase conversions“
- Test it: Create a variation of your hypothesis (new homepage with video), and then A/B test it against the original page. Calculate the test duration with respect to your monthly visitors, current conversion rate, and expected change in conversion rate. (VWO will help calculate all of this for you – HOWEVER if you don’t have this, here’s a calculator).
- Analyze it: Dig into your results and see which variation performed the best. If there’s an obvious winner, go ahead an implement that variation to the real website. If results were a tad muddy, revise your hypothesis and keep testing.
We tested a few headlines and added a video to the homepage during our website redesign, and saw a 6% increase in conversions → pretty awesome validation!
It pays to test early. Never rest on your assumptions: prove and disapprove them with data!
Recommended Tool: VWO for A/B testing. It’s great for non-designers and quick A/B experiments. Use “quick learnings” to get faster results when you can’t run a test for an extended period.
7. Coding: Once Designs Are Approved, Code It.
Once you’re at the coding stage – stick to the plan. Focus on pushing out code, getting it out into the world, and iterate on it AFTER you launch your new site. Aside from minor bug fixes, avoid major overhauls at this point.
8. Push Code to your Staging Site (For Review, Edits, etc.)
This is where all your hard work comes to life (behind the curtain). Here you can test and revise the functionality of your designs.
We use Meistertask for our QA (quality assurance) phase. Similar to many Kanban views, its helps us to track the progress on edits – as well as – test, retest, and sign-off on edits. You can create custom phases (open bugs, in progress, review, and done) and utilize Skitch to create visuals (your designer will love you for this).
9. Plan Time in the Project for Bug Fixes…
You will have bugs, so plan for it.
Recruit folks from the team to purposely test and break your website (so real users don’t have to).
In addition, test user experience during this phase. Observe a friend or team member, someone who hasn’t been involved in the project, click around the new site. Take notes and be ready to make changes. Getting a new set of eyes will help to validate if the user flow is second nature or clunky.
Remember: Good design just works. If your user has to “think” – you’re doing it wrong.
10. Go Live! Hold Your Breath and Release Your Hard Work Into the Real World.
The 10+ step: Keep A/B Testing.
Launching your new site is NOT the end all be all. It’s just the beginning.
Throughout your redesign process build a list of various items to test: color, images, copy, video, etc.
And then build out a schedule for testing those ideas a few weeks after your launch. Remember, your website has one goal: to convert visitors into paying customers. And if you want to increase conversions, A/B testing will help you to determine what’s is and isn’t working with your new design.
Write Your Copy in the Customer’s Words
The best way to sell to your ideal customer, is to use the phrases and words of your current customers. They’re your best advocate and they speak the buyer’s language.
So how do you do this?
When creating copy for CoSchedule’s new site, we went through pages and pages of customer surveys. Polldaddy has this awesome feature that creates word clouds of the most populars words and phrases AS WELL AS a filtering option to rank popular answers (I relied on both of these heavily).
In addition, customer interviews were part of the process. Over the project, I scheduled and recorded Skype calls with some of our current customers to find their stories. It was a great way to get natural, candid responses to how and why they use CoSchedule.
Daily syncs (more meetings can be good, if done with a purpose)
Before this project, I was definitely on team “less meetings, more doing”…
But after this project I realized the problem isn’t the meetings, it’s the FOCUS in those meetings. For our entire redesign, the product marketing team met for 30 minutes (or less) each afternoon for a hyper focused status update and feedback on our individual projects.
These daily syncs helped us produce faster and push past blockers sooner. It was a highly focused meeting with an enforced timeline. And because of these guidelines typical meeting bullshit was rare. People left those syncs with clear action items and good feedback on their work.
Recommendation: Pick two action items for each sync. Skip the small talk. And go right into the area you need feedback on – copy, wireframe, design – whatever it is. Remember, you’re on a time constraint, so honor it. Also, if you’re doing your syncs over the web, it can be awkward knowing – how and when – to end a meeting. Embrace the awkward, and just call it when it needs to end (time is precious, and you’re doing everyone a favor).
Dream first, then commit to a focus
Early on in our redesign project, we did a five day brainstorm exercise (see above). All absurd, off the wall, and strange ideas were put on the table. We developed three stories (with accompanying design) in those five days.
The typical process is to jump in head first and start designing the first idea that comes to mind, but rarely is that the best option. Sometimes it is, but it’s worth questioning and trying a few options beforehand.
Questions to get you started:
- What is the #1 goal for this project? (conversions? traffic? etc)
- What assumptions are you making? <– what do you assume will happen from this redesign?
- Based on data, what is performing well on your current site (and what sucks)?
- What do you like/loathe about your current design? And why?
- If time were not an issue, what would your redesign look like?
The planning/brainstorm process is great for that. It helps you to question your initial ideas and stretches you to look beyond current trends to find something that really stands out and is uniquely your own.
Faster sprints push for better design
More often than not, the best results come from moving quickly. Our natural tendency is to overthink and be cautious; by forcing results faster, the lizard brain doesn’t have time to invoke fear.
Like Jake Knapp says in the book Sprint, “My best work happened when I had a big challenge and not quite enough time.”
[Tweet “My best work happened when I had a big challenge and not quite enough time – @JakeK”]
These time constraints produce innovation; forcing you to create quickly, cut out the unnecessary parts and focus on what will produce results.
Help Avoid Pixel Pushing (for your designers).
When creating your initial designs, be wary of pixel pushing. Often times, during the initial design phase, one idea is created and then “alternate variations” are really just changes in the background; a different picture here, new color there, but the overall concept is basically the same.
To eliminate this trap, you need to be comfortable with the “blank slate” and exercise it often. Producing good design requires creation, review, and trashing. Like stories, our first design is rarely the best idea. And by physically deleting a design, you force yourself to create a completely new idea (which can be both freeing and overwhelming) but all SO worth it.
Redesigning your ENTIRE website is no small feat. And with so many moving parts, decision makers, and options, it can easily feel overwhelming. If you take anything from this post though, know that there is no perfect process.
Take what you like from our website redesign process, leave the rest, and make it your own. We’re all learning as we go and the more we share our experiences — the better it is for everyone.
Got any “lessons learned” from your redesign project? Let us know!
September 9, 2016