Skip to content

Instantly share code, notes, and snippets.

@cdl
Created July 26, 2014 05:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cdl/8ce1313c4e5fb3d406ec to your computer and use it in GitHub Desktop.
Save cdl/8ce1313c4e5fb3d406ec to your computer and use it in GitHub Desktop.

This started as a few thoughts but turned into a humongous critique.

  • In general.. there's a whole hell of a lot of solid colours in here for something that should be so dead-simple for clients to understand. Cutting them down might be an idea, becasue right now it's really hard to digest with all the colours. Try cutting it down to two.

  • You should make the "Pay Invoice" button, as well as the due date, a very prominent call-to-action in two areas: beginning of the invoice (near the price), and the end of the invoice. Right now, you have it at the end of the invoice yeah, but it's pretty subtle and doesn't draw my eye's attention immediately. Will probably lead to longer wait times for the freelancer to get paid. Also, perhaps make the "due on X" copy a bit more serious.

  • Your attachment layout is really confusing - I read the "4 Products & 13 Attachments" headline and immediately tried to figure out where the attachments were, and got even more confused that they weren't laid out for me to see groups of/individual attachments (similar UX to an email would be nice, or a Dropbox folder-style table).

  • To build on the above point: perhaps make each attachment for each slip a sub-item (another row, smaller height + font size, left padding of like 1.5em), linked to the respective attachment?

  • Copy nitpick: unit should = cost per hour, and then another column named quantity = total hours.

  • This layout feels crowded to me. A lot of different coloured areas in a lot of different sections is really boxing things in and making it hard to really understand the data - found myself having to actually concentrate to read through this. Perhaps it could be cleaned up a little by utilizing a bit more whitespace, and making things a bit more friendly (simple sentence at the top saying "Your invoice is ready." in bold + centered. Also, perhaps "prepared for" address in the top left and the sender's address in the top right? Making it feel a bit more traditional and familiar, rather than it feeling like things are just kind of placed in spots to fill a gap.

  • Honestly, the "4 Products & 13 Attachments" headline is pretty unneccesary altogether - it's just taking up space and doesn't really provide much benefit to the reader. Total attachment count can be displayed next to the "download all attachments" button.

  • Invoice total should be pulled up above the invoice notes.

  • Last thing: thinking about how this'll render on mobile is a bit worrying - really not sure how you'd be able to easily compact things down to be easy to read and not just kind of laying around in different areas.


Overall, this is a really great start, and I do like the direction you're headed towards - very different from what I've seen out there and what I currently use. Can't wait to see more.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment