DoneDone

— working together since 2018

Simple Issue Tracking & Customer Support

  • WebApp

Work Type

Product Strategy

UX Design

UI Design

Front-End Development

Technologies

  • Vue.js

    Vue.js

    Vue.js
  • Jest

    Jest

    Jest
  • TypeScript

    TypeScript

    TypeScript
  • Sass

    Sass

    Sass
  • CircleCI

    CircleCI

    CircleCI
  • Webpack

    Webpack

    Webpack
  • Codecov

    Codecov

    Codecov
  • JavaScript

    JavaScript

    JavaScript
  • StoryBook

    StoryBook

    StoryBook
Full project overview

Work Type

Product Strategy

UX Design

UI Design

Front-End Development

Technologies

  • Vue.js

    Vue.js

    Vue.js
  • Jest

    Jest

    Jest
  • TypeScript

    TypeScript

    TypeScript
  • Sass

    Sass

    Sass
  • CircleCI

    CircleCI

    CircleCI
  • Webpack

    Webpack

    Webpack
  • Codecov

    Codecov

    Codecov
  • JavaScript

    JavaScript

    JavaScript
  • StoryBook

    StoryBook

    StoryBook

Background

DoneDone’s is an issue tracker and customer support product that stands out in a crowded market by being a single product mainly focused on simplicity. Early 2018, DoneDone decided to work on some major updates to the product, redefining how it helps their customers to grow their businesses.

DoneDone needed a partner to bring their new product version, DoneDone 2, to life. And that's when Pixelmatters showed up, right during the Summer of 2018.

donedone classic mailbox issue

Challenge

DoneDone’s first version, now referred to as DoneDone Classic, had a good set of defined values, features that accommodated their significant userbase needs, and an identity built around simplicity.

DoneDone 2 needed to preserve all of this while introducing new features and revamping the user experience. It needed to reach a wider range of business areas and remain familiar to the ones already in love with DoneDone Classic.

donedone classic projects dashboard

Product Oriented Mindset

Building a product is not easy. The balance between ambitions and available resources to iteratively achieve a solution that meets the expectations is key. Above everything else, it requires product strategy.

How to achieve it? Involving as much as possible those who know the product best - DoneDone team.

donedone basecamp

Product Analysis

With a broader understanding of the product capabilities and strategy, it was time to go into specifics.

Using walkthrough videos provided by DoneDone team, each feature was analyzed and discussed with them in detail. Notes were taken from the current behavior to the intended goals in order to understand what was required on the refined new version of DoneDone!

donedone classic issue overview

Interface Design

DoneDone 2 demanded a fresh new experience and look and feel. The design foundations were based on where the product clearly needed to dominate at — singularity and simplicity.

Having this in mind, the iteration process began starting from colors and font studies up until the overall structure, creating the foundations for what DoneDone 2 was about to become. The new look and feel aimed to be unique, intuitive and easy to digest.

donedone 2 mailbox components
Setting Up Mailbox UI components.

Design Consistency

Building a product with several features demands consistency. Users create habits and they must feel comfortable during their experience.

A large set of base components was built, ensuring solid design foundations that will be used every time new features or pages are tackled. It just feels familiar to everyone, from customers to designers. Reinventing the wheel? No, thanks.

donedone 2 conversation components
Conversation UI components.
  • Michael Sanders
    Quotation marks

    Pixelmatters skillfully translates our business goals into clean, elegant and reliable digital solutions. With them as our partner, I can focus on what's most important - my business.

    Michael Sanders

    Founder and COO at DoneDone

donedone 2 calendar

Development Process

Iteration is crucial when speaking about agile product development. Not every feature has the same priority or effort involved and there are no perfect plans.

All tasks were defined, estimated and pushed into sprints which outcome contributed to the release goal. This process not only allowed us to plan, execute and track the development lifecycle, but to have the right tools when it was time to take important decisions about the product.

donedone 2 sprint planning

Architecture Definition

The architecture definition needed to take into account the progressive migration from a monolithic application based in .NET to a SPA built with Vue.js on the front-end.

With a component-based approach, the architecture needed to be flexible, decoupled and scalable. The product requirements demanded it.

donedone 2 architecture microsoft.net vue vuex

Development Methodology

Product features cannot be delivered as a bulk. Continuous delivery is something we embrace and the development methodology needed to reflect that.

Trunk base development methodology was followed with a feature toggle mechanism, and a pipeline was built to automate processes. Also, documentation was set in place using Confluence and Vue Styleguidist, and development rules like a clear scaffolding hierarchy and nomenclature were applied to ensure the development's high standards.

donedone 2 circle ci jest codecov

The Result

After some amazing months of collaboration between DoneDone and Pixelmatters, where demanding challenges were continuously handled in each iteration, DoneDone 2 was launched in April 2019. A lot more to come, for sure!

donedone 2 mailbox conversations customer support
  • Ka Wai Cheung
    Quotation marks

    Pixelmatters is professional, pragmatic, and prepared. It's not just about "getting the job done" but about understanding our goals and having a strong opinion about what's best for the product.

    Ka Wai Cheung

    Founder & CTO at DoneDone

donedone 2 mailbox setup