What is this?

This is a CRM system being designed and developed by its own users.

CodeDoesGood is a group of volunteer developers and designers seeking to fulfill two needs:

  1. Provide new developers and designers with the experience they need to get their first job in technology.
  2. Provide non-profit organizations with affordable custom digital solutions.

They needed a CRM system to manage the volunteers, projects and client organizations.  So, naturally, they built one.


The technical specs were previously outlined by the founders of CDG and a few wireframes had been created by a previous designer on the project.  My part was to continue the design and stay ahead of the developers.  Back-end development has been underway for a while and once I submitted the main screens of the UI, the front-end development began.

  1. Familiarize myself with the technical specs and ask questions for clarity.
  2. Add visual design to the existing wireframes.
  3. Identify the remaining wireframes needed for development.
  4. Create remaining wireframes.  (This is a work in progress.)


CDG Wireframes before UI work

Before, wireframes handed as they were handed to me.


These are a couple of examples of the before and after from wireframe to prototype.


We are using Sketch and Zeplin for the design work.  The CDG team operates on GitHub, Slack and Google Drive.

Leave a Reply

Your email address will not be published. Required fields are marked *


The many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected true of a humour.

Scroll Up