GROWTH-DRIVEN DESIGN THE SOLUTION TO WEBSITE REDESIGNS

Transcription

1 GROWTH-DRIVEN DESIGN THE SOLUTION TO WEBSITE REDESIGNS

2 Growth Drive Design is the process of designing a website in a strategic and systematic process focused around user needs and wants. This model works in all scenarios, whether you re looking to rebuild from scratch, or take your existing site to new levels.

3 GROWTH-DRIVEN DESIGN IS BASED ON THREE CENTRAL PILLARS MINIMIZE THE RISK We work to avoid the risks of traditional web design by taking a systematic approach to shorten the time to launch, focusing on real impact and continuous learning and improvement. CONTINUOUSLY LEARN & IMPROVE We are constantly researching, testing and learning about our visitors to inform ongoing website improvements. Through continuous improvements we can reach peak performance. GDD LEARNING INFORMS MARKETING & SALES GDD is tightly integrated with marketing & sales. What we learn about visitors helps inform and improve marketing and sales strategies & tactics (and vice versa).

4 HERE ARE SOME TYPICAL PAIN POINTS IN TRADITIONAL WEBSITE REDESIGN Large Upfront Cost For Customer Substantial Time/Resources Commitment Difficult To Keep On Production Schedule Content Collection Takes Forever Customers Not Responsive Changing Mind Scope Creep 100s of Decisions During Project Everything Must be Perfect!

5 TRADITIONAL GDD FEATURES SOLUTIONS FOR BUSINESS BUSINESS WANTS vs USER CHALLENGES SOLUTIONS FOR USERS ALIGN WITH BUSINESS FEATURES 3-9 MONTH BUILD TIME LARGE COST UPFRONT BASED ON ASSUMPTIONS STATIC ON AVG. FOR 2 YEARS COST SPREAD OVER TIME CONTINUOUS IMPROVEMENT BASED ON FACTS & METRICS FLEXIBLE AND ALWAYS UPDATED

6 THE THREE STAGES OF GDD STRATEGY LAUNCH PAD WEBSITE CONTINUOUS IMPROVEMENT

7 Strategy

8 IT ALL STARTS WITH THE DISCOVERY MEETING The discovery meeting is our official kickoff session to GDD. During this 4-8 hour session, we will set the strategic plan for the year. This covers everything from website updates to company goals. We ll analyze the website, dig into the personas, and brainstorm methods for reaching goal. GDD isn t supposed to be a platform for instant, on-demand website change requests. The purpose of GDD is to identify changes that will affect the goal, and complete changes based on how effectively they will do just that.

9 DURING THIS STRATEGY AND IDEATION SESSION, WE LL LOOK AT: PERSONA RESEARCH KPI WEBSITE AUDIT BUSINESS GOALS DESIRED FEATURES

10 THIS IS A USER CENTRIC APPROACH It allows user patterns and desires to dictate their browsing experience, NOT the emotions and opinions of individuals running the website.

11 THE IMPORTANT THING IS TO GET INSIDE A USER S HEAD AND IDENTIFY THEIR EMOTIONS AND TRIGGERS, BOTH ONLINE AND OFFLINE. We do this through: Interviews Fundamental assumptions Creating a user journey

12 NEXT COMES NEXT WISH LIST The wish list consists of brainstormed elements that improve user experience and provide measurable value. This is the part of the process where everyone puts on their thinking caps and gets into the user s shoes. From specific site functions to website content, everything goes on this list. Each item is then rated on its impact. Determine the impact of items by identifying the 20% of projects that will have 80% of the impact. Also be sure to differentiate the nice-to-haves from the must-haves. SAMPLE WISHLIST

13 HOW DO YOU KNOW WHAT TO WORK ON? PIE ANALYSIS POTENTIAL IMPORTANCE EASE

14 Wishlist Items Potential Importance Ease Score Update Main Template Design New Homepage Messaging & Hero Migration of Blogs New Service Page Landing Page Optimization Careers Page Resources Section

