You’re reading Signal v. Noise, a publication about the web by Basecamp since 1999. Happy .

Signal vs. Noise: Design

Our Most Recent Posts on Design

audioicon.png

Great UI in Chrome here… I had about a dozen tabs open, and some audio was playing. It was an auto-play ad, so I didn’t initiate it and I didn’t know where it was coming from. I happened to look up in the tab bar and spotted a little speaker icon in one of the tabs (see the middle tab in the photo). I clicked it. Sure enough, that’s where the sound was coming from. When the video ended, the little speaker icon went away. Great little touch that answers a common question… “Where’s that sound coming from?”

Jason Fried on Apr 24 2014 1 comment

Reading the difference

Claire Lew
Claire Lew wrote this on Discuss

“All that work, and that’s it?”

I remember thinking this to myself a few weeks ago. I’d been building a new homepage for Know Your Company. But I didn’t feel I’d made much progress.

I’d rewritten copy, collected stories from current customers, designed several new pages, made the site more mobile-friendly…

Yet despite these changes, the site didn’t look much different than before. I began to question if I’d accomplished much at all.

Luckily, as I started to feel this way, I happened to be chatting with Jonas, a designer at Basecamp. He’s also the original designer of Know Your Company, and has helped me transition the product into its own company.

Jonas said this to me:

“Claire, go read what the homepage had before.”

I went and did that.

“Okay. Go read it now with your changes.”

I went and looked at my new site.

“See? Before, people looking at your site didn’t know what customers thought about your product. Before, they couldn’t request a product demo as easily. Now, your revised design helps people do those things. So don’t get discouraged because your design doesn’t look different. If you read it, you’ll see it’s much better than it was before.”

What a great reminder.

I’d forgotten my progress simply because it didn’t look different. When you just look at the difference, you might not see much. Text looks like text, regardless of what it’s saying. But if you read the difference, you see how big your changes actually are.

Progress isn’t measured by how different something looks. It’s measured by how useful something has become. Is it making this person’s life easier? Is it doing the job you want it to do? Reading the difference, not just looking at it, reveals your progress.

So the next time you doubt how much progress you’ve made, don’t look at the difference. Read the difference.

You’ve probably accomplished more than you give yourself credit for.

Basecamp goes back to basics

Jonas Downey
Jonas Downey wrote this on 11 comments

If there’s one thing everyone can agree on, it’s that computers and user interfaces peaked in the 1980s. Everything was clear and simple, without all of our modern annoyances like portability, color, touchscreens, and the Internet.

With that in mind, we took a long, hard look at Basecamp. We asked questions like:

  • Is Basecamp as simple as it can be?
  • Should we make Basecamp less colorful?
  • What if Basecamp was stored on 800kb floppy disks?
  • When is Knight Rider starting?

So today, after months of work, we’re excited to announce that Basecamp is going back to basics. We’ve rolled out an update to all our users that’s available right now. Just visit Basecamp in your web browser, and type the code dogcow to get a sneak preview of our new direction. We think you’re going to love it.


Basecamp’s new system requirements:

  • Macintosh System 6 or higher
  • 512kb of RAM
  • 800kb floppy disk drive
  • 1200bps dial-up modem (recommended)

P.S. refresh your browser to exit the preview.

Drawing Trouble

Nate Otto
Nate Otto wrote this on 13 comments

One of the fun aspects of illustrating for the new basecamp.com marketing site is getting assignments from Jamie, Jason, and Mig. One of my favorite briefs I got was “can you illustrate browser trouble?”

Upon getting art requests, I usually search to see if there’s a standardized image for the concept. In this case I didn’t find any imagery that rose to the level of iconic, or was particularly interesting or clear. I opted to start from scratch.

Hmmm, browser trouble

Broken windows, bugs, injuries, cracked screens, dizzy people? I drew a page of visual brainstorms and posted it on our Basecamp project.

