The Recovery Capital Index (RCI) microsite was designed to support Commonly Well’s mission of changing the narrative around addiction recovery. The RCI was established as a measurement to help providers and individuals navigate recovery. By calculating holistic scores about an individual’s path, the RCI rejects the industry standard of treating recovery as binary (“you’re either sober, or you’re not”). Our goal was to work with the team at Commonly Well to communicate how this new measure operates and why it is a necessary step towards improving the recovery process.
To start, we were tasked with not only collecting the appropriate data to power the microsite, but also creating the basis of a data infrastructure that would allow the Commonly Well team to have reliable access to the RCI survey inputs and in turn become more data driven in their processes. The RCI tool is powered by Gloo, an application that enables effective outreach between providers and individuals. As such, the survey results and other communications between users were saved in the third party database. Leveraging an architecture of ingestion tools spanning from Fivetran to dbt, we worked with the team at Gloo to build a sustainable pipeline to input the platform data into a Snowflake warehouse. From there, we were able to pull the needed extracts for powering the microsite, and set up Commonly Well to expand their data infrastructure in the future.
The focus of the discovery phase was to hone in on the narrative that would illustrate to providers that the RCI is a necessary tool for recovery. By starting from a broad perspective, we spent time learning about the industry, Commonly Well as a business, and the unique challenges they face. That information enabled us to drive conversations about the target audiences, the topics to cover, and the type of visualizations to include. These decisions were directed at highlighting a specific story and maximizing the impact that the Commonly Well team was looking to create. Based on the findings from these sessions, we fine-tuned a text-based narrative which allowed us to decide how to represent each point be it through graphic design, data visualization, or simply written content. The key to reaching a unified vision of the microsite was creating constant channels of communication with the client and finding the right balance of input from either side.
Designing a microsite usually takes two pathways. One to work out the overall site theme and design, and another to specifically pinpoint the types of data visualizations used to represent the data driven sections and content. The broader site design relies on a mix of existing branding and new elements aimed at representing specific narrative points. In the case of this site, the scrolling animations used to contextualize the RCI scoring and structure were a new approach to showing concepts that Commonly Well has previously represented in different ways.
The data visualization design has the responsibility of highlighting how the RCI works in addition to maintaining the human aspect of the data. By leveraging line graphs and a force diagram, we highlighted the individual paths that people take throughout their recovery by representing each one through an individual element. In the case of the force diagram, we had planned to toggle between the overall RCI view with one bubble per individual and the Indicator (sub score) view with three bubbles per individual. This left us with a decision to choose between grouping the indicators by individual, which would preserve the idea that they combined to create the overall profile of each person, or grouping them by indicator type, to better show the personal, social, and cultural health of the various communities. After a delightfully frustrating brainstorming session, we decided the answer was to show both, which meant that Neil Oliver was tasked with combining multiple force simulations to create a transition which moved through both states. As complicated as it is to describe, it was more complicated to build.
Similar to the design phase, the development phase also follows two paths. The first is the broader website development, which is essentially taking the elements from the overall site design and translating them to the web platform. In our case, the platform we often use is Webflow. Because we think of ourselves as Data Visualization Engineers rather than Web Developers, we opt for the no-code solution so that all of our coding brain power can be focused on the Data Visualization pieces. That being said, using the scroll percentage animation was new to us, so developing the expanding rectangle animations did take some trial and error.
In terms of the data visualization development, the interactive nature of the visualizations required a bit more coordination between Webflow and the D3 code to operate. The scrolling visuals leveraged code based observers that targeted certain elements in Webflow, but the implementation of these elements was also imperative. We had to strike the right balance between the observer thresholds and the element positioning and styling to make sure the triggers happened in view at the appropriate time.
The second piece of crucial communication was setting up the various event listeners that contributed to the exploratory nature of the force diagram. Here, in addition to the multiple force simulations, we introduced buttons, a toggle, and a slider with a play animation. Since each one is built differently in Webflow, the event listeners had to be tweaked to match the unique structure of the outputs. The efficacy of this visualization was then further complicated by the underlying data. We had designed the visualization to showcase change over time and between groups, but as many practitioners know, the data doesn’t always support these initiatives. The changes were often hard to see so we made certain adjustments to highlight which elements were changing to draw the eye to them, but the best way to understand it is to check it out below.
We launched the site in mid-August, a few weeks ahead of a conference that David Whitesock from the Commonly Well team was speaking at. After publicizing the site, David reported:
“The final microsite has been an immediately valuable asset. It elevates our narrative and brand position. It shows our stakeholders how complex survey data comes together to tell a better and more meaningful story about overcoming addiction”.
Our goal had been to create something that helped further communicate the importance of the RCI and also showed how data can be leveraged to help better the recovery industry without blurring the lines of data privacy. Whether we reached that goal is up to the viewer, so we encourage you to scroll through the site and judge for yourself.