15 E X A M PL CURRENT SITUATION Website can t be altered on current CMS 150 page website Copy needs to be updated site-wide Dated design- three templates Not responsive/no mobile Confusing navigation/ information flow SOLUTION Use HubSpot s Migration Team to bring website to HubSpot COS Identify the most important pages throughout website, AKA the Launchpad Review current copy throughout website, rewrite as needed Design Launchpad pages; design standard template for remaining pages E Design for mobile- ensure that all elements respond for any device Restructure sitemap and navigation to logically lead user through website

16 TYPICAL TIMELINE Days 0 15: Strategy & Ideation Days 15 30: Site Audit & Launch Pad Planning Days 30 75: Launch Pad Build

17 Launch Pad

18 THE NEXT ACTION STEP TO TAKE IS THE LAUNCH PAD WEBSITE The launch pad website is a collection of the most important pages in your website. These pages have the highest impact, and should be designed and optimized for user experience from the very start.

19 YOUR WEBSITE IS NOT A PROJECT TO BE COMPLETED. IT S A BUSINESS GROWTH ENGINE THAT SHOULD PERFORM AT ITS HIGHEST LEVEL ALWAYS!

20 ONCE YOU HAVE THE LAUNCHPAD COMPLETED AND LIVE... then what?

21 WHERE DOES THAT LEAVE THE REMAINING PAGES? When you re looking to completely overhaul your website, does using this method mean leaving the majority of your pages in the old design style? No, not at all. Instead, you will put your focus and efforts into these launch pad pages, and use a simplified template for the remaining pages. As time goes on, the wish list determines the most important items to be designed. Eventually, all of the pages that have a high impact on your users will be optimized.

22 WHY DO IT THIS WAY? By using the launch pad method, the website redesign can happen quickly while ensuring quality. It narrows the focus and allows the website redesign to be done in bits, not all at once. This means no stressful, massive proofing effort right before launch. It also gives us a chance to gather data on each page and make educated decisions, and not guesses.

23 Continuous Improvement

24 GDD HEIRARCHY Audience Value Usability Conversion Rate Optimization Stickiness Personalization Assets Promoters P B L T

25 LAN UILD EARN RANSFER

26 PLAN Performance of control sample vs. goals sought by variation Additional data or research as needed Brainstorm + update wishlist Impact, effort, metrics, completion Prioritize sprint cycle

27 BUILD Implement sprint activities Collaborate on completing tasks Setup validation tracking Develop marketing campaign to drive users to the changes that have been made

28 LEARN Run experiment Review data Validate or invalidate assumptions Report on learnings

29 TRANSFER Transfer what was learned to improve market ing and sales Create recommendations Educate other teams

30 WHAT DOES IT LOOK LIKE IN ACTION?

31

32 Version 1 PROBLEM: We noticed that CTAs off the homepage weren t being clicked, the blog feed wasn t working, and the different areas on the homepage were not driving traffic to the intended pages. SOLUTION: We thought it might be an under the fold problem- the page s most important content was below the point that viewers saw when first coming to the page. We also thought there were better ways of making the CTAs more noticeable. EXAMPLE: MARCO HOMEPAGE

33 Version 2 PROBLEM: We changed too much at once. Numbers changed some up and some down but we had no really good way of attributing that change to the changes we made in the design because we changed so much at once. SOLUTION: We started small this time around- just changing the hero image area (the first large image you see when going to the home page) to lead to the newly launched services page. We set up tracking on both the Homepage and Services page to see user patterns. EXAMPLE: MARCO HOMEPAGE

34 Version 3 PROBLEM: We realized that people were engaged in this page, and the numbers showed that this was quickly becoming an important page to our viewers. SOLUTION: We made the Services page the new homepage- giving the viewers the very thing they came to the site to see right away. Each month we review data and continue to push the value prop and give the user what we think they want. EXAMPLE: MARCO HOMEPAGE

35 DID YOU GET ALL THAT? Don t worry if you still have questions, you re not alone. Get access to this and all of our GDD materials at: LeightonInteractive.com/GDD

36