Archive for the ‘The Chartcorps’ Category

This is the second post in a series on how we used the design process to prototype, build, and test a brand new support site.

By collaborating with our designers, the Chartcorps (our client support team) was able to create a brand new support site experience from scratch. Last week, my teammate Chris walked us through the first three steps of our design process that began with understanding, defining, and ideating a solution to a problem. This week, I’ll be discussing how we took those ideas from the whiteboard to the web in the next three phases: prototyping, building, and testing.

Phase 4: Prototype

In the Ideate phase, we were able to lay out the informational groundwork, but we still needed to figure out details around navigational flow and visual consistency.

An early mockup of navigation and flow.

Chris and I used Sketch and InVision to generate quick wireframes to get a better sense of how users could interact with the site. We made a few versions to compare and get feedback from the rest of the team and our designers — an incredibly useful step for planning how to scale our site for future resources.

After finalizing the overall structure, we moved on to higher fidelity mockups to find a consistent style and voice for our product. We wanted the support site to feel like an extension of the tools that customers were used to using, but also serve as an easy channel to connect with us.

Thankfully, our designers had already put together a style guide that helped us quickly get from wireframes to mockups. We replaced our Lorem Ipsum with real text, drew our own illustrations, and decided on a unique, but integrated, color theme.

Palette from our Style Guide

We found that prototyping was a quick and efficient method to diverge and converge on many ideas with constant revisions along the way. And since Chris and I were new to coding, prototyping helped us nail down design decisions before tackling code.

Phase 5: Build

When new members of Chartcorps come on board, we encourage everyone to get comfortable with code using resources such as Harvard’s online CS50 course, Codecademy, and Learn Python the Hard Way (which Chartbeat Developers actually TA once a week for the whole company!). Chris and I had also learned a lot on the job, but we really wanted to take all this knowledge and build something ourselves.

We were familiar with writing HTML, CSS, and JavaScript, but putting everything all together in a cohesive, scalable system was a brand new experience for us. Enter, the static-site generator—we choose Jekyll.

There are a lot of different options out there, but after we experimented with both traditional CMS’s and static-site generators, we found that the latter offered better version control and flexibility for what we were trying to build. Jekyll was our favorite because it was beginner-friendly and a few of our designers had experience using it.

While building the site, we found a lot of parallels with the design process. We spent a lot of time understanding, ideating, and prototyping different file structures to reflect the design of the site from the user’s view. We ended up using a cascade of templates and section-specific files to have a modular site that new members of Chartcorps could easily add to or edit.

Phase 6: Iterate & Learn

After many weeks of coding we were finally at the point of launch! We decided to start off with a soft roll out to test and get more feedback.

We held various focus groups with members of our Product Outreach Team to see if they could find all the resources in their new locations. We also attended the design review meetings that our Design and Marketing teams hold bi-weekly for additional feedback.

Of course the last step of any design process is continuous iteration. Since this is our first run at building a whole support site from conception to execution, we’d love to hear your thoughts: What are we missing? Does the structure make sense? Did you find what you were looking for?

Just as Chris and I used this project as a chance to practice and learn, it’s had a similar effect on everyone on Chartcorps. One of our teammates, who’s more interested in data and integrations than front-end design, used API endpoints from the Chartbeat Status Page to power a real-time widget to instantly tip people off to any downgraded performance issues!

Check it out, we’re live!

The Support Site project that Chris and I set out to build is becoming much more than just a side project for us. It’s turning into a way for all members of Chartcorps to explore and develop their technical skills and interests.

For Chris and me, it’s been learning more about what the web design process looks like in software companies, and how something goes from sketch, to design, to launch. And since we had such a great time collaborating with and learning from Chartbeat design team, we’re going to continue publishing blog posts about our Design culture.

P.S. Want to join our team? We’re hiring: Chartcorps, Product Design, and Marketing Design. Check out the openings here.

ICYMI: Last week, our Chartcorps and Data Science teams hosted a Q&A webinar covering the latest mobile research from our spring Quarterly issue. You can check out a full recording of the webinar (or read the Cliff Notes version) here.

You asked, we answered.

Attendees asked lots of great questions during last week’s mobile research findings webinar—some of which we didn’t have a chance to answer during the live Q&A session:

What are some strategies for increasing pageviews per user on mobile devices?

Whether you’re promoting your site on social media or deciding which articles to put on a landing page, consider sending traffic to pages with high mobile recirculation, which tend to drive readers further into your site.

Filter on the “mobile” platform in the Chartbeat Publishing Dashboard and sort your Top Pages section by Recirculation to quickly see which articles are doing the best at driving your audience deeper into your site.

To increase mobile recirculation on a particular page, take a look at where mobile visitors scroll to before leaving, either in real-time with the Heads Up Display or historically with Report Builder.

How can digital publishers tailor content better for mobile platforms?

With mobile platforms, the best way to optimize for your audience is to make sure that the most viewable part of the page—just below the digital fold—is set up for success. Are you giving your audience a chance to move on to additional content before that first big drop off? And if they do drop off after that point, are they at least leaving with a strong takeaway from the article?

If you’re constantly tracking your mobile audience, you’ve probably also noticed trends in terms of which referrers typically send traffic via mobile devices, and even what time of day you usually see the highest amount of mobile traffic. These insights can all inform you on when and where to promote your mobile stories.

Track the second-by-second, pixel-by-pixel attention of your audience with our Editorial Dashboard.

Have you noticed a difference in mobile consumption with the increased popularity of “phablets” — larger screen phones like the iPhone 6 plus or the Galaxy Note 4?

Right now we break down devices into three categories—desktop, mobile, and tablet—so we haven’t looked at any trends yet in the various kinds of mobile devices, but we’ll keep it in mind.

How do you measure scroll depth in the case of these studies?

To measure maximum scroll depth, we look at the the furthest point a user scrolled on the page, as tracked by our pinger, a piece of Chartbeat javascript that runs in your browser. Note that maximum scroll depth isn’t necessarily the point at which you left the page, although the two are often the same number.

To get the maximum scroll depth data for the Data Science Quarterly, we used the same data store that feeds our Report Builder.

What kind of correlation have you seen between scroll depth on landing pages and pageviews per visit?

We haven’t done a study on this correlation yet, but if you’re using the Report Builder tool you can build recurring reports tracking pageviews and unique visitors for a specific page.

Set metrics to “pageviews” and “unique cookies” and set a page path filter equal to “/” — the path of your homepage — and filter on device type equals mobile. That way you can keep track of the numbers for your own homepage day in and day out and discover any trends that might be unique to your own audience. (For more tips and tricks check out Report Builder 101).

Learn more about our suite of editorial tools here. Questions? Shoot us a note or check out our Chartcorps Support Site.

Headline Testing 101

June 24th, 2015 by Chris

Already familiar with Chartbeat Engaged Headline Testing?
Hop down to our 101 section for tips on how to get the most out of your headline tests.


Engaged Headline Testing is like a laboratory. In this lab, you run the experiments. You determine the variables. But we provide the measurements. Our algorithm handles the heavy lifting. Engaged Headline Testing maximizes the effectiveness of your content by combining your own editorial expertise with real-time performance metrics.

04. Pin open - headline test - form 2@1x
You’ve got the great content—but are people seeing it? Are you driving readers to your most engaging content—the content that will keep them coming back again and again? Engaged Headline Testing helps you get to know your audience on a deeper level and promote your content with headlines that you know are more likely to grab—and keep—readers’ attention.

You’ll know which headlines resonate best with readers so you can increase engagement—and improve headline writing in the process.


We understand that audience attention is an important measure of success. Chartbeat Engaged Headline Testing identifies not only the headlines that are being clicked on, but also the ones that lead to engagement with your content. Using our Quality Clicks metric, the testing tool tallies the clicks that correspond to a user actively engaging with your content for at least 15 seconds after clicking the headline.

Clicks are not enough; your most successful headlines are those that grab users’ attention and position engaging content. Engaged Headline Testing ensures your headlines do both.


The setup is simple: pick a story that you want to test headlines for, enter a series of different headlines, and launch the experiment. Chartbeat then serves those different headlines to your audience and measures how many clicks each version receives—and more importantly how much Engaged Time those visitors spend consuming the content. Tests run in real-time, weighting the winning headlines based on what’s driving the most post-click engagement with each audience.

