Download - How To Redesign Your Website
![Page 1: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/1.jpg)
How To Redesign Your Website
![Page 2: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/2.jpg)
Partner Day Event 2015
Narrative 1
Hi.
Jeffrey Vocell Principal Product Marketing Manager
@jvocell
![Page 3: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/3.jpg)
We’re going to talk about
1. When to think about a website redesign
2. Planning your website redesign
3. Executing the redesign
4. Tips to keep your redesign on schedule, and on budget
5. Review & launch
6. A new, modern way to approach website redesign
@jvocell #WebRedesign
![Page 4: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/4.jpg)
How to Redesign Your WebsiteWhen to think about a redesign
@jvocell
![Page 5: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/5.jpg)
Website redesign is an art and a science
![Page 6: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/6.jpg)
The age of your website is one, but not the only indicator.
![Page 7: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/7.jpg)
You may see an obvious sign, like a critical metric beginning to free-fall.
![Page 8: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/8.jpg)
More than likely, it will be a combination of gut instinct and technology advancement.
![Page 9: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/9.jpg)
Marketers tend to redesign every 18-24 months
![Page 10: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/10.jpg)
At the end of the day, redesign to drive core business metrics
![Page 11: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/11.jpg)
How to Redesign Your WebsitePlanning
@jvocell
![Page 12: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/12.jpg)
Start with a baseline
![Page 13: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/13.jpg)
8 Baseline Metrics
1. Number of unique visitors
2. Bounce rate
3. Time on site
4. Number of new leads / form submissions
5. Sales generated
6. Number of pages indexed
7. Number of pages receiving traffic
8. Number of inbound linking domains
@jvocell #WebRedesign
Gain an understanding of the monthly volume of each of the 8 metrics over the past 6-12 months
![Page 14: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/14.jpg)
Add YOUR most critical business metric which is tied to your website to that list of 8
Most Important:
![Page 15: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/15.jpg)
Questions to ask8
![Page 16: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/16.jpg)
What do I like, and dislike, about my website?
1.
![Page 17: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/17.jpg)
Likes Dislikes
• Product Imagery • CTAs • Brand Colors
• Menu too large on mobile, overtakes viewing area
• Conversion path not well-defined • Site is loading slowly
![Page 18: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/18.jpg)
Is there anything missing from my website?
2.
![Page 19: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/19.jpg)
• User testing
• Win/Loss Analysis
• Competitive website comparison
• Search keywords
Some ways you can find out:
![Page 20: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/20.jpg)
Is my site meeting, or not meeting, our marketing goals?
3.
![Page 21: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/21.jpg)
What is the first impression I want to convey?
4.
![Page 22: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/22.jpg)
• Deeply understand the personas you are marketing and selling to
•User testing / Heatmapping
• Bounce rate
•A/B Testing
First Impressions:
![Page 23: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/23.jpg)
What is my budget for this redesign?
5.
![Page 24: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/24.jpg)
What is my timeline for this site redesign?
6.
![Page 25: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/25.jpg)
• Come up with a proposed launch date, then work backwards todetermine a plan.
• Most redesigns take 3-4 months, and could take longer if it’s complex
Timeline:
![Page 26: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/26.jpg)
Can we do this redesign in-house, or should we hire an agency?
7.
![Page 27: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/27.jpg)
• Do you have a developer, and designer on staff?
• If so, based on your timeline, what does their workload look like?
• Is your budget inline with redesign costs?
In-house, or Agency:
![Page 28: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/28.jpg)
Are we going to switch CMSes during this redesign?
8.
![Page 29: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/29.jpg)
• What platforms should I evaluate?
• Does the platform have good reviews and reputation?
• Will I easily be able to make site changes as needed?
• Does the platform have good deliverability (site speed, uptime)?
• Is the platform SEO friendly?
Platform Questions to Consider:
![Page 30: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/30.jpg)
How to Redesign Your WebsiteExecution
@jvocell
![Page 31: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/31.jpg)
Review Wireframes
![Page 32: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/32.jpg)
Review Mockups
![Page 33: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/33.jpg)
How to Redesign Your WebsiteTips for On-Budget, and On-Time Redesigns
@jvocell
![Page 34: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/34.jpg)
Most website redesigns go out of budget due to considerations that were not made up front.
Most website redesigns go out of budget due to considerations that were not made up front.
Most website redesigns go out of budget due to considerations that were not made up front.
Most website redesigns go out of budget due to considerations that were not made up front.
Most website redesigns go out of budget due to considerations that were not made up front.
![Page 35: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/35.jpg)
![Page 36: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/36.jpg)
Be aware of just “one more change”
![Page 37: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/37.jpg)
How to Redesign Your WebsiteReview & Launch
@jvocell
![Page 38: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/38.jpg)
There’s A LOT to review before launching your new site
![Page 39: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/39.jpg)
But let’s talk about the top 12
![Page 40: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/40.jpg)
Check spelling and grammar across the entire site
1.
![Page 41: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/41.jpg)
Test site speed on different browsers, and devices
2.
![Page 42: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/42.jpg)
• WebsiteGrader.com
• WebPageTest.org
• Ask other employees who have different devices to visit the site
How?
![Page 43: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/43.jpg)
Test the website on different devices, and browsers
3.
![Page 44: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/44.jpg)
• Browsershots.org
• Ask other employees who have different devices to visit the site
How?
![Page 45: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/45.jpg)
Test all forms, CTAs, and links on the website
4.
![Page 46: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/46.jpg)
404 redirect pages are setup
5.
![Page 47: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/47.jpg)
Ensure any social buttons work properly
6.
![Page 48: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/48.jpg)
Check all page titles, meta descriptions, and keywords
7.
![Page 49: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/49.jpg)
Check all photography for attribution or rights
8.
![Page 50: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/50.jpg)
• Your own employees, office, product!
• freestockphotos.com
• unsplash.com
• pexels.com
Good photo sources:
![Page 51: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/51.jpg)
Check all pages & templates for brand colors
9.
![Page 52: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/52.jpg)
Resubmit XML sitemap to search engines
10.
![Page 53: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/53.jpg)
301 redirects are in-place for any URLs changing
11.
![Page 54: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/54.jpg)
Finalize marketing launch plan
12.
![Page 55: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/55.jpg)
• Announce via Email, Social Media, PR, Blog, and other channelsAnnounce the Launch:
![Page 56: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/56.jpg)
How to Redesign Your WebsiteIntroducing Growth-Driven Design
@jvocell
![Page 57: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/57.jpg)
![Page 58: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/58.jpg)
Growth-Driven Design is an iterative framework for building a website that drives your business.
![Page 59: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/59.jpg)
Resources
How To Redesign: hubspot.com/how-to/website-redesign
Redesign Workbook: hubspot.com/redesigning-your-website
![Page 60: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/60.jpg)
Looking for an agency to help out?
How To Redesign: hubspot.com/how-to/website-redesign
Redesign Workbook: hubspot.com/redesigning-your-website
![Page 61: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/61.jpg)
Try out the HubSpot Website Platform
bit.ly/web-trial
![Page 62: How To Redesign Your Website](https://reader030.vdocuments.mx/reader030/viewer/2022011721/5872caa91a28ab0c718b7239/html5/thumbnails/62.jpg)
Questions?
@jvocell