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!
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!
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.
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.
This post is part of our B Combinator series. We're building a new web app with our own time and money, blogging about every detail from concept to launch along the way. Read our first post in the series to learn more about the project, or visit the B Combinator category page to see all of the articles up to this point.
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.
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:
Our servers aren't even breaking a sweat, so keep it coming!
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.
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.
We've already made some pretty big changes since the final wireframes. Here are just a few of note:
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.
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!
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.
To see how these wireframes evolved, check out the first two rounds of wireframes:
This post is part of our B Combinator series. We're building a new web app with our own time and money, blogging about every detail from concept to launch along the way. Read our first post in the series to learn more about the project, or visit the B Combinator category page to see all of the articles up to this point.
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:
This post is part of our B Combinator series. We're building a new web app with our own time and money, blogging about every detail from concept to launch along the way. Read our first post in the series to learn more about the project, or visit the B Combinator category page to see all of the articles up to this point.
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.
This post is part of our B Combinator series. We're building a new web app with our own time and money, blogging about every detail from concept to launch along the way. Read our first post in the series to learn more about the project, or visit the B Combinator category page to see all of the articles up to this point.