How To Redesign Your Website Like CoSchedule In 10+ Easy Steps

How To Redesign Your Website Like In 10+ Easy Steps Alright. So you’re about to start a huge REDESIGN of your company’s website. That’s no small task, and quite franklyit’s intimidating. 301 redirects, copy, coding, A/B tests, wireframes, sitemaps, planning! And that’s just the obvious ones. This summer, ’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. The Process: 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 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. Recommendation: Write a minimum of 25 headlines per talking point and (if you can), test and iterate on them with a team member. ’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 youd 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 dont have this,  heres a calculator). Analyze it: Dig into your results and see which variation performed the best. If theres 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 youre 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 youre 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. Its 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 whats is and isnt working with your new design. Lessons Learned: 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 ’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 . 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).