Category: Web Strategy

A Simple Explanation of Growth-Driven Design and How It Differs From Traditional Web Design

A Simple Explanation of Growth-Driven Design and How It Differs From Traditional Web Design

For years we’ve had discussions on discovering ways to build websites that are as close to perfect as possible. Now with the growth-driven design methodology, we have the opportunity to build a website that is above and beyond our initial expectations.

Our inbound marketing agency started off as a web design shop so it was very common for us to build a website and let it go. Like putting an anchor in the grid (web), we would launch a site, let time go by, and hope the website would perform. During the build we would apply all our skills, knowledge, experience, and “best practices” so that we could launch a site we were proud of, and that the client was happy with. Existing website clients would come back after a couple years requesting website updates, or website improvements, which at times would turn into complete website redesigns. This was the cycle we would fall into; website redesign, spend a couple months on production, throw a new anchor on the grid and wait a couple years for clients to come back for improvements.

Traditional Web Design Graph Timeline

When a client did come back for website improvements, these requests could be great ones or horrible ones. Is the website request a “want” from the client or is it a need for the online visitor? Above all, how will this website request improve the user’s experience and the client’s bottom line? Yes, we had data to finalize website decisions but at the end, all website requests were assumptions and it wasn’t clear if these updates would help the organization’s goals. Growth-Driven Design changes all this.

Inbound marketing tips and real inbound stories. Delivered biweekly.

Join our community of results driven marketers.

Quick Breakdown on Growth-Driven Design

The objective of Growth-Driven Design is to build a launch pad website in 30-45 days, launch it and test it. Before that initial build, the discussion starts off with understanding the company goals and target personas, and it ends with a website wishlist. At the beginning you’ll have a long list of must-haves and nice to have website requests. The game plan would be to filter out the list with must-haves that would pack a punch and deliver results. The thought process would be, “What are the 20% of list items that will make 80% of the business impact?”. Keep in mind that the 30-45 days benchmark for a website launch can vary depending on the size on the website.

Now with the Launch Pad website complete we can focus on the remaining wishlist items and add to this list based on the data we collect. These items are broken down into high, medium and low impacts.

On a monthly basis the selected list item is tested and goes through a Plan, Develop, Learn and Transfer (PDLT) process. In order to understand if this list item was successful or not, a focused-metric is used to measure the outcome. For example, a focused-metric could be a percentage of increase of email signups.

Simple Graph Explaining Growth-Driven Design

Let’s Take A Look At The PDLT Process In Action

As an example, I’ll use a website we recently launched for a YMCA. Here’s an example of how this PDLT process starts:

After our initial website launch, we ran into some user experience (UX) issues. Here are a few that just have to do with one feature, the search bar:

1.) Online visitors would type in a class they were looking for in the search bar. The search bar would immediately display a dropdown of suggested links but the visitor’s action was to press enter instead of clicking the suggested links. By pressing enter key, the user was redirected to page that was displaying results that weren’t what the member was looking for.

2.) People would search for events, branch information, and even staff members using the search bar. At the point of launch, the search bar only searched for programs and classes, so a good amount of people would come up with no results.

Tools Used to Discover These User Experience Issues

We used two recording tools, UsabilityTools and Hotjar. I do like how UsabilityTools shares where the user came to site (Organic, PPC, Social, etc.) when a session in being recorded. On the other hand, Hotjar has several features I enjoy such as, block recording from certain IPs and filter your recording sessions. And for some strange reason I really appreciate how the country’s flags are displayed for each recording. We focused on the recordings that had accessed a lot of pages, because usually those were the people who were a tad frustrated. We could easily see what they were trying to access, and came up with a plan to fix it.

YMCA User Experience Study Using Hotjar's Recording Tool

For heatmaps, click maps and scroll maps we used Crazyegg and Hotjar. It was interesting to discover how users were or weren’t clicking in the places we had assumed they wouldn’t or would. Everyone’s comfort level with computers and the internet is different, and this particular client had a wide range of users. Seeing these maps meant we could learn that quickly.

Heatmap and Scrollmaps Tools Used for Growth-Driven Design Results

Last, we brought in Hubspot’s Leadin to understand in depth what a buyer’s journey was looking like. We took advantage of the chronological history of a converted lead and started to understand specific interests a visitor had on the website. By looking at the search results pages, we could see what was searched for. Now we had an idea of the things the users want to access with this search bar.

Hubspot's Leadin Chronological History of a Conversion

After we gathered this info, we created a hypothesis:

For [Gym Member George] visiting the [Home page], we believe improving [the search feature] in the [Main Menu] will [increase gym class online sign ups by 10%].

The changes we made
First, we created a results page for those users that hit enter after a search. This seemed like such a no-brainer after the fact, but no one ever ran into this issue before launch.

Then, we updated the 404 page. Instead of just being a generic page, we inserted a message telling them there weren’t any results, and coupled it with another search bar so they could try again.

Old URL Solution by adding a search bar in the 404 Error Page

Last, we expanded the search function to include the entire website, rather than just programs and classes. This meant more options for searches, and less frustration for users.

The Outcome After using Growth-Driven Design Techniques

The first thing we noticed was a lot less phone calls from Y members, which meant almost no phone calls from our client to our agency. The initial storm was over, and people were getting the hang of the new site. The search bar was a huge part of that. So many users were used to the old (outdated) layout, they didn’t want to even try navigating the new one. So they used the search bar instead.

The website went live on a Friday. Keep in mind the website is used by several main personas; prospective members, current members and staff. We had to make sure the new website was a smooth transition for everyone. Of course it wasn’t completely seamless, but since we had our tools in place, we were able to stop the bleeding in less than a day. By Monday, everything was pretty quiet and website requests weren’t coming in. We found this odd and by the afternoon we had to call in just to make sure that everything was running smooth and sure enough it was. Mission accomplished.

With Growth-Driven Design, a website is constantly evolving. The website is built around the user rather than the organization’s wants or web trends. The guessing game goes out the window. This all makes a lot of sense simply because as time goes by, technology changes, and quickly. As technology changes, so does human behavior and as human behavior changes, so will how people use websites.




6 MARKETING METRICS YOUR BOSS ACTUALLY CARES ABOUT



7 Significant Conclusions We Learned After a YMCA Website Launch

7 Significant Conclusions We Learned After a YMCA Website Launch

On Superbowl Sunday, 2016 we launched the brand new YMCA Greater Nashua website. After more than four months of research, design, and development, our project was coming to an end. But after launch, we didn’t just celebrate and let the website out into the world. We kept an eye on things to make sure the website was performing as best as it could for their 10,000 – 15,000 unique monthly visitors. Using tactics such as heatmapping and lead generation, we set up some systems that could teach us about the website users post launch.

With the data we collected, we were able to make impactful changes on the fly, and make sure the website users were having a great experience. Here are a few things we learned in the first two weeks post-launch.

1.) 57% of Engaged Users Were on a Mobile Device

When looking at the users that spent more than 10 seconds on the website, 57% of them were on a phone or a tablet. Knowing this, we had to make sure a mobile visitor could perform the same actions as a desktop user. One of the changes we made post-launch was to make sure the search bar was fully functional on a mobile device.

We also noticed that mobile visitors were more likely to stay on the website to register online instead of using their Daxko login to browse programs.

Looking at the scroll heatmaps, we found that mobile visitors were more apt to scroll than a desktop user would.

YMCA Mobile Web Design

2.) Most Users Want to See Classes and Programs

The data we collected before the website build showed us that the majority of users were looking for programs or schedules. So we made sure these two menu items were extremely accessible from the homepage. Looking at the heatmaps after launch just reinforced what we already knew. Over 24% of clicks were to a program page, and about 20% went to the schedules page.

YMCA Website Heatmap

3.) People Still Love PDF Schedules

Being tech-minded, this was a little surprising to us. It turns out that a solid amount of people would rather download a full PDF schedule than use the mobile app feed on the website, or download the mobile app on their phone.

We still made sure to encourage members to download the YMCA App for Apple or Android. But sometimes we would even encounter users downloading the app and also the PDF schedule on their way out.

YMCA PDF Schedules

4.) Some YMCA Members Like to Browse Through Daxko

After day one of testing, immediately members would look for a way to log in to register for programs. The old website had a Register button at the top where people could log in directly to Daxko, and they were missing that feature after the new website was launched. Even though the programs were now feeding to the website pages, we saw that we needed to put this option back. With the update, members had the option to choose between logging into Daxko or staying on the new website.

YMCA website Daxko

5.) It’s Easy for Daxko Program Tags to Get Out of Control

After we linked the new website to Daxko using Program Connector, hundreds of defunct program tags were fed through. This made it easy for our clients to see that in order for this to work efficiently, they were going to need to do some spring cleaning. Our clients responded quickly and trimmed down the program tags from hundreds to 23 well organized tags for the program connector to pull in.

Now that Daxko information is being fed directly into the website, it’s also easy to discover where class titles, descriptions, times, fees or contact information were missing for each program. If information was missing or outdated, the assigned program director was reached so he or she could log into Daxko and make the right update.

Daxko Program Tags

6.) A Properly Functioning Search Bar Can Do Wonders

Accessing the search bar was an immediate behavior. It helped tremendously for new and especially for existing members to find information quickly. The search feature for mobile was brought to the forefront to make sure mobile visitor access to search for anything at all times. Since they didn’t have a search bar before the new website launched, we weren’t able to foresee the impact this feature could have. By testing the website post-launch we were able to understand that this is often the quickest and easiest way for users to find what they’re looking for.

YMCA website search

7.) Capturing Leads is Easy

We set up a few forms on the new website to start collecting leads. One is a pop up form for a free 3-day-pass and the other is a form for members interested in scheduling a tour. This is the first time this YMCA has had anything set up for collecting leads, so our goal was a 1.5% conversion rate.

2 weeks later, we’re at a 3.1% conversion rate. That means that out of every 100 people that see a form, 3 of them fill it out. This is double what we had as our goal.

The welcome center directors get an email notification when a lead comes in, and they follow up by phone or email. All the information is fed into a MailChimp account, so if they want to change to a more automated approach in the future they can.

Seeing such a positive response to these forms opens up a lot of opportunities for inbound marketing tactics in the future–a lot of opportunities that we would not know about if we hadn’t kept track of these things post launch. We now know what a YMCA website is capable of and we are so excited to share it.

YMCA website search

A website is not complete right after it’s launched. By paying attention to the users, you can make small changes over time that will have a huge impact on how people interact with your website. We never thought we would learn this much in just 2 weeks after launching nmymca.org, but we’re happy we did, and very excited to bring these lessons with us to any projects we have to follow.




YMCA Free Consultation



What Does a Website Cost? A Full Breakdown by an Agency

A complete breakdown of what a website cost by an agency.

What will this website cost me? As a digital marketing agency, it’s only natural for this question to appear often in meetings.

Digital agencies each have their own hourly rate. This hourly rate can go anywhere from $150 and up. Ask what the agency’s hourly rate is and you can ballpark what it would cost your company to build a website based on the estimated hours of production provided below.

Digital agencies also have their own website production process. At Schall, a website project is broken down into four main phases:

Shortcuts

* Final website investments are determined by the size of website, amount of content, functionality, and client goals. The estimated production of hours shared in this article is a ballpark time investment for each phase, based on our own projects.

1. Discovery Phase ( 30 hours* )

1a. Client Interview

In the client interview we’ll uncover current struggles in an organization, go deep into understanding company goals and get a sense of company culture.

1b. User Research

Listening to the user is vital for a successful website as we discover how to improve flaws within a website. The objective is to find a happy medium between company goals and user website satisfaction.

1c. Site Audit / Audience Trend Analysis / Competitor Analysis

It’s always interesting, and sometimes upsetting, to see where a website stands in a Google search in comparison with the competition. With tools such as Raven and HubSpot, we get a gauge on where a client’s website stands. While Google Analytics and Google Webmaster Tools will help narrow down user trends to exclude any ignored sections that are taking up real estate. This overall analysis lets us start from the ground up, so we’re not basing our website ideas off of what’s already out there.

Google Analytics to uncover user trends

1d. Personas

After doing research on the client’s target demographic, personas are created. Personas are fictional, generalized representations of your ideal customers. This allows us to truly have the user in mind, and not just a mysterious group of people in an age group and location.

I found it funny to discover MailChimp’s ideal user. He had all my characteristics and they even named him Fred.
 

Example of use of Personas by Mailchimp

Example of Persona used by MailChimp

Inbound marketing tips and real inbound stories. Delivered biweekly.

Join our community of results driven marketers.

1e. Content

I’m sure you’ve heard this before and here you’ll read it one more time, “Content is king”. It doesn’t matter how beautiful your website is or how functional it may be if the copy is not speaking the targeted audience’s language. The objective is to obsess over the user to roll out well thought out quality content that brings priceless value to the table always.

1f. Information Architecture / Sitemap

Once all the web content junk has been stripped out, the story of how the user will navigate through the website gets structured. Before even taking this to XMind, a mapping software to graph a website site map, we’ll get the team together, roll out the whiteboard, grab a few stacks of post-its and role play different scenarios on how a user would navigate through this new website to achieve his or her goal.
 
XMind - Website Sitemap Example - Mapping Software
 

1g. Wireframes

You can’t build a house without a blueprint. The wireframe stage is the blueprint for building websites. This is typically a barebones display of boxes for how each page of a website will be laid out. Pencil, a prototyping tool, speeds the process in preparing these website blueprints that are later used in the Creative Phase. Invision, another prototyping tool taken to the next level, gives the ability to make wireframes interactive.
 
Pencil - Prototyping Tool Wireframe Example

 

2. Creative Phase ( 60 hours* )

2a. Photography / Videography

To create trust through a virtual experience, high quality authentic photography is a must. Compared to stock photography, original photos that are specific to the company, deliver unique emotion and bring more value. A video with great lighting, interesting angles, and a strong story invites the user into a virtual world that’s personalized. Now that technology is improving, we can invite the user into an interactive 360 video and give them a tour of your world from all angles, and they control it from a touch of a mouse to a tilt of a phone.

2b. Moodboard

The moodboard process helps cut through the noise and organize thoughts. Many times this is where the best ideas are born. The beauty about this process is that a team doesn’t have their hands tied and inspiration becomes limitless. In the past, we would cut out pieces of a magazine and physically paste our inspirations onto a large blank poster to share thoughts to a client. A display of different colors and font types would also join the party. Times have changed and this is a process that can be done virtually and collaboratively with Boards by Invision.

2c. User Experience Design

Websites are evolving and UX plays a large role in this evolution. The UX focus is having a deep understanding of how the user thinks, lives and speaks. What type of blog articles does a user read, what type of devices do they use and how they use them. A study on user actions and gestures goes a long way. No longer are the days of creating a pretty button for the sake of it. What is the purpose of that button? What task does this button fulfill and does it bring value to the user? A website today should be a list of tasks that solves problems.

2d. User Interface Design

The fun begins in the user interface design process. Many times it is tempting to jump right into Photoshop or Sketch and have your ideas run free. This process is where the actual website design takes place. All web elements from the Discovery and Creative Phase up to this point gets implemented into this website design. These web elements are building blocks. If any of them are missing, your stack of blocks will fall.

2e. Prototyping

Not too long ago, our Creative Phase presentation with clients was a show and tell of static web design layouts. We would share all versions; desktop, tablet and smartphone layouts in this presentation. Now, our prototyping stage is interactive. All static website layouts are brought to life using Invision. This gives our clients the opportunity to experience and actually see how the website is going to perform with a touch or hover action. The outcome of the presentation is less of an explanation of what’s being accomplished with the new layout, and more of a participation from the client in how to improve the overall website experience.
 
Interactive Prototyping using Invision

 

3. Development Phase ( 60 hours* )

3a. Content Management System

Gone are days of static websites. Once the Creative Phase has been approved, website designs are stripped and built on a content management system. This way the website is manageable in-house by the marketing team. Amongst many, WordPress and HubSpot CMS are two industry leading platforms that standout to be user-friendly with powerful content marketing capabilities.

3b. Functionality

Common website functionalities can be online forms to increase sales, email signups to build a subscriber list or special shipping options for eCommerce websites. Each organization has unique challenges and goals. Web functionalities are built to satisfy the purposes of the website.

3c. 3rd Party Integrations

Newsletter integrations will capture emails into your favorite email platform; MailChimp or Constant Contact. Google Maps Integrations will let your user have easy access to finding you online. Inbound Marketing Software integrations, like HubSpot, will monitor your marketing efforts in one sales tool platform. All necessary integrations are done during this process.

3d. Responsive

A mobile experience is unique from a desktop experience. For this reason, a mobile design is created with unique navigations, menus, and content for optimal conversions when accessed through a mobile device. This responsive design then goes through a testing process and is opened on smartphones and tablets. The number of online visitors accessing a website from a mobile device is increasing rapidly, so mobile user experience is more important than ever.

 

4. Debugging Phase ( 20 hours* )

4a. Cross-Browser Compatibility

There are several preferences when it comes to web browsers; Firefox, Chrome, Opera and Safari to name a few. Each have different rules, especially Internet Explorer. The website is tested on the top browsers preferred by current visitors to make sure the website experience is smooth across the board.

4b. User Testing

A group of people are asked to participate to access the website. This last step is performed on both desktop and mobile. This is an opportunity to correct any flaws of the overall website experience and to study how the visitor interacts with the website from start to finish.

4c. Web Server Optimization

The website is optimized to reach it’s maximum efficiency. Code is compressed to improve load performance for desktop and mobile. Content Delivery Networks ensure users can load the website quickly. All images are losslessly compressed to enhance performance.

Client Relationship and Project Management. ( 20 Hours* )

Meetings / Travel

There are a number of meetings that take place during each phase. In some cases there is travel involved, other times it’s a phone or web meeting. This is all time that is taken into account with each project.

Project Management

To keep the client in the loop, a project management software is used called Basecamp. The client is notified when they have homework, and they can dive into the software to learn about where the website is in the process and what work is being put in.

Website Training

When a website is launched, there is also a training session scheduled. Anyone who has a responsibility to update the new website is invited to attend, and they all learn the process from start to finish.
 
There are many steps to go through when building a website, some of which often go unseen. Each phase needs the other ones in order to shape the best possible product and to generate great results.

 



6 MARKETING METRICS YOUR BOSS ACTUALLY CARES ABOUT



6 Awesome Ways WordPress and HubSpot Work Together

7 Awesome Ways Wordpress and HubSpot Work Together

Yes, WordPress and HubSpot do work well together. No, you don’t have to choose between them.

There are a lot of reasons an organization chooses to have their website on WordPress and, by demand, most of the websites we build here at Schall Creative run on the popular platform. Since it’s so widely used, it’s easy to find support for a WordPress site via a web developer or simply by visiting WordPress forums and searching for a solution. Most importantly, it’s easy for our clients to make simple updates to their website on their own when they use WordPress.

HubSpot is a platform that focuses on inbound marketing and tracking results. When an organization is ready for their website to start doing work, (not just looking pretty) we find that HubSpot is the way to go.

Here are some great ways WordPress and HubSpot work together:

1. Install the HubSpot Tracking Code

The HubSpot Tracking Code will connect your WordPress website and start sending online traffic information to HubSpot. The code collects data from your WordPress site and sends it to your HubSpot account. You’ll be able to view your website traffic and page performance of every page regardless of if it lives in HubSpot or WordPress.

Wordpress and HubSpot Page Performance Tool

2.) Embed HubSpot CTAs on your WordPress website

Once you have a well thought out copy and creative to use as your Call to Action, bring it into HubSpot to track its performance and embed it into your blog articles and/or web pages.

Every CTA has an embed code so it can live externally.

Embed HubSpot CTA to WordPress

 

7 Awesome Ways WordPress and HubSpot Work Together

 

3.) Generate leads by using custom flyout HubSpot forms

If you have an offer you’d like to share with your website visitors, you have the ability to create and customize a HubSpot form that can live on your WordPress website. Add a little Javascript and your HubSpot form can slide onto your blog article or website page after a certain timeframe or scroll position. All of the form submissions go directly into your HubSpot contacts database so they’re segmented and enrolled in workflows however you’d like them to be.

Embed HubSpot Form into WordPress

For those that are not currently using HubSpot but are curious on how inbound could work for your industry, try downloading the HubSpot All-In-One Marketing plugin. This is a free WordPress plugin that helps you generate leads and gives you great insight after a visitor has filled out a form. It’s a great way to get started collecting leads and using a CRM for free. This tool allows you to dip your toe into inbound marketing so you can learn if it’s right for you.

Leadin Flyout Form

4.) Build your list of subscribers with pop-up HubSpot forms

The more you write great copy, the more you’ll have the opportunity to build your list of readers. You can take advantage of this traffic and have them subscribe to your email list. In our experience what has worked are pop-up messages that speak to your reader has humanly possible.

Schall HubSpot Popup Form

The way we’ve manipulated this was a custom HubSpot form with just an email request with an engaging one liner. This pop-up message is then integrated into blog posts or pages by using the WordPress Popup plugin that was later customized to our needs. Again, all these form submissions are dumped into our HubSpot contacts, and they’re already segmented by which blog they subscribed to. So there is literally no work involved for us–they’re all set up to receive our next email.

Wordpress and HubSpot Form to Create Popup Message

5.) Use HubSpot Contact Forms and embed them in your WordPress site

Another great tactic, if not the best tactic, is creating a HubSpot Contact Form and embedding it in your WordPress Contact Us section. When we get a form submission on this page, we know that the lead is at the bottom of the funnel, and closest to “ready to buy.” By using HubSpot, we are able to have an instant notification sent to us so we can follow up with a phone call right away.

This setup has been our most successful approach thus far as we’re able to gauge immediately where our visitors are at in the buying process.

If you need help customizing your HubSpot forms so they match the look and feel of your website, we can help with that. Click here and shoot us a message!

Embed HubSpot Form to WordPress Pages

6.) Optimize your blog articles with Yoast and HubSpot Page Performance

The Yoast WordPress Plugin has been around for quite some and it is extremely helpful. The company is constantly updating the plugin and adding new features to improve search results for your WordPress site. I highly recommend it. It will display a guideline on how to improve your blog post and website pages to help you perform better on search results.

Yoast SEO WordPress Plugin

In our case, we do not have our blog posts live in HubSpot. Our blog posts live in WordPress. There are certain features we are not taking advantage of, such as Smart Content, but we still use their Page Performance Tool to make sure all our posts are working to their best ability. Every so often, we’ll check out our blog posts within Page Performance and make the suggested optimization updates. Everything is laid out on one page so we can clearly see which posts need attention.

HubSpot Performance Page Breakdown

WordPress and HubSpot compliment each other well. You don’t have to choose between the two.

Inbound marketing tips and real inbound stories. Delivered biweekly.

Join our community of results driven marketers.