Whoever assigns me a drawing—in this case, Jamie—reviews my explorations and then ask me to flesh out one of the directions. Jamie liked the guy with the computer head and suggested that there be a browser window with a frown face.

I drew up another page with color.

With that, Jamie got back to me with “Awesome.”

I waited to see how the image would be implemented. Working with the Basecamp design team is great for me because I’m not particularly strong in Photoshop or Illustrator—those guys are all ninjas. I like to draw, and that is how my time is spent most efficiently.

Usually I have no idea how the images are going to be used until they are implemented live on the website, which is fine by me. I like the surprise of finding a fully rendered web page with my drawings.

Hopefully it is a page you will never have to find.

Yelp's nice settings toggle

Jamie
Jamie wrote this on 5 comments

Yelp updated their Privacy Policy so now businesses can get some insight on their customers. The nice thing is Yelp gives you a preview of how your information would appear to these businesses.

You can Change Privacy Settings to toggle between how much info you want to reveal. As a Yelp user I’m not passive in this. I’m given a choice. I thought this was a pretty cool interaction—a nicely done modal.

Join our team: We're hiring a product designer.

Jason Fried
Jason Fried wrote this on Discuss

We’re looking to add another product designer to our team! We don’t hire for this position often, so we really savor moments like these. We’re eagerly anticipating hearing from you.

Besides design, your job is to make an undeniably positive impact on our company, our culture, our products, and our customers. As long as you make your best effort, and you love to learn, we will do everything we can to support you creatively and help you do the best work of your life.

Product designers at Basecamp are always working on different things. You may be working on polishing up an existing feature, pitching and designing something brand new, or fundamentally rethinking how we do something. You could be working on the web or you could be exploring designs and interactions for a native mobile app. Projects at Basecamp always start with design, so you’ll constantly have the opportunity to lead us in new directions. Challenge us! Push us! Be original and show us the way!

Besides having great visual taste, talent, and the right sensibilities, you must write well-structured HTML/CSS. Basic Javascript or Rails skills are a plus, but not required. Experience designing for iOS and Android is also a plus. Great writing skills are required.

We are not looking for someone who’s already expert in everything they do. We’re looking for someone great who demonstrates the interest, drive, and desire to keep learning new things and continually get better.

At Basecamp you’ll be working with great people. Friendly, talented, original folks from dozens of cities around the world. The people who work here have a wide variety of interests and interesting life experiences. You’ll have a chance to learn from some of the best people you’ve ever met. And we’ll get to learn from you. We’d love for you be part of our patchwork.

Working as a product designer at Basecamp is a unique opportunity. We have a small team, so you won’t be one of dozens. You’ll be one of a few, so your impact will be felt inside and outside the company. You’ll be working on a product that is used by millions of people. You will help drive us in new directions. You’ll help us see things we haven’t seen before, consider things we’ve never considered before, and bring fresh perspective to our team. Brighten us up and put a big smile on our customers’ faces.

You love to write, too. You understand that copywriting is design. The words matter as much as the pixels. Great visuals with weak words are poor designs. You should care about how things are phrased as much as you care about how they look.

We’re open to hiring the best person no matter where they are. If you’re in Chicago we have an open desk for you in our office. But more than half of our company works remotely all over the world, so you’re welcome to be part of the team no matter where you live. If you do want to relocate to Chicago we’re open to that as well.

How to apply

Send relevant work samples, and anything else that will make you stand out, to jason@basecamp.com. Extra effort and personal touches will be looked upon favorably. Show us how much you want this job and not just any job. Please include [DESIGN] in the subject of the email.

It doesn’t matter where you went to school, or if you even graduated. It doesn’t matter if this is your first job or your fifth. Doing great work and being driven to improve yourself and everything you touch is what matters.

If we think you’ll be a good fit, we’ll be back in touch with step two of the application process.

Google Play Banner Design

Jamie
Jamie wrote this on 3 comments

