WorkFlowMax Design Study

9th February 2012
All posts

Current Website

WorkflowMax current website

WorkFlowMax was just acquired by Xero, I’m so happy for them, and the partnership I’m sure will yield award winning design integration.

A while back I was asked to do a design study on the WorkFlowMax web app interface. I’d had the chance to use the application for about a year and so had lots of interface ideas saved up from that time, and I submitted several interface ideas that were then added to their update worklist. So I had a lot of inspiration from which to draw.

See the progression of this Design Study below. In all screenshots besides Styleboard I provide the original screen on the bottom and the updated design on the top.


WorkflowMax styleboard

The Styleboard got Chris Spence (Software Development Manager) and I on the same page regarding inspiration so I was able to formulate specific design keywords: Clean, Professional, Clear. The Styleboard covers button styles and colors as well as text treatments and information hierarchy. Rather than saying, “make it look hot”, this Styleboard got us thinking how can we make it simple and easy to use and beautiful (ie: rounded corners) while providing excellent usability.


WorkflowMax calendar

The existing Calendar I thought needed a cleaner way to access the project information. It wasn’t showing multiple jobs on one day very well, and it wasn’t differentiating between Jobs, Tasks, and Milestones as well as it could. I wanted to emphasise the month and day of the week, but make the contained information the star; so the background was minimised and Important Dates made more prominent with color and a handy color key just in case. The key doubles as a filter so you can see just the ones you want.

Note History

WorkflowMax note history

Note History was supposed to be a chronological map of project progress, but instead it made it very difficult to know what to do next. I decided the next action would be to comment on a selected Note and to higlight with the button how many Comments were available, thus spurring conversation and interaction. Notes from Today, and unread notes would be highlighted to draw attention and action.

Lead History

WorkflowMax lead history

Lead History needed some breathing room. I gave it more line spacing and used some bits of color to highlight titles. No layering was needed here since it was basically an activity stream. Sales staff need to know what the new Leads are and who created them so effective follow up can happen. The paying items get a green money icon next to them; the potential paying accounts are gray.

Our Customers / Testimonials

WorkflowMax our customers/testimonials

Our Customers testimonials page was a study on their content pages that weren’t necessarily app pages but static information about the company and the product. What convinces many people to pay for an app is the recommendation of a friend, and knowing there’s a lot of support behind it. This page highlights both, and makes it obvious, but not too overt, that taking the 14 Day Trial is the next logical step.

WorkFlowMax has a solid customer base and because of the Xero purchase will get even more worldwide exposure. I’m excited to see them grow and to see how they update their application interface in the future.


Nathaniel Flick

I'm a Front End Web Developer passionate about usability. My primary specialties are HTML5, CSS3, SCSS, LESS, and jQuery and I am very familiar with Foundation and Bootstrap frameworks. I've worked on top of and with WordPress, Shopify, Rails, Python, and frameworks.