New DoneDone: The Making Of…

For the last few weeks, we’ve been preparing you for the release of the New DoneDone. Last week, we told you about all the updates to the navigation, but this week we’d like to take you behind the scenes and walk you through the process of creating the New DoneDone.

In August 2013, we began what would turn out to be a six-month journey. After the successful release of Kin, our sister app, the design team turned their attentions to DoneDone. We’d learned so much through designing and creating Kin, and we felt DoneDone could easily benefit from those learnings. We believed that with some time and effort, DoneDone could be the best, most attractive, and easiest-to-use issue tracker on the market.

Building A Good Brief

The first part of our process entailed building a creative brief. This brief steered all our product decisions and helped to get all our stakeholders on the same page. In the lead up to the brief, I spent a ton of time researching and analyzing competitors, reading through customer support emails, combing through our analytics, and talking with the folks on our team that use DoneDone day-in and day-out to squash bugs. From all this research emerged a handful of themes which would later guide our design decisions.

The brief distilled our ambitions and the existing challenges into a handful of key objectives. It consolidated our product offering to a single sentence. We established who our primary audience was and documented the requirements for the project. We wrote up who we saw as our most relevant and direct competitors and inventoried all we'd need to accomplished. Lastly, we began to establish a framework for our visual decisions: we listed applications and websites we admired the most and described the look and feel we aimed to achieve with this redesign.

Establishing An Art Direction

The brief itself went through a few rounds of iterations. But once established, it enabled our team to divide and conquer. While working entirely segregated, we created two competing art directions for the homepage of the marketing site. Internally, the design team compared the two options and agreed both were totally appropriate, yet radically different. One design skewed in a more traditional, structured, conservative direction and was perhaps too expected. While the other design swung for the fences and captured attention with an immersive, unconventional experience – maybe too unconventional and too unpredictable.

An early version of the new DoneDone.com

An early version of the new DoneDone.com

After presenting both directions to the partners, it was fairly apparent that each approach had strengths but obvious weaknesses. We collectively agreed to try blending the strengths of the two directions, and it resulted in the homepage we’re proud to release in a few short weeks.

Deliberate, Considered Typography

While iterating on the homepage, our design team was conscious about keeping the application in mind. We were very deliberate about selecting typefaces and establishing design patterns that would transfer well to the app. For the marketing site, we selected Knockout from H&FJ for our headlines. With a san-serif font as compressed as Knockout, we were free to make the font-size extra large and really pack a strong visual punch.

For the application, we needed a more versatile headline font—something that'd hold up at smaller sizes. Initially, we leaned on Futura for that 15px–50px font-size range, but when we got into dev we couldn’t get Futura to render exactly right. It was muddy visually because of how the browsers were handling it—especially at smaller sizes. Verlag by HF&J ended up being the perfect alternative. It’s expertly hinted and renders very well across all browsers. It keeps the geometric, rationalist foundation of Futura but adds a bit more personality and style. Verlag harkens back to post World War II modernism, which aligned stylistically with the illustrations we commissioned from Eight Hour Day.

Lastly, Adelle, an award-winning, highly-legible, editorial font family from Type Together rounds out our fontstack. Adelle is a friendly, tall x-height, slab serif that not only deviates from the expected san-serif body fonts of competitors but also makes reading easier on the eyes.

Iterating and Refining

For Round 2, we presented the blended design direction and an initial direction for the Issue Dashboard and Issue Detail pages of the application. With some minor modifications, we had an approved direction.

A static mockup of the DD homepage from Round 2

After the initial approval, the team spent about a month designing all the pages and interactions for the new public marketing site. After everything was all set, Jeremy took over and started building the new site. After the handoff, the design team shifted their focus to updating the DoneDone app. We went through page-by-page and reconsidered every interaction and updated all the visuals. However, you’ll find a lot of the old DoneDone remains because there's a lot about the experience that already worked great.

Development and Roll-out

Since design wrapped up in mid-December, Jeremy and Ka Wai have been implementing the new designs. A few weeks ago, they finished their first pass through all the updates. Since then, we’ve been iterating, refining interactions, testing, and squashing bugs. And we’re putting the finishing touches on the mobile and tablet views of the new website and application.

Last week, we started a private beta with our team (We Are Mammoth) and in the next few days we’ll be adding dozens of other companies to the private beta. We can’t wait to share the New DoneDone with all of you, but we want to make sure it’s ready for primetime first.

Want to know more about our process, holler at me or DoneDone on Twitter. For more about the New DoneDone, just check read through the articles tagged New DoneDone.