Help Scout Development Update

We've been hard at work developing Help Scout for a little over a month now. We still have a long way to go, but I wanted to record a demo video so we could show how everything is shaping up. Here goes!

Paypal Payments Now Supported

The biggest feature request on our radar for Feed My Inbox has been PayPal Payments ... until today! It is launched now, so enjoy! Thanks for all the suggestions.

Help Scout Design: Round 2

After several rounds of design revisions, we feel really good about the Help Scout user interface. Nothing is "finished" until we launch, but we're far enough along now to start back-end development.

You can see the first round of design revisions in this post, or access a coded version here: brightwurks.com/helpscout/v1/. The top ticket and spam folders are active links there.

Here's a look at where the design is now. You can click the thumbnails below for large versions, or visit brightwurks.com/helpscout/v2/ to see it live. The top ticket, ticket reply, new ticket and spam links are all working in this version.

We still have a lot of details to work on, but this is the core of Help Scout. During the development phase, we'll be working on the other sections of the UI, like the dashboard, reports, search results and settings.

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

Help Scout Mascot: Final

We're so excited to show you guys the final Help Scout mascot today. After lots and lots of tweaks, he is finally finished. He doesn't have a name yet, though. Any suggestions?

Now that the mascot is finished, next we'll be choosing a font for the "Help Scout" part of the logo.

To see what went in to creating the mascot, check out our other posts:

• HelpScout Mascot: Sketches Round 1
• Help Scout Mascot: Round 2

Naming a web app: One word or two?

You may have noticed in our last couple of posts about Help Scout, the name has been two words instead of one (HelpScout). When building a web app, this is something that requires more thought than you may initially think. The domain, of course, has no spaces, leading many to leave out spaces when talking about your app. Is there a right way and wrong way or is it just a personal preference?

In our opinion it doesn't really matter either way. It's all about how you present the name in the logo. As long as it's clear, consistent and easy for people to understand/pronounce the first time, it's a keeper. We've technically gone both ways in the past. Feed My Inbox has always been three separate words for us. However, Linkpatch was always one. In both cases it came down to how we presented the logo.

If you decide to combine a couple of words for your app name and keep it as one word, the logo must visually define each word so that the logo reads more clearly and is understood more quickly. FreshBooks does it through capitalization and changing the color. Salesforce does it by changing the color and the type. Both are very effective:

The main reason we chose two words for Help Scout, each capitalized, is because we've already got plenty of visual stuff going on with the mascot. The type will be pretty simple and straightforward. So in order for people to immediately make the distinction with our service in reading the name for the first time, we think the space adds more clarity.

There isn't a one-size-fits-all answer to this question, but it's definitely something that must be considered during the logo creation process. The last thing you want to do is create any confusion.