Apple provides a nice “Smart App Banner” hook for developers to promote their iOS apps from within their web apps. Unfortunately Google doesn’t have anything like this for the Play Store. Now that we have Basecamp for Android, we want to promote it to customers using Basecamp on their phone browsers.
Thanks to GitHub there are a few nice solutions:


These combine both iOS and Google Play designs which we didn’t really need. In the end we rolled our own solution, but I based the banner design on Vitaly Glibin’s Smart App Banner.

I uploaded a working version of the HTML to GitHub. Please feel free to use this design to promote your apps in Google Play. Thanks again to Vitaly’s Smart App Banner for the inspiration.
And if you’re an Android user get the Basecamp app on Google Play!

47246719.jpg

The 3 1/2” floppy disk as the go-to save icon gets a lot of play, but I don’t think enough attention is paid to the venerable trash can icon.

First of all, trash cans never looked like this while I was growing up in Denmark — I only knew what it was from American TV. Second, I don’t think there are any of these left even in the US.

google-domain-icons.png

Guess what these Google domain icons do. I’ll go first: Send a locksmith, Start a party, Call a handyman, Jump out the window, Put on your seatbelt, Use a lifeline, Start the machine.

The feature that almost wasn’t

Emily Wilder
Emily Wilder wrote this on 9 comments

It took more than a year and three distinct attempts to get Google Docs in Basecamp ... and still, the damn thing almost didn’t get built. Why was it so hard?

We knew we needed it. Integration with Google Docs was a super-popular feature request, and usage in general is on the rise. Since Basecamp is a repository for everything project-related, it made sense to show the same love to Google Docs we show to any other type of file you can store in a Basecamp project.

Problem was, we don’t really use Google Docs ourselves. And we’re kind of notorious for scratching our own itch and not building shit we don’t need. It’s absolutely the exception that we would create a feature we didn’t plan on using. (For years, to-dos in Basecamp Classic didn’t have due dates, because we just work on things until they’re shippable. It wasn’t until enough customers hollered at us that we eventually added them.)

“We know tons of our customers use Google Docs; they have to,” says Jason Z. “Everybody’s using Google Docs. So we know it’s useful, we know people are asking for it all the time. There just comes a point where we have to figure it out.”

Shortly after launching the new Basecamp in March 2012, a small team explored what it would take to link to Google Docs from Basecamp. “We started with a little experiment to see whether the tools Google provides are enough to do basic integration,” said Jeremy, the programmer on that first spike. The goal was to be able to “pick a file from Google without having to commit to deep integration that changes the way Basecamp works.”

Google’s file picker made integrating with Google Docs easy, but rendered switching between accounts (if you’re signed in as one user and need to sign in as someone else) nigh on impossible. And we got hung up on what to do about permissions: Our choices seemed to be either allowing anyone who had the link to edit the document, or letting Google handle permissions and suffer the nasty flow and UI that resulted (more on that later).

With the account switching problem, our choices were to wait for Google to improve their tools, or scrap that and find some other way to integrate — i.e., roll up our sleeves and build our own picker. “That led to a waiting game,” Jeremy recalled: “if Google’s own tools got good enough that we could use them, then we’d have an easier time integrating.” So we punted.

Nearly a year later, a different group took a second look. While there still wasn’t a straightforward path for switching accounts, Javan experimented with a ton of different parameters and landed on treating authentication as a separate, first step to lead into the file picker, using Google’s JavaScript client.

What a Basecamp user sees before signing into Google
When a user is signed into a different Google account, they can sign out and choose which account to link to Basecamp.

Managing the two steps separately gave us the flexibility we needed to resolve the account switching issue, but the permissions demon was still rearing its ugly head. We punted again until we’d have more time to explore it.

Each time we felt like we were getting close, we’d reach the same stalemate. No one knew which of the two options for handling permissions was the lesser of two evils:

  1. Allow anyone with the link to view the document. This route would have meant sharing a Google Doc in Basecamp = changing its permissions so anyone with the link could view and change it. Other tools handle permissions this way; it makes things pretty easy and keeps the UI clean. But it creates a pretty gnarly security concern, in that there’s no way to revoke access later. People no longer employed at an organization might be removed from its Basecamp account, but still have access to proprietary information stored in Google Docs. Or users might share the link with outsiders who could then access and edit the document anonymously. No bueno.
  2. Let Google be the gatekeeper. When permissions are set within the Google account and Basecamp doesn’t mess with them, we get to wash our hands of security concerns. Convenient for us! But it passes this potential morass of access seeking and granting onto our users: The viewer has to be signed into Google, and they need permission to view the document to see the preview in Basecamp. If they don’t have permission, they can request it through Basecamp. They’ll then be directed to a Google page, and from there, the request is emailed to the Google Doc’s owner. When the owner grants access to the document, Google sends an automated email to the viewer with a link to view it. “A lot of us were feeling like this leads to a pretty crappy experience,” Javan says, “because you click on the doc and then you hit this brick wall.”
Step eleventy-bajillion-and-four in trying to preview a Google Doc in Basecamp that you haven’t been granted access to

“I was worried that people wouldn’t understand that, because I didn’t understand it,” recalls Ann from QA. “I did an experiment with the support team where I shared a Google Doc with them … I got all kinds of requests to view the document, because I hadn’t given them permission yet. I was afraid that oh my God, every customer was going to see that.” Adding a private file to a Basecamp project with 150 people on it might generate 150 email requests for access to the file. That was too big of a burden to pass along to customers.

The temptation was to punt a third time — only that was no longer an option. “We decided very clearly that if we don’t do it this time, if we don’t figure this out, we’re basically saying that Basecamp is not ever going to have this,” Jason Z. says. “Because why would we take a fourth attempt? That would be ridiculous.”

The pressure to “ship or get off the pot” led the team to explore other possibilities, like building a folder system that would copy Google Docs into a Basecamp project folder on Google Drive, or using Box.net’s Google Docs integration. We finally started to wonder whether the people who wanted Google Docs in Basecamp might already have the permissions thing dialed in. Jeremy chimed in at that point:

Companies switch to Google Apps from company Exchange email and central network fileservers. They “go Google.” Everyone at work is on Google, signed in, and has access to email, drive, calendar, contacts, etc. Google Apps recommends default sharing settings that are a lot like having a old-school central fileserver: newly created files are visible to others by default. There’s no sharing step or permissions-request dance: https://support.google.com/a/answer/60781. This is a golden path. It’s well-integrated and it’s the default when a company goes Google.

That perspective alleviated a lot of the trepidation we had about what users would see when they clicked on a Google Doc — the hope was that if people were already using Google Docs at work, they can probably already access all the links they need to be able to access by default. The access nightmare we envisioned wouldn’t occur if companies’ Google Apps admins were already setting up good defaults, the way Google recommends.

We still weren’t 100 percent convinced we had it right, but it felt good enough for v.1 — to be hands-off, and let the people who use it figure it out (with help, of course). “It’s funny how long the project went on, and in the end, it’s almost simpler than where we started,” Javan says. “But I guess that makes sense.”

“We made a bet on this permissions thing,” Jason Z. says. “We don’t use the feature, so we don’t know. We can’t anticipate what the pain points are going to be here.”

A month or so after shipping, it’s looking like we made the right bet. The majority of feedback has been of the thank-you-so-much-for-adding-this! variety. So far, 56 percent of users are logged into Google when trying to preview a document from within Basecamp, and of those, 91.5 percent already have access to the document they were trying to view. For how much concern there was over whether we were making the right call with permissions, it’s been super quiet. “We were really expecting more confusion, because we were confused,” Ann says. “The people who do use it know how to use it, and I guess we’ve fallen in with their expectations.”

“That’s a super important lesson just in product design in general,” Jason Z. concludes. “You can engineer all kinds of things, and they might be the wrong things if you don’t know. So it’s better to under-engineer and let the pain kind of bubble up organically, than to guess wrong.”