Case Study

Ligonier

Envy designed a data-driven experience where users could explore 3,000 survey participants’ answers.

Nick Walsh John Wilson

Project Details

The Client

Ligonier Ministries, a Christian institution based out of Orlando, FL.

Ligonier Ministries

Project Goals

  1. Make the data interactive

    Ligonier contracted LifeWay Research to conduct a survey about individual religious belief that involved 3,000 participants and took 2 years to conduct. That’s a lot of work to simply throw in a PDF that few people will read. Instead, building a fully-interactive site not only makes the data more accessible; it makes it shareable as well.

  2. Make the data palatable

    Some of the world’s most vital information may still lay dormant in some wordy research article, read by few eyes. It’s an artform making data interesting. That’s something at Envy we’re not unaccustomed to, and it’s something Ligonier needed for their findings.

  3. Let users draw their own conclusions

    Truth in data visualization lies not only in what’s sold as important, but the ability for people to look at well-organized data and discover the same conclusion and even new conclusions for themselves.

Research + Prototype

Active vs Passive Data Navigation

Good data visualization finds a balance between active and passive data navigation. Should users simply be handed the most interesting correlations, or should they discover for themselves? For this project, we opted to split the project in half: starting with a narrative essay where users could passively read through Ligonier’s key talking points, and ending with a data explorer where users can navigate and subset the data however they choose.

Project sketches

Truth, Visualized

We decided on styled bivariate area chart as the best readout for the information. Anyone can make a graph pretty, but just because something’s pretty doesn’t mean it’s true. Or easily understandable.

Chart sketches
Design + Build

Beautifying Data

With D3 at our disposal, we can not only create interesting animations like the site’s startup screen, but actually make it using real data. Here, the actual survey answers are laid out on a radial axis for visual interest (don’t worry—the data is broken down more helpfully below).

Interactive Integrity

We allowed users to create their own profiles for any question, and see how fellow Americans of different regional, faith, and education backgrounds answered the same question. Users can see how big their sample size is, in the top-right legend. We also warned users when they dropped to a low sample size, teaching about data validity in a simple way.

Overall Aesthetic

Like Christianity itself, the Ligonier brand is a blend of modern and ancient thought. What better way to show that than with traditional serif typography juxtaposed against whitespace and dynamically-generated data visualization?

Site typography

Front-end Implementation

Using D3.js, we were able to dynamically generate graphs in the browser without the need for a backend server. As users navigate the data, charts redraw instantly without any server requests or unnecessary loading times. Further, the entire site is 1MB (gzipped) and caches well, allowing even users on slow connections to have complete access within a few seconds.

Data explorer
Deliver

Results

Client-side code: engaging interactions

Users can stay engaged and continue to dive deeper and deeper into the data without having to wait for new HTTP requests to be completed. Everything happens the instant something is clicked.

Well-tailored charting

By taking influence from a typical bivariate area chart and expanding it to suit Ligonier’s needs, a custom chart type was created that clearly depicts what the range of responses to each question looks like.

Repetition grounds experiences

All data visualization takes a second to grasp what is being shown, but to change the chart type every time data appeared would be too overwhelming. By repeating the chart style, a user will become very familiar with what is being shown and will continually become faster at recognizing patterns.

Testimonial

Envy designed a helpful visualization of this data and implemented an impressive solution very quickly. This project would have floundered without them.

Dirk Naves, Chief Creative Officer
Case Study

GeoCerts

Envy simplified the scary, confusing world of SSL certificates with an e-commerce redesign.

Learn More
Case Study

Shipyard

Envy built a unique data visualization tool to track water quality and environmental impact.

Learn More