Since its launch, the all new Basecamp hadn’t had a dedicated Help site that was actually, well… helpful. Last month, the Support team and I changed all of that.
The previous, crusty excuse of a Help page we had for Basecamp was:
- A list of answers to questions no one was asking
- A dead end that didn’t encourage discovery
- A mystery to our Support team because they couldn’t update it
It needed an upgrade. It needed a rewrite and redesign. It needed to put power back in the Support team’s hands.
Powered by Jekyll
We’ve been pruning our apps all year. Having less to maintain means more time making our current apps better. To keep things light around here, I built the new Help site from the ground up using Jekyll. It’s lean, offers everything we need to manage content, and nothing we don’t. Throw in a couple of rake commands, and I’m compiling styles with Sass to boot.
Empowering the Support team
The old Help site was a static HTML page buried deep within the Basecamp marketing site. Our Support team couldn’t update it. I found it backwards that people who help our customers felt helpless themselves. The Help site redesign became an incredible teaching opportunity. After doing the legwork in designing and building the core of the Help site in Jekyll, I worked closely with Ann and a handful of the Support team to remove their git training wheels and give them a primer on Markdown. No HTML and CSS to learn. Simply update a text file, git push it to our Help site repo, and we’re off. The Support team has been writing fully-packed guides and pushing their own commits since. Fun fact: teaching them some of the tools of our company has inspired them to keep their personal learning going. Chase is learning CSS and adding search functionality to the Help site as we speak.
Encouraging our customers to explore
Remember that one time we hired a video producer? He’s been making short, fun, and incredibly informative video tips for Basecamp all year long. You didn’t know about it, because they didn’t exist anywhere. They’ve long needed a home. The Help site has been a great place for us to not only showcase Shaun’s videos, but house information about real live example projects, Basecamp classes, and 3rd-party integrations as well.
Our support team has been doing a great job for years. We’re proud to have some of the fastest response times in the business. And now, we’re proud of the extra-helpful all new Basecamp Help site. Dig around, we bet you’ll learn something new.
Like they say, give the Support team a static FAQ page and they’ll support your customers for a day. Teach ’em how to pull / commit / push, and they’ll support your customers for a lifetime.
Lawrence
on 04 Feb 13Mig, no disrespect but I really dislike your designs.
The new Help Site, this redesigned blog, even parts of Basecamp you can tell were influenced by you.
My biggest compliant is make simple tasks difficult to find. Like finding the comment section of this blog. The form fields don’t look like form fields. As with links too. It’s never clear in your designs what’s clickable.
Just my 2 cents
MR
on 05 Feb 13Thanks for your opinions, Lawrence.
If by design you mean the aesthetic, I didn’t work on crafting the look and feel of the new Basecamp. So I’ll speak on behalf of the blog and Help site.
Links are underlined and blue. We think this is clear. I’m not entirely sure what could be more clear. I’d love to hear your thoughts on what’s more clear than blue underlined text as links.
As for the comments form, it may “look” different, but it appears like you found it anyway. Exploring, trying something new is all part of the design process.
I personally don’t find hidden comments detrimental to this blog’s health. We collapsed them on purpose.
dave
on 05 Feb 13How are you handling adding screenshots? I’d be interested in hearing more about how the system works when an article consists of more than just text and links.
Ahmad
on 05 Feb 13Forget Apple; 37signals is the best there is. I’m a fan for life.
P.S. Mig you rock.
JS
on 05 Feb 13Dave – First, we create the example of what we’re explaining in an account. We take screenshots with Skitch or LittleSnapper. We do all the cropping and adding of arrows/boxes there. Then we add the picture to the page. It’s not very fancy, but it gets the job done.
Lawrence
on 05 Feb 13Mig, with regards to your comment that I obviously found how to comment on this blog so the form field design can’t be that bad …
A better indication of the issue is by the sheer ABSENCE of comments since the blog redesign.
I will wager that overall # of blog comments per post has drastically gone down since the blog design. (Which would indicate people not understanding how to even comment after the redesign)
Bryan Sebastian
on 05 Feb 13I really like the new design. It is far more interesting than the previous version and invites you in to explore more. I especially like the “manuals” and how each manual title is left justified on the cover. The entire design makes it feel like you are trying to get the viewer comfortable before they dig in.
The only thing I wonder about on those manual covers is the small icon above “owner’s manual”, using “BCX” and the tiny text to the lower right. I like that it looks like a printed manual you might get with a piece of software. But, the icon at the top and text in the lower right is so small it seems distracting. Also, some know BCX was the code name for Basecamp, but not everyone, and that may be confusing to some. However, I can see where these elements make the covers more interesting.
It is great how the entire support team is involved with this project. Some very talented people there.
GeeIWonder
on 05 Feb 13Awesome idea.
‘Helpless’ (or feeling that way) from the help staff perspective sounds awful. This clearly solves that problem.
Have you considered/spent some time pre-empting the kind of problems a move like this can be anticipated to create?
Alex
on 05 Feb 13Why not list all of the frequently asked questions in the top container? Just curious seems silly to link to just 3 more.
JamesyGB
on 05 Feb 13Like the life ring around the logo!
Dennis Eusebio
on 05 Feb 13Love the new redesign. Looks like a big improvement.
I had a question about how you guys test a redesign’s performance. So take this help section redesign. Are you guys taking baselines of say “how many support requests go through a day” and then comparing later? Or do you guys just realize there’s a problem and fix it just because it needed to be done?
Just interested in seeing how you guys balance intuition vs. data driven design decisions.
CC
on 05 Feb 13@ Alex – We’ll be filling out that FAQ section with more questions over time. As the FAQ section grows, we didn’t want it to consume the entire frontpage. Having just a section of them solves that problem and encourages exploring those others not shown on the frontpage.
@ Dennis – We’re definitely tracking those numbers to see how much of an impact this has with customers. It’s Noah’s specialty.
Josh WC
on 05 Feb 13Along with the answer that Mig gave to Lawrence:
“As for the comments form, it may “look” different, but it appears like you found it anyway. Exploring, trying something new is all part of the design process.”
If I understood right, instead of making something more clear to the end user, you chose the other way for the user waste his time exploring?
Is that right?
MR
on 05 Feb 13Josh, since your comment has nothing to do with the post at hand, feel free to move the conversation with me to Twitter. @migreyes
Aaron
on 05 Feb 13The new support / help site looks freakin’ awesome! I really like the idea of the colored owner manuals. Reminds me a bit on the A Book Apart series.
Keep up the great work!
Omar
on 05 Feb 13The new help site looks pretty easy to use. The design matches Basecamp theme. What is not to like?
Michael Butler
on 05 Feb 13Was the horse mask really necessary?
rascalfats
on 05 Feb 13no disrespect either, but the redesign of this blog is all me-too whitespace and hard to work with, kind of blindingly white which is not great for digesting content
the redesign of the help section, that was so important and glad you did that, there is so much more info there now, but the first “home” page of it? with the giant colored squares requiring scrolling to see them all? with the words more-than-left-justified to the absolute left edge of each square? feels amateurish to me, I see you want to have an aesthetic but not sure what it really is
anyways, criticisms of your work are meant to be constructive, we obviously like you and your potential and sometimes you should consider some of these comments instead of just getting defensive and pointing out where the blue comments are …....
Josh WC
on 05 Feb 13Mig,
I appreciate the invitation, but I’m an old fashion guy who doesn’t have a Twitter.
Anyway I don’t wanted to be annoying, I just think that your answer about design process was very odd, and different from the 37 signals standards.
Please, no hard feelings.
Andrew Richardson
on 05 Feb 13I want to point out to those that are citing the number of comments as a reason why the blog redesign is not a successful one that there is no correlation between the number of comments and a successful blog. In fact a lot of highly successful blogs have actually removed comments (Probably most notably Seth Godin’s).
Considering they have fixed other things (like the indent on paragraph breaks that they originally had) and left the comments means this is highly intentional.
Anyways, I think the new support section looks great. I’ve been considering using something like Jekyll or Kirby for things like support articles or press releases where I work. Now if only I could find some good documentation to get Jekyll actually running :/.
Ed Knittel
on 05 Feb 13The 37signals blog has a responsive design that works on desktop and mobile devices. Basecamp has a separate mobile design. Is there any plan to make the Help site more mobile friendly?
MR
on 05 Feb 13@Michael A horse is a horse, of course, of course. Alternatively…
@Josh Appreciate the feedback. No hard feelings. Design is never done.
@Andrew I plan on stripping our Help site and open-sourcing a vanilla version of our Jekyll site so people can experiment.
@Ed You’re a mind reader!
Chris Patton
on 06 Feb 13@Andrew I just moved my blog to Jekyll and yeah, it takes a little work to figure out how it all works. But one big advantage with Jekyll is that it is what Github Pages uses to process their sites. So you can poke around the public repo’s of blogs that run on Github to get a feel for ‘how did they do that?’
In the course of trying to figure things out myself, I saved a few links on Delicious that might help you – https://delicious.com/cgp/jekyll
Another very well done Jekyll based help site is Wistia’s – http://wistia.com/doc
Well done Mig – I think it looks great and is a huge step up from the previous one. I think it’s interesting that well done Help sites are starting to almost replace the marketing sites for prospects who really want to dig in before signing up.
Ryan Rushing
on 06 Feb 13I’m charged with a similar task for our marketing team concerning press releases, so this was helpful to read. I’m considering setting up a light Ruby on Rails CMS they can use, instead of Jekyll, because of the learning curve in regards to git workflow, terminology, remote publishing, etc.
Was there a reason you decided to go with a static site generator, rather than using a lightweight CMS?
CC
on 08 Feb 13I think simplicity was the biggest advantage for Jekyll over a Ruby on Rails app. It’s easy for us on the support team to work with immediately. Learn some Markdown and you’re good to go over learning Ruby on Rails.
This discussion is closed.