Ready to upgrade to the Engaged Headline Testing tool? Let your account manager know—or shoot us a note to learn more.

Headline Testing 101


Since a headline test is an experiment, you should structure it that way — hypothesis, variables, results, and conclusions.

1. Leverage your own experience and insight. When deciding on headline variants, consider what kinds of headlines have been successful in the past. Maybe one that’s interrogative, one with numbers, and another written in the second person.

2. It’s multivariate headline testing after all, you’re not limited to two choices. Pick a series of different kinds of headlines, at least 4 or 5. And make sure they’re different.

3. Make sure your headlines are different. You’re testing to see how your audience reacts to different styles and tones, not slight changes in word order or punctuation.

4. Analyze your results. Look back at those headline writing strategies you started with. Were your hypotheses correct? Every time an experiment completes, you have a chance to learn a little bit more about your audience’s preferences and how they respond to different styles of headlines. Which approaches were more successful? Under what conditions? Do certain approaches work better against certain content topics (e.g. sports or tech or entertainment)?

Chartcorps Insight: High clicks with low engagement might mean that the headline didn’t communicate the message of the article. Is your headline too sensational, too much of a stretch? Low clicks with high engagement can tell you that the article could use more exposure. Have you shared it on social media, are you linking to it from your home page or other article pages?

5. Apply your findings time and time again. Some of the best headline testers write wrap reports and have daily meetings to go over results. Creating and sharing a summary of the insights you gained from previous experiments helps all editors and content producers benefit and learn.

6. Test again.
And again. Test deliberately and in ways that confirm or deny a single hypotheses.


  • Always be testing — since there’s no limit on how many experiments you can run at the same time, you always have the opportunity to learn from your audience’s behavior.
  • Know which audience you’re testing — homepage audiences are usually loyal and visitors from social tend to be new, so it’s likely they’ll prefer different headlines.
  • Don’t stop tests prematurely — it might be tempting to stop a test when one headline quickly takes the lead, but you’re likely to see cases where the tides shift halfway through the experiment and the initial success trails off.
  • Don’t get discouraged by a tie — it’s possible that two great headlines are attracting similar levels of engagement. If you’re frequently seeing similar results, it might be that the headlines you’re testing are too similar.
  • Higher traffic pages will turn results faster — since experiments are based on how many clicks your articles are getting, a bigger audience means more clicks.
  • Ready to get started with Chartbeat Engaged Headline Testing? Want to learn more? Get in touch.

    Did you miss last week’s webinar on mobile findings from the new Data Science Quarterly? Saw it and want to review the fundamentals? No fear. You can watch Andy and Chris here.

    Want the quick scoop? Here’s a recap of their discussion:

    During the webinar Chris from Chartcorps and Andy from our Data Science team walked through the latest research from our new Data Science Quarterly to help you better understand the data and leverage the insights we’ve found. Particularly, they talked about viewability and user behavior in a mobile context. Some questions they considered:

  • What parts of the browser page are most viewable?
  • What is the relationship between scroll depth and viewability?
  • How are mobile and desktop viewing experiences different?


    The most viewable part of the page for mobile browsing is just below the digital fold, but for desktop browsing it’s above the fold. Nevertheless, the majority of users exit near the fold on both platforms.

    For mobile, we see a lot more scroll depth (vs. desktop). At certain points on the page, there are pronounced peaks in active users. Andy explained this incongruity in terms of scrolling methods: on phones, users tend to scroll in more discrete chunks, whereas on desktops, scrolling is much smoother. As a result, mobile users tend to scroll much further down the page.

    Because of the unique nature of mobile scrolling, ads that must be reached by scrolling a few times see an uptick in viewability.

    That said, it’s important to note that scroll depth is a proxy to viewability—a user might scroll to the bottom of the page so quickly that the ads do not qualify as viewable.


    When you understand how your audience consumes content, you can better adapt to create a more engaging experience. If, for example, you know where on the page reader engagement is coming a halt, you can adjust elements on the page or rework your actual content to keep your audience actively reading.

    These are the kinds of insights and tips we prioritized when building the new Heads Up Display. Chris closed the webinar with a sneak-peak of the new Heads Up Display and all its features—many of which are mobile-focused. In real time, you can analyze what mobile users see, how they interact with the page, and, where they are spending time on the page.

    By pairing real-time metrics like Engaged Time or scroll depth with historical data from our Report Builder tool, you can instantly act on opportunities—and learn from those actions to build out future strategy.


    Since you know that scroll depth is strongly linked to viewability on mobile devices, you can build historical reports to evaluate which mobile pages correlate with those metrics. Using Report Builder, you can see a ranking of your most scrollable articles: create a one-time report using a “device type equals mobile” filter, select “scroll starts” and “average scroll” as your metrics, and group by “page path”.

    You could also investigate a specific article’s mobile performance by setting its page path as a filter. That way you can track it day in and day out to see if any changes you’re making to the article’s layout are affecting users’ scroll depth. (For more sample reports check out our Report Builder 101 post).

    For the whole shebang, including more historical reports, watch the full webinar.

    We also had some great follow up questions from our webinar attendees. Check out the answers from Andy and Chris here.

    Questions about the data? Shoot Andy an email. Want to know more about our Heads Up Display or Report Builder Tools? Get in touch.

    But, what is Report Builder?

    One of Chartbeat’s core beliefs is that your data should work for you; real-time updates to drive decisions and historical trends to better inform strategies. Report Builder is our latest push to help you understand how the actions you apply in the moment pay off over time.

    In addition to our pre-built daily and weekly reports (Perspectives), Report Builder now gives you complete freedom to create custom reports with the metrics and filters you need to evaluate and measure the success of your unique goals.

    So, how do I use it?

    Each report is generated by inputting a combination of:

  • Metrics: the actual data point that you’re interested in seeing (e.g. Average Engaged Time, unique impressions, or scroll starts)
  • Filters: a certain breakdown that you want to focus on in your reports (e.g. you want to see the data for just a particular section, referrer type, or page path)
  • Group by: how you want to organize the data that’s returned to you (e.g. you want to group your data results by city, loyalty types, or a series of hours throughout the day)
  • Report Builder’s functionality is as limitless as your imagination—you can create any number of reports to help you better evaluate your content’s performance.

    To get you started, let’s take the following question that editors commonly ask:

    Over the past week, which articles have had the highest average engagement, and how does that compare to the amount of traffic they received?

    With Report Builder, we can set:

  • A one-time report over the last 7 days,
  • metrics as Average Engaged Time and unique cookies—because we want to compare quality time to simple unique visitors,
  • and group by page path—so that we get the engaged time and unique cookie metrics sorted by a given page path (the reported URL that comes after the .com)
  • Report_Builder_-_Chartbeat
    And now we can see the most popular pages from the last week showing exactly how much traffic and Average Engaged Time each received.

    But why stop there? Add another group parameter like section or author, and you’ll be able to see which sections or authors those popular pages belong to.


    Or, if you see a high performing article that catches your eye, try filtering on that page path, and you can start building reports for that specific article.

  • You can group by referrer type to see which traffic source drove the most attention to that article,
  • or by hour to see how attention changed throughout the day.
  • Report_Builder_-_Chartbeat

    What other reports can I make?

    The sky’s the limit. It all depends on what you want to know.

    Want to track your audience’s internal navigation from the home page? Plug in the specific metrics you want to evaluate (e.g. Average Engaged Time, unique cookies) and group by internal navigation path and page path.

    You’ll get a historical look at how people were navigating from page to page on your site—and see how much time they spent there.


    Notice any trends or connections between the content? Use this data to adjust your link strategy: change the way you link your content together to optimize recirculation and keep your audience engaged—and likely to come back.

    What else can I do with this tool?

    Do you build a report that you want to download into a spreadsheet every week? Go further with the API endpoints and program a spreadsheet to automatically call and receive the same report over and over again for your team to use.

    And, in case you missed the Report Builder launch webinar and are looking to get inspired, you can check it out here on the Chartcorps Support Site.

    Stay tuned for more tips, best practices, and advanced report ideas.

    Don’t have Report Builder yet? Contact your account manager or shoot us an email to get set up today!