Help Scout Type Treatment

Choosing the Help Scout type treatment was a really important aspect of the logo design, because the type will often have to stand on it's own and speak for our brand. With the finished mascot being so big and intricate, he's not always going to fit where the logo would normally fit.

For instance, the type is by itself in the first round of design comps. There's no room for the mascot in the actual application, so the type treatment has to do all the talking when we mention the brand in the footer. We foresee this being the case somewhat often, so the goal was to go with a font that is very distinctive and unique.

Here's the first round of treatments we looked at:

While a couple of these stood out, we felt like more time should be dedicated to finding some other possible alternatives. Here is the second round of fonts we put together:

Finally, we narrowed down to these two:

Ironically, we ended up choosing the very first treatment we started with in the first round (the top one in the image above). The font is called Amasis MT Black.

One thing to remember about choosing a logo font is that you can still make it your own. In order to make the Help Scout logo truly unique, we modified several characters from the original font. Here's a before/after comparison:

The final version is rugged, yet more contemporary than the un-modified version. It looks really good next to our guy, but also pops by itself.

At this point we're really happy with the logo. We are considering the possibility of adding a mark of some sort when the guy is too big; maybe we could use the hat or another prop. But that might not be necessary, as a mark is something we could always add in later. We'll see how it turns out ... for now we're far more concerned with designing an interface that our customers will love using every day.

Happy Birthday Feed My Inbox!

Today Feed My Inbox turns 2 years old and is doing better than ever. Check out what the website looked like on day 1:

Pretty basic, huh? Feed My Inbox is a great experiment in launching something as soon as you can, then learning as you go. We designed and built the first version in roughly 24 hours. It took a little over a year to figure out whether people would use the service, what features people wanted and how we could make money. For the most part, we were wrong on day one about all three. It's a good thing we didn't waste a bunch of time building things we wouldn't end up needing.

Today over 135,000 people use Feed My Inbox to keep up with websites they like. We're very thankful to each of you for using our service. Here are some other numbers we saw just last month:

• We are adding over 9,000 new feeds to our system every month
• Over 20,000 new feed subscriptions were created in July
• Over 21.8 million new feed entries were stored by our service last month
• Over 1.29 million emails were sent to customers last month, which is an email about every two seconds

Our servers aren't even breaking a sweat, so keep it coming!

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

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

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.

New Email Template

Yesterday we deployed a new Feed My Inbox email template design. We've been testing it for several weeks and felt good enough to launch it. Here's what it looks like:

We really like the idea of wrapping content in a container like this and visually separating the articles better. The wrapper works well in our Twitter template, so we moved something similar over to the main one as well. The actual feed content formatting is still very minimal so that it works for any feed.

If anyone has any issues or feedback regarding the new template be sure to let us know. We hope you like it!

Wireframes: Version 3

Today we're going to show our third round of wireframes for Help Scout, which is the last before we bust open Photoshop and start pushing pixels around. I'm really excited to see how it all comes together.

Although these wireframes may look pretty specific, it's important to note that NOTHING below is sacred. Nothing is in stone. These images probably won't look anything like what we end up with. Putting anything in concrete at this stage is stupid, but wireframing is extremely important for setting a foundation. Nothing is final or off the table from a design/layout standpoint until we launch.

Major Changes

1. We started thinking through ticket "states". What's a new ticket look like, versus an open or closed ticket? I don't think we'll know this for sure until we design it.
2. On the individual ticket page, all the action buttons have been moved from the bottom to the top and we flipped the chronological order. Instead of the oldest update showing on the top, the most recent update will show on top and you can scroll for older updates.
3. We added in a button to "merge" a ticket, provided we are unable to match it properly.
4. We changed the location of the attachments. The old location is not intuitive at all. We're also thinking about using Gravatar to pull in customer images and more information about them to place on the left sidebar. This could be neat.

To see how these wireframes evolved, check out the first two rounds of wireframes:

• Wireframes: Version 2
• Wireframes: Version 1