Help Scout Design: Round 1

We've been playing with the first round of Help Scout designs for about a week and are ready to show how things are shaping up so far.

Firstly, design for a web app should start where people will spend most of their time. Start with what's most important, because nothing else matters if those pages don't execute well. For that reason, we started with the tickets view and the individual ticket page.

Objectives

  1. Get out of the way. For Help Scout to be successful, it has help teams be more productive and save time while handling customer service. Since people will be using it every day, design decisions must be based on the utility and intuitiveness they bring to the software rather than the wow-factor.
  2. Make it fast. In order to compete with desktop email clients (and popular web-based ones), Help Scout has to be really fast. Aside from the server/development stuff, HTML5/CSS3 give us the ability to minimize images and code. We're also using CSS sprites whenever possible and only use images when they benefit the overall experience.
  3. Leave room for growth. We hope Help Scout grows tremendously over the next several years, so we're building a frame that can support items on our "someday maybe" list down the road.

Comps

Tickets View v1

The first attempt started too dark, but the layout was coming together nicely.

Tickets View v2

Tickets View v3

Spam Mailbox v1

Ticket View v1

There's nothing like getting these comps into the browser as quickly as possible to see how they feel. Even though the design is at the beginning stages, we're working with coded prototypes to make it more realistic.

You can check out the version 1 prototype for yourself here- brightwurks.com/helpscout/v1/. The Open mailbox, Spam mailbox and top ticket from Cesar Milan are the only links that work properly so far.

What's Changed

We've already made some pretty big changes since the final wireframes. Here are just a few of note:

  • The "Assigned" and "Pending" mailboxes are gone. We found a way to make those work in the "Open" mailbox. I love deleting stuff like that!
  • We added "Mailboxes" to the navigation and made it a dropdown so you can select a mailbox from anywhere. The location feels a lot better there.
  • On the ticket layout we made a HUGE improvement by adding a third column for customer information and history. This was definitely a lightbulb moment.
  • The "New Ticket" button makes more sense in the Mailbox column for a number of reasons.

Next: Polish

Although we're happy with version 1 so far, these designs need a lot more polish. We've got some good ideas on how to do better in the next round.