Make Customers Happy

Form elements can be a pain to style, so we’ve gathered a few handy tips and tricks and bundled them into Inputs – a library of nice base styles for buttons and other elements.

There’s still a bit of work to do (particularly with Internet Explorer), but we hope it’ll help speed up design processes, particularly when developing good-looking prototypes.

Check out the demo page, or view the source on the GitHub project page.

Last week we had a visit from the guys and girls at Clearbooks. We really like their approach to bookkeeping and although it will never replace a reliable and trustworthy accountant, it’s an important part of our operations and we can wholeheartedly recommend the app.

See our case study on the Clearbooks site

It’s been a while since we last worked on Shared Inbox, but having recently relaunched one of our bigger membership based sites, it’s very much still on our minds.

Dealing with loads of customer service queries is an inevitable part of relaunching a popular website and with a small team replying to them, having a help desk system to organise and delegate these queries should make an arduous task a bit more pleasant!

We’ve been using a popular help desk system, Zendesk, to process our incoming emails, and on first impressions it seems great. An account has a number of “agents”, who should solve “tickets” (emails) assigned to them. Sounds like fun!

However it soon becomes clear that carrying out simple tasks isn’t as straight forward as it should be.

Emailing a customer – Creating “Tickets”

Say you have an individual customer you’d like to contact – maybe there’s a problem with their order or account. You’d like any further correspondence to go through the help desk so that others can respond and help solve the problem if need be.

For this task, Zendesk requires you to create a new “ticket”, set the “requester” to the customer’s email address, fill out an “assignee”, type your message and press submit.

Easy enough (once you know how), but to me, it feels clunky: creating a “ticket”, which is effectively just an email; setting the “requester” as the customer – (which surely should be me); having to fill out an “assignee” when it may be unknown, or totally unnecessary. It’s forcing me to think about something that shouldn’t require any thought at all.

Replying to Tickets

Open tickets can be found easily on the dashboard, however, if you’re anywhere else on the site, the quickest way to view a lists of tickets, is to go to the rather confusingly named “Views”.

Once you’re viewing a ticket, there’s a similar interface to the “new ticket” page (but pre-filled with the customer’s query). All I want to do now is write my response and send it. However, if I do this, I get an error as I’ve not entered an “assignee”. As I’m the one dealing with it, it’s likely that the assignee is me. If I feel that another team member should answer it, then I’ll change it, but right now, it’s another step preventing me from answering customer queries quickly.

On the customer’s end, they’re presented with an email that includes their original query and subsequent dialogue. They’re invited to reply above a dashed line, in order for their message to be processed successfully in Zendesk. This assumes that the customer will read/understand the instruction, and will then obey it – possibly changing how they usually reply to emails in the process. It may sound simple, but  these kind of assumptions can be naive - I have dealt with many cases where the customer couldn’t quite get this, so was creating a new ticket every time they emailed in. Annoying and unmanageable.

Keep it simple – Shared Inbox

Our plan with Shared Inbox is to vastly reduce the friction involved in answering customer queries as quickly and efficiently as possible. We’re very excited about spending more time on this project and getting something out there for you to use as soon as possible. We’re confident this will solve a common problem for many of you, including ourselves.

Request an invite and be one of the first to know.

At Pigment we don’t believe in working ourselves in to the ground. We want to keep our team sharp and creative, so we keep to a laid back working practice. We work sensible hours, have good breaks and fun in the office.  We wanted to apply these values to our own project too, no matter how exciting it is working on something new (we could easily have worked late in to the night, fuelled on adrenaline and pizza, but we decided not to).

• We worked (very) reasonable hours.  Most of us arrived in the office at around 10AM and left for home at around 5:30
• We went out for lunch every day
• We took time out to do something different every now and then (for example, to do some juggling, watch a youtube clip, trying to get our hands on the new iPhone 4)
• Every feature had to have good integration test (cucumber) coverage

So how did we get so much done?

• We eliminated as many distractions as we could.  Flipping to another job to fix a problem impacts your flow significantly.  For example, answering a 5 minute question about another project could cost ten times that because of interrupted flow. Programming and design requires focus and that isn’t possible when you’re flipping from task to task.
• We had only one short standup ball passing meeting in the morning (you are permitted to talk only if you have the ball)
• We concentrated on only what we needed to do to tick a box.  For example, a task might be “a user should be able to send an email”.  If we can answer “Yes” to that question, the job is done and we move on to the next one.  Does it have a really nice form? No. Does it have formatting? No.  Does it have an address book? No.  These are all separate features that we’ll get to – but in the meantime we have a working product sooner.
• We wrote quick acceptance tests (cucumber scenarios) before starting any code for each feature

On the technical side, we used pivotal tracker to manage jobs, github to share our code, heroku for deployment and  sendgrid for email processing.

How does the shared inbox look on Day 5? Well probably the easiest thing is to just show you! Click on the first photo for a selection of screenshots.  Once the box opens, click anywhere on the photo to move to the next one.

We started on Monday morning with an idea, and by the end of the week we have a working product.

We’ve set up a waiting list for invite codes, so if you want to be one of the first to give it a try then please sign up and we’ll send you one as soon as we’re ready.

Oh, and one more thing – this week we also found time to re-launch our own website – check out www.thinkpigment.com.

If you haven’t heard of the technique “behaviour driven development” before, you might be interested to know a little more about how we develop a feature from scratch.

Before writing any code, or designing any screens, we start with a story. Here’s one of the real stories that we started with on sharedinbox.com:

We use some software called Cucumber to simulate each one of the steps above. It’s almost like a real user clicking around on the site, trying out the features to see if they work. We run the story through Cucumber over and over again; each time a step doesn’t work, we add the code and screens to make it succeed or “pass”. The feature is finished once all of the steps are passing.

All of these stories are run through automatically every time we make a change or add a new feature, so we always know that all the features we’ve made are working as originally intended. The end result is a kind of instruction manual that picks up the product and checks everything works just right every time you use it. Great really!

More fun working on sharedinbox today:

Shared Inbox Day 4 from Pigment on Vimeo.

Great progress today. The first email to a sharedinbox.com account was sent, and it arrived safely into an inbox which is really beginning to take shape!

I’ve spent the last couple of days working on the colour scheme and layout for the marketing site, and it’s coming along nicely.
The original colour scheme:

While it kind of works (and reminds me a bit of neapolitan ice cream, mmm), there were issues when placing text on it (it was either difficult to read, or it simply didn’t look right). We then moved on to a stronger blue:

Feeling that we could do with a bigger choice of colours, I payed a visit to to one of my favourite sources of inspiration – grainedit.com, and found some lovely colours on a little calendar from seesaw:

Following a bit of discussion about layouts (check out the video, below) we’ve come up with this, which is currently being coded up:

There’s still a few decisions to be made, but I’m glad to see it in the browser!

We also spent some time today searching for icons. I am big fan of the brightmix icon set and we’ve tried to keep to a similar theme throughout.

On the font-front, I’m hoping to do a bit of embedding – probably CartoGothic – check it out!

Anyway enjoy the video. It’s funny!

Shared Inbox Day 3 from Pigment on Vimeo.

We’ve made some good progress today. We’ve decided on a direction for the marketing site, which Dom has been beavering away at. Sam’s been busy giving users the ability to add a mailbox, see their mailbox on login, view their messages and logout.

Last week I mocked up some initial sketches for the inbox view over our lunch meeting (see below).

To keep the process lean, I bypassed the Photoshop stage and started coding straight to HTML/CSS. We’ve decided to build on HTML5 with some CSS3 thrown in for good measure. We’re aiming for backwards compatibility with the main browsers, although we’ve decided to drop full support for the dreaded IE6. Here’s how it looks in Google Chrome:

See you tomorrow!

We’re all really excited to be working on a new idea, sharedinbox.com.

We started developing the idea last week over a quick lunch.  We took along a couple of A4 pads and some sharpie markers and sketched up the concept of a far simpler online customer support app.

The result of our meeting was that we wanted a customer service app where:

• The customer interface is simply email
• Operators know how to use it without training
• Operators are encouraged to give the best customer experience possible

I sent these brief ideas to Jason from 37signals asking for a quick fire response. He responded to my email almost straight away with this one liner:

“You’re not crazy – there’s likely a very large market for something simple.”

This got us thinking – how can we strip this idea down even further in to something even simpler?  We were already thinking simple – but what was the essence of it? Answer: A shared inbox.

Work started this morning and in just one day we’ve already made a lot of progress.  Users can register, login and create mailboxes.  The inbox screens are designed – straight from paper to HTML. We’ve started this blog, set up twitter accounts, set in motion a marketing site, figured out the pricing model – and produced a short film.

By the end of the week we hope to have a working app where we can send and receive emails from a shared inbox.

On the technical side we’re going to start with Rails 3 beta 4 (with jquery) – and see how this goes.  So far today it’s been a smooth ride and no major hurdles. It’s all mostly familiar with just a few new syntaxes to get used to.

Here’s the film of us in the office today – it’s a bit crude but we’re building an app here too you know..!

Shared Inbox Day 1 from Pigment on Vimeo.

Maybe it’s because I grew up in Canada where the staff at the local pizza joint the answer the phone in a cheery voice “It’s a wonderful day a pizza delight, how may I help you.” Or maybe because I believe that treating people how you’d like to be treated is a no brainer. Whatever it is I believe customer service is the key to successful business and if done well it can put your business ahead of the pack. (more…)