growth driven design: the solution to website redesigns
TRANSCRIPT
Growth Driven DesignTHE SOLUTION TO WEBSITE REDESIGNS
Growth Driven Design
GROWTH DRIVEN DESIGN(AKA GDD)
Growth Drive Design is the process of designing a website that
consistently improves. It’s a flexible model that allows you to
change small things over time to improve your website user’s
experience overall. This eliminates the guesswork that goes
into traditional website design, and instead bases all changes
on statistics and metrics. This model works in all scenarios,
even if you’re looking for a complete overhaul of your current
website. Let us explain.
TRADITIONAL WEBSITE DESIGN IS BROKEN.
You can make a human in less time than it takes to
update a website. Business moves far too fast for
that kind of pace.
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!”
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!”
TRADITIONAL GDD
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
vs
BUSINESS WANTS
SOLUTIONS FOR BUSINESS
FEATURES
USER CHALLENGES
SOLUTIONS FOR USERS
ALIGN WITH BUSINESS
FEATURES
THE THREE STAGES OF GDD
STRATEGY
LAUNCH PAD WEBSITE
CONTINUOUS IMPROVEMENT
THE THREE STAGES OF GDD
Strategy
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.
DURING THIS STRATEGY AND IDEATION SESSION, WE’LL LOOK AT:
PERSONA RESEARCH
DESIREDFEATURES
WEBSITE AUDIT
BUSINESS GOALS
KPI
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.
We do this through:
• Interviews
• Fundamental assumptions
• Creating a user journey
THE IMPORTANT THING IS TO GET INSIDE A USER’S HEAD
AND IDENTIFY THEIR EMOTIONS AND TRIGGERS, BOTH
ONLINE AND OFFLINE.
NEXT COMES NEXT
WISH LIST
SAMPLE WISHLIST
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.’
HOW DO YOU KNOW WHAT TO
WORK ON?PIE ANALYSIS
POTENTIAL
IMPORTANCE
EASE
Potential Importance Ease ScoreWishlist Items
Update Main Template Design
New Homepage Messaging & Hero
Migration of Blogs
New Service Page
Landing Page Optimization
Careers Page
Resources Section
6
5
1
7
5
8
1
8
9
1
8
8
8
1
4
9
8
5
8
8
5
18
23
10
20
21
24
7
EXAMPLE
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
• Design for mobile- ensure that all elements respond for any device
• Restructure sitemap and navigation to logically lead user through website
Strategy
TYPICAL TIMELINE
PLANBUILDLEARNTRANSFERREPEAT
Days 0 – 10: Strategy & Ideation
Days 10 – 15: Site Audit & Launch Pad Planning
Days 15 – 75: Launch Pad Build
123
Launch Pad Website
THE NEXT ACTION STEP TO TAKE IS THE
LAUNCH PAD WEBSITEThe 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.
Launch Pad Website
YOUR WEBSITE IS NOT A PROJECT TO BE COMPLETED. IT’S A BUSINESS GROWTH ENGINE THAT SHOULD PERFORM AT ITS HIGHEST LEVEL – ALWAYS!
ONCE YOU HAVE THE LAUNCHPAD COMPLETED AND LIVE...
then what ?
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.
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.
ContinuousImprovement
PLANBUILDLEARNTRANSFERREPEAT
ContinuousImprovement
123
START WITH THE HARVEST PERIODOnce the launch pad website is launched, you will move into
the harvest period. You will sweep through your wish list
items that didn’t make it into the launch pad and identify low
hanging fruit that can be rapidly and easily obtain for quick
wins. These can be the result of quick updates based on user
feedback and implementing high impact items on the wish
list. These are smaller, obvious changes to improve the user
experience, and don’t require in-depth experimentation to fix.
Launch Pad Website
PLANYou’ve identified an issue with something on your website. Perhaps
people aren’t clicking through to the appropriate pages. Perhaps a page
is getting a high bounce rate. These types of issues can be resolved
through GDD. During the Plan stage, you will want to identify these issues
and add them to the wish list.
It’s important to gather data surrounding the item you want to improve.
This means allowing the website enough time to accumulate views, and
then benchmarking those analytics.
Launch Pad Website
BUT HOW DO YOU
GET DATA?Obtaining data is the single most important part
about the GDD process. The data gathered will
determine all website changes, and therefore all
website success. There are a lot of ways to get
website data. No matter what applications you use,
however, you will need access to heatmaps, user
recordings, and analytics. In order to create a website
optimized for users, you must get inside their heads
and understand the website from their perspective.
USE THE DATA TO MAKE A HYPOTHESIS 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.
QUESTION:“Why aren’t users clicking through to the product page?”
RESEARCH:• Analytics show that users are bouncing off many pages- not finding what they need.
• Heatmaps show that users are clicking around on pages, but not on links to the
product page.
• User recordings show that users are scrolling quickly through pages before jumping
to the next, clearly not finding what they need.
HYPOTHESIS:Users aren’t going to the product page because they’re having trouble finding it. By
making product page links more visually obvious through website, we will improve
page views by X%.
PLANBUILDLEARNTRANSFERREPEAT
BUILDOnce the hypothesis has been formed and
an action agreed upon, the next step is to
Build. This is the stage where the solution
is deconstructed, created, and launched.
ContinuousImprovement
DECONSTRUCTED How will we solve the problem? Who will do what? How long will it take?
What are the potential obstacles? How can we help each other to achieve
the final result?
CREATEDAll hands on deck to build out the solution, whether this involves designers,
content creators, or developers. Experiments will need to be set up to test
the effectiveness.
LAUNCHEDThe solution will need to be checked over and quality assurance testing
must be done. Once completed, the solution can be launched.
LEARNThis stage is all about experimentation. We put our hypothesis to the test
by allowing the project to accumulate a significant amount of views and
reviewing. Without this stage, GDD would just be website updates. By
intentionally studying the results of a change, we’re able to determine its
success and move forward. It’s important to document your findings.
LEARNING QUESTIONS
Was our hypothesis correct? Why or why not?
What did we learn about our users? Did they act as excepted or not?
How can we move forward with this knowledge?
Do we need to adjust again to solve the issue?
TRANSFERThe Transfer stage is all about sharing the knowledge. It’s important to
share progress, research, user learnings, and experiments results with the
whole team. This opens up cross-team recommendations and group
problem solving. By keeping everyone in the loop, you ensure that everyone
is working towards the same goal.
WHAT SHOULD YOU SHARE?Put yourself in your teammates shoes- what would they need to know to help
get to the goal overall? You won’t always have recommendations of valuable
information to bring to the table, and that’s okay.
REPEATThis is pretty self-explanatory. The whole purpose of GDD is to
have a constantly evolving website. By repeating this process
over and over, while focusing on the most important areas and
issues, we ensure that the website will be flexible and perform
at maximum capacity.
Value Audience Personalization User Experience Conversion Rate Optimization E
XA
MP
LE
AR
EA
S O
F F
OC
US
WHAT DOES IT LOOK LIKE IN ACTION?
EXAMPLE: MARCO HOMEPAGE
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.
Version 1
EXAMPLE: MARCO HOMEPAGE EXAMPLE:
MARCO HOMEPAGE
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.
Version 2
EXAMPLE: MARCO HOMEPAGE
EXAMPLE: MARCO HOMEPAGE
PROBLEM:
We realized that this new page- the Services page-
was garnering WAY more attention than any other
page on the site. People were engaged in this page,
and the numbers showed that this was quickly
becoming the most important page to our viewers.
SOLUTION:
We made another big change- but this time with
reasoning, data, and user feedback in mind. We
made the Services page the new homepage- giving
the viewers the very thing they came to the site to
see right away. So far it has had an incredible impact
sending on qualified visitors to the appropriate pages
on the website to continue in their buyer’s journey.
Version 3
DID YOU GET ALL THAT?
LeightonInteractive.com/GDD
Don’t worry – if you still have questions, you’re not alone.
GDD can be a little confusing at first. Overall, the Growth
Driven Design model is the single best way to ensure that
your website is designed to be your #1 selling tool and
resource while remaining flexible and up-to-date. If you
have any questions, please feel free to reach out. We
also have a free ebook that explains Growth Driven
Design in depth. Get your free copy today at:
