©Randy Glasbergen

It all started with a simple skype message…

“We will need to create an XD* for how we want the invoice management screen to look as well as the invoice print options and email. We will need one for quote as well which is the same look and feel just the type would be quote and stored in seperate tables.”

*XD has become synonomous for eXperience Design

And so the prototyping begins… the questions (oh the questions), the research, the wireframing and visual design.


Annotating component design helps developers understand what you’re asking them to build.

Components are a group of items like text, buttons or form fields, that, when combined, serve a specific purpose. When I start designing user experiences, certain components are realized. When that happens, I put them into a component library so notes can be added to further explain their functionality. This helps for several reasons. The first is to give the software developers an understanding of what they will be building. Secondly, annotating component functionality at this stage will help further down the line when developing formal documentation like knowledgebase and how-to articles.

Control Panels

The Billing control panel allows all aspects of a customer invoice to be edited.

As you dive further into the functionality of the billing module you get to the heart of the tool. It’s made up of individual control panels that allow the billing administrator to control all aspects of the invoice including customer, payment type and more.

Take a deep dive into the prototype. View the XD here.