1. vincelane

    Designing Disqus Gravity

    Posted on May 9, 2013 by vincelane

    We launched a new website less than a year ago, corresponding with the release of our then brand-new commenting experience, called D12 at the time. The site was intended to showcase D12 and its new real-time features. We built a slick interactive demo – a demo that I’m still quite proud of – which, as of today, continues to serve as the hero piece at disqus.com.

    The demo does a great job showcasing the D12 commenting experience. However it only showcases a single part of the Disqus platform. We thought we’d challenge ourselves with a redesign that tells a broader story about Disqus.

    We started with a new interactive demo we’ve named Gravity. In the coming weeks we’re going to launch a new homepage, retiring our D12 demo in order to make room in the hero slot for Gravity.

    “Okay”, you might be thinking. “But already? Why?”

    This is the story of how Gravity came to be and what informed our thinking throughout the process.  

    Designing toward a goal

    A small team kicked off Gravity back in December. Long before I started sketching ideas, we worked together on pinpointing the specific Disqus narrative we wanted to tell. We knew a couple things right off the bat:

    • We wanted to highlight the unique range of communities and content on Disqus.
    • We wanted visitors to begin to think about the platform as something more than an isolated commenting experience (a notion our D12 demo only reinforces).
    • We also wanted to hint at potential future Disqus products.

    As our discussions progressed, we came to the conclusion that the best way to accomplish these goals would be to showcase the best content from the Disqus network in a real-time format.

    Learn more about how we’ve been tackling the content challenge around such a lofty goal in my teammate Sam’s blog post.

    Telling a story with data

    I’ve always admired the balance of art and science required to effectively communicate the story behind a dataset. During the 2012 elections I found a data visualization in the New York Times that used color, scale, animation, and interactivity to illustrate potential electoral scenarios.

    image

    “The Electoral Map: Building a Path to Victory”, The New York Times

    I found the visualization immediately more illustrative than watching Chuck Todd walk through the same scenarios on “Meet The Press.” It was one of the first pieces that came to mind as I began to think about our homepage redesign as a potential data visualization project.

    A few months later I attended a talk by Kim Rees, Partner at the data visualization consultancy Periscopic. She spoke about the impact a well designed data visualization can have if the designer creates an emotional connection with the viewer. She illustrated her point by demoing a recent Periscopic project that visualizes U.S. gun deaths.

    image

    The dataset included only a few simple statistics about each victim; information that was bleak, but not terribly meaningful in the form of a spreadsheet. Through Periscopic’s design work, however, the weight of the tragedy behind the numbers became immeasurably more poignant.

    I left the talk thinking about how I might design something more emotionally engaging than a nice-to-look-at, well-kearned series of trending Disqus headlines.

    One of my favorite data visualizations, another piece by The Times, illustrates President Obama’s 2013 budget. The content is certainly interesting.

    image

    Shan Carter, “Four Ways to Slice Obama’s 2013 Budget Proposal”, The New York Times

    For me, though, the most compelling piece about the visualization is the design. Not only does it succinctly illustrate a huge amount of information, it does so through animations and interactions I found surprisingly enjoyable. On page load, the nodes move from the edges of the canvas toward the center, each seeking out its correct destination, reverberating slightly before settling into place. Transitioning from one tab to the next (“All Spending”, “Types of Spending”, etc.) triggers more delightful, gorgeous, physics simulations, with nodes colliding into and repelling one another before settling into their respective destinations.

    I began to wonder if creating an emotionally compelling visualization could be accomplished through similarly playful, engaging interactions.

    Blue-sky design process

    Starting the design process without regard for technical limitations, at least at first, often produces better results. Doing so frees the designer to explore solutions which match users’ mental models, rather than functions of the underlying architecture.

    Given the fact that at this point I had decided our new homepage project should be animated, interactive, and that motion should be influenced by real-world physics simulations, starting the design process without any regard for technical limitations was easy – I had no clue how we’d actually build the thing. (More on how we eventually did build Gravity in just a bit.)

    We worked through countless iterations, starting at first with sketches, and then wireframes. With the sky as our limit, and not many conventional interaction paradigms to rely upon, it was important that we could both produce new ideas quickly, and comfortably dismiss ideas that didn’t quite work, even some we really liked.

    image

    Forgoing Photoshop for JavaScript

    It didn’t take long to realize flat mockups would only get us so far in such an interaction-heavy design. Increasingly, the Disqus design team is moving toward less traditional design tools earlier in our process, in order to better communicate ideas that can’t be captured in a single picture. We’ve found that working within the native context of the end product (most often a web browser or mobile device) helps us find the right design solutions with fewer iterations. We also end up doing a lot more showing and a lot less telling as we communicate design solutions within our teams.

    While working on Gravity, I moved from mockups to interactive prototypes earlier than usual, realizing the bulk of design work would likely be around the various physics simulations I wanted to use.

    We decided on the JavaScript framework D3 to drive Gravity, and while I’m moderately comfortable with JavaScript, and have used numerous design and presentation oriented frameworks such as jQuery in the past, D3 presented an unusually steep learning curve. The evolution of Gravity’s design, paired with my personal quest to learn D3, made for a brief but somewhat alarming series of screenshots (“Oh boy, what did I get us into?”).

    image

    After becoming more familiar with the framework (something that couldn’t have happened without the talented front-end guys here at Disqus helping me over that aforementioned learning curve), the design continued to go through numerous iterations beyond the initial mockups. I began to find the immense number of controls D3 provides liberating rather than burdensome. The JavaScript library quickly became a new, powerful tool in my design toolbox.

    The future of Gravity

    Gravity will become the centerpiece of disqus.com. But where else it may go is our next big question. Share your thoughts below.

  2. We welcome relevant, respectful comments. Please read our Community Guidelines.

    blog comments powered by Disqus