The next big jump in Basecamp accessibility!

How we made the Basecamp 3 Jump Menu accessible

The Basecamp 3 Jump Menu

Earlier this year I wrote about How we stopped making excuses and started improving Basecamp’s accessibility. Accessibility improvements in Basecamp 3 have come in two ways: All new features we’ve shipped over the past year and a half have been designed and tested to meet WCAG AA guidelines (The Web Content Accessibility Guidelines, or WCAG, provides a shared standard that web developers can follow to make sure their products are accessible).

At the same time, we’ve gone back and retrofitted existing features and interactions for better accessibility. Today I’m excited to announce that we just completed some significant improvements to the Basecamp 3 Jump Menu!

The jump menu has always been the quickest way for getting to a person, project, recently visited page, and My assignments/bookmarks/schedule /drafts/latest activity. Here’s a look at it in action:

Note the small-ish “Press ⌘+J to show the menu” label

In setting out to make the jump menu more accessible we identified a few specific areas in need of help.

1. Provide an alternate way to trigger the menu

The ⌘/Ctrl + J shortcut for opening the jump menu isn’t communicated in a non-visual way, and initiating multi-key commands can be difficult for people who have motor function challenges.

To improve this, we added a button-based trigger, implemented as an invisible button that appears when someone first presses their tab key after loading up Basecamp. This technique is very similar to the common “Skip Navigation” link technique used around the web (we added one to Basecamp at the end of last year).

The Show Jump Menu button. We used the opportunity to reinforce the keyboard shortcut for those who prefer using it to open the menu.

2. Clear non-visual instructions for how to interact with it

As a visual user it’s fairly obvious how the jump menu works: We show the placeholder “Jump to project, person, or recently visited page…” with a blinking cursor, and a list of entries below it that filters down as you type.

To clarify this interaction for customers using a screen reader, we created a visually hidden <span> element with more verbose instructions, “Type to filter and use the up and down arrow keys to navigate this list of people, projects, and recently visited pages.”

3. Announcing the selected item and number of results as you filter

If you’re using a screen reader to filter through a list, how do you to know how many items are listed as your search term increases? And which item is selected as you arrow up/down or tab to navigate through the list of results?

This required the use of some specific HTML markup and JavaScript to convey this information to the Accessible Technology (such as screen reader software) that I’ll go into below.

Implementation

The first step in making a complex element like this one accessible is doing some research. We look for examples of similar elements from around the web for inspiration and guidance on the proper markup to use. The W3C WAI-ARIA examples site (get ready for a long one! “World Wide Web Consortium’s Web Accessibility Initiative (for) Accessible Rich Internet Applications”) is a great place to start. The second example on their Combobox with Listbox Popup Examples page, “List Autocomplete with Automatic Selection,” seemed most similar to the behavior of our Basecamp jump menu.

Authoritative as this site may seem, it’s worth testing the examples on real screen readers. There’s an abundance of quirks across screen reader + web browser combos that means these examples often don’t work quite as expected. When that happens, additional code is often required to get screen reader announcements to fire in the way you’d like. Expect lots of trial and error 😊


The implementation we settled on uses the aria-activedescendant property. This technique provides a way to keep DOM focus on the <input> while updating your selection as you move through the list of results. This is the key that allows the screen reader software to understand what’s happening on the screen. Here’s a look at the final product in action, followed by all of the dynamic and static attributes we used to get this working. For further reading about these attributes check out the W3C article linked above where many of the following definitions are borrowed from.

Demo

Code

  1. On the combobox container <div>, our <bc-content-filter> element:
  • role="combobox": This identifies the element as a combobox.
  • aria-haspopup="listbox": This indicates that the combobox is associated with a pop up list of suggested values.
  • aria-owns="jump-menu__results": This associates the combobox with the results container.
  • aria-expanded="true": This indicates that the associated results listbox popup element is displayed. Since in our case the list of results is always shown when the jump menu is shown, we don’t need to toggle this attribute. If it only appeared after some text was entered, we would need to toggle the attribute between this and aria-expanded="false".

2. On the text box <input>:

  • aria-autocomplete="list: Indicates that the autocomplete behavior of the string that’s entered is to suggest a list of possible values in a popup.
  • aria-labelledby="a-jump-menu__description": A sort of backup label for instructions on how to use the jump menu.
  • aria-controls="jump-menu__results": Points to the popup element that lists the suggested values.
  • Dynamic attribute: As up/down arrow keys or tab are used to navigate the list of results JavaScript is used to update the value of aria-activedescendant="IDREF" with the ID of the focused item.

3. A non-visible status <span> to communicate the number of results (e.g. “Home, 1 of 14”). Making it an aria live region with role=”status” and aria-live=”assertive” ensures that the screen reader will immediately speak any new text content that gets pushed into it. Just make sure the <span> is present in the DOM before pushing text into it, or it won’t work!

  • id=”a-jump-menu__status”
  • role=”status”: A type of aria live region used for conveying advisory information.
  • aria-live=”assertive”: This makes sure that when the selection changes, announcing it takes priority over anything else the screen reader might be saying.
  • Dynamic attribute: When the jump menu is first rendered we inject the name of the auto-selected first item in the list followed by the directions for using the widget (“Type to filter and use the up and down arrow keys to navigate this list of people, projects, and recently visited pages”). As you arrow/tab through the list of entries, we use a helper to update the contents of the span to again communicate the current selection, followed by your current location in the list, for example “Management team project – Match 2 of 3”.

4. Another hidden description <span>, referenced by aria-labelledby, provides a better description for how to use the jump menu than the visual placeholder:

  • id=”a-jump-menu__description”
  • Text content: “Type to filter and use the up and down arrow keys to navigate this list of people, projects, and recently visited pages”

5. On the listbox results container <div>:

  • id=”jump-menu__results”: Used as a reference by the combobox element.
  • role=”listbox”: Defines it as a container for the list of results.

6. On each <article> element in the list of results:

  • A unique id for each result in the list.
  • role=”option”: This defines the element as a listbox option.
  • Dynamic attribute: Using JavaScript we set aria-selected=”true” as you move through results. This correlates with when the item is referenced by aria-activedescendant on the <input>.

We also use some additional JavaScript to generate and set the “Match X of Y” status text:

https://gist.github.com/bergatron/71f0eac50c3a8b11d3d8715819c77c58


I hope this walkthrough was helpful! I would have loved to see more examples like this one as we were building the feature out. If you have any questions, please let us know!

Short time horizons keep it fresh

When do we do our best work? When we’re excited about something. Excitement morphs into motivation. We do our best work when we’re motivated. A great way to stay motivated is to work on something new. No one likes being stuck on a project that never seems to end.

The typical project

Long project waveform

The typical project starts out great but then our motivation and interest wanes as time goes on. It’s natural. Staying interested in a project over a long period of time is a challenge for anyone. The longer the project the thinner the tail. You’re not going to do your best work in the tail.

The ideal series of projects

Project series waveform

When you do a series of small projects, or break a single big project into smaller individual projects, you stand a better chance at maintaining motivation and rekindling interest. When you have a pile of tiny projects you get the chance to work on something new more often. We do our best work when we’re excited about starting something new. That’s why the bulk of our projects fit into cycles that last 6-weeks or less.


Credit for the waveform concept goes to Jim Coudal.

What’s New in Basecamp 3.9.3 for iOS

The newest release introduces a brand new tab along with improvements to searching, navigation, and for people who have multiple accounts. Get it for iPhone and iPad in the App Store today. Read-on for details about what’s new…

New Me tab!

We know that My Assignments is one of the most popular screens in Basecamp on all platforms but it can be hard to find. Now My Assignments and the rest of My Stuff are easier to reach on the new Me tab. It also includes your Bookmarks and app Settings.

Introducing the brand new Me tab, a place to find all your stuff and settings.

New Activity view switcher

Gone is the old Activity | Reports toggle. Basecamp now has a nice switcher to change between activity views more akin to web and mobile web. It’s easier to see what you’re currently looking at and you now stay on the same screen rather than navigating forward.

Tap the switcher at the top to choose a different activity view.

Before you search…

Looking for something in Basecamp? Pop on over to Find to see your Recently Visited places and Recent Searches, too. We hope that with this change, Basecamp helps surface what you might be looking for before you search.

Pick something recent (left) or search everywhere (right).

Better support for multiple accounts

If you have multiple Basecamp accounts, this one is for you. Now the name of the current account is prominently displayed at the top of Home and Hey. Tap it to switch to a different account.

Tap the account name to switch to another account (left). Pull-down slightly to reveal the project filter and view toggle.

Opening links

This is a small change but now when you tap an external link in Basecamp it’ll open with a Safari view right inside Basecamp rather than opening the Safari app. You may have seen this in Twitter and other popular apps already. Now it’s so much easier to get back to where you were in Basecamp when you’re done reading.

External links now open inside Basecamp with a SafariViewController.

Thanks for using Basecamp!

As always, please keep suggestions, feedback, and bug reports coming our way. If you’re interesting in seeing new features before everyone else, we have a few openings left in our private beta. Send us an email and we’ll get you invited.

❤️📱 The iOS Team at Basecamp, 
Tara Mann, Dylan Ginsburg, Zach Waugh, and me.

New in Basecamp: See where projects really stand with the Hill Chart

For years we’ve used Basecamp To-Dos to track all of our design and programming work here at Basecamp. They help us make sure that nothing slips through the cracks.

However, for some projects, tracking to-dos isn’t enough. When you have dozens or hundreds of tasks, you need a way to see the bigger picture. Is the project going to be done on time? Are we making progress on the right tasks? Which things need to be solved now and what can be deferred until later?

To solve this problem, we built an entirely new idea into Basecamp To-Dos. It’s a 10,000-foot view of our projects that answers the hard questions about where things really stand.

Introducing the Hill Chart.


Progress is not a number

“42% of the tasks are complete.” What does that tell you? Very little.

For creative work and software projects, you can’t describe progress with a number. Why not? Because tasks on a project aren’t all the same. If the team gets stuck or starts to run out of time, it matters which tasks are in that 42%. The strategy for getting unstuck depends on where you’re stuck.


More than that, we don’t actually know every task in advance. As we roll up our sleeves on a project, we discover more detailed tasks to track than we had in the beginning. A raw percentage count would show our progress going backward instead of forwards when that happens!

What we really want to know is where the work stands. Has the team figured out how to do it? Are there unknowns that will block us ahead? What’s solved and what’s still full of uncertainty?

Work is like a hill

We found a metaphor for talking about this at Basecamp. Every piece of work has two phases. First there’s an uphill phase where you figure out your approach. You have a basic idea about the task, but you haven’t figured out what the solution is going to look like or how to solve all the unknowns.

Then after you’ve explored what works and what doesn’t, you reach a point where there aren’t any unsolved problems anymore. That’s like standing at the top of the hill. You can see clearly all the way down the other side. Then the downhill phase is just about execution.


Work on the two sides of the hill is very different.

Uphill work is hard to estimate. You might go in circles searching for the right approach. And as long as unknowns remain, there’s risk. The programmer thinks it’ll be a quick change but the API is different than expected. Or the interaction design seemed like a quick fix but there’s no room for the button on the mobile version.

On the downhill side, the world is certain. You’ve solved the problems, figured out your approach, eliminated the unknowns. All that remains are steps of execution to finish the project.

A human data point

No calculation will tell you how many unknowns are on a to-do list. Or how hard the remaining problems are. That’s why we built a way for teams to communicate, in a human way, exactly how they feel about where the work stands from unknown to known using the metaphor of the hill.

Here’s a demo to show you how it works.

A Hill Chart from a real project

Each of our development projects in Basecamp is made of a set of To-Do Lists. We create a To-Do List for each piece of work that we can make progress on independently.


Now to track progress, we turn on Hill Chart tracking for each list. This will reveal a Hill Chart on the top of the To-Dos screen with a dot for the list we’re tracking.


We did this for three lists. Next we click Update on the Hill Chart and drag the dots for those lists into position.


Now anybody who checks on the project can see the status of these three lists. Two of them are over the hill — full of certainty, with just execution left. One is still on the uphill slope, which means there are unsolved problems or open questions.

Note how that the status is human generated, not computer generated. This reflects a real person’s feeling of the work at this moment. And because the status is attached to lists, not individual to-do items, we gain a higher-order perspective on all the work at once.

Hills make history

Every time someone updates the positions on the hill, a new snapshot is saved to the project’s history. This enables managers to immediately acquire a ton of context about what is moving on the project and what isn’t without peppering the team with questions. People on the team can optionally annotate each of their updates with commentary. You can even comment on or Boost someone else’s Hill Chart update. This enables a new level of fast, asynchronous communication about high-level progress on projects.


More well-defined work

Sometimes trying to position a list on the Hill Chart helps you to better structure the work. On a recent project we were building a feature to notify people when an Event in Basecamp was rescheduled.

This dot didn’t move for a few days.

That dot sat there for a few days without moving. Something was wrong. Why weren’t we making progress? After a short talk with the team, we realized that it was unclear where to place the dot because part of the work was fully figured out and part wasn’t. The back-end code to deliver the notification was fully solved. But there was some more design work relating to the emails and Hey! menu that we hadn’t figured out. So where should the dot go?

In a case like this, the hill is telling us to break up the list. We renamed the original list to “Notification: Delivery” and moved it over the hill to show where it really stood. Then we created two separate lists to track the front-end work that was still uphill.

Breaking up the work shows where it really stands

Redefining the To-Do Lists like this made it easier to see what was actually going on in the project and what needed to be done next.

Flexible, per-list setting

For each project, you can choose which To-Do Lists appear as dots on the Hill Chart. It’s a per-list setting, so you can still have regular To-Do Lists mixed in with your tracked lists. We usually keep a list called “Chowder” at the end a project for loose ends that don’t fit anywhere else, and we don’t plot that one on the hill.

From unknown to known, and known to done

Instead of counting tasks, the Hill Chart shows where the work really stands. From unknown on the far left, to known at the top, to done on the far right.

Since we adopted the Hill Chart internally at Basecamp, our teams have been communicating about progress at a level never before possible. Our intuitions are the same, but now we have a visual way to immediately show each other where the work stands. And because of the Hill Chart history, we don’t need to call meetings to catch up on a project’s status. It’s no longer a challenge to see what’s in motion and what’s stuck. We can have quick, substantial conversations asynchronously about where to focus next or how to break up a problem.

That’s the kind of thing Basecamp is supposed to do: make you more organized, give you more time, and put everybody on the same page.

We hope you can experience the same benefits we have by trying the Hill Chart on your next Basecamp 3 project. You can use the Hill Chart on any project today by navigating to a particular To-Do List and choosing “Track this on the Hill Chart” from the Options menu (•••) in the top-right corner.


New to Basecamp? Learn what it’s all about and start a 30-day free trial over at Basecamp.com.

New in Basecamp 3: Get notified when someone reschedules events & to-dos

Stay in the loop when dates change

Last month, we added to-dos to the redesigned Schedule Card in Basecamp 3. This made it much easier to see what’s coming up on your projects.

But dates slip — due dates are shifted, events get moved—and Basecamp didn’t make it easy to see changes to your schedule. Starting today, whenever a to-do you’re assigned or an event you’re participating in is rescheduled, we’ll tell you about it.

Here’s how it works

Before, you’d only receive a notification when you were added to an event in Basecamp 3. Now, you’ll see a separate notification if that event gets rescheduled to a different date or time:

An event as added and then rescheduled

To-dos work a similar way. You’ll see notifications whenever due dates are added or shifted on your assignments:

Due date added and Due date changed notifications

Who will receive these notifications?

At Basecamp, we’re not huge fans of interruptions. To keep the noise down, we’ll only send these notifications to:

  • People assigned to the to-do
  • The person who made the assignment
  • Event participants

Other subscribers will not be notified of date changes. That means you can comment on an event or to-do without being inundated with notifications.

What if I reschedule something multiple times?

In another effort to avoid notification overload, we’ve grouped things together:

  • Hey! Menu: Hey! notifications are bundled for each item, so you won’t see 3 separate entries if your manager rescheduled that to-do or event 3 times in rapid succession.
  • Emails: For folks who prefer email, we’ll aggregate to-do due date changes into a single message. So if a manager sets due dates for several tasks, you’ll receive just one email about it:

A single email for recent to-do due date changes

We hope this makes it easier to keep track of upcoming events and due dates in Basecamp 3. We’re working hard on more improvements in the coming weeks. Stay tuned!


Got feedback or ideas to share? We’d love to hear what you think about the new features. You can contact us on Twitter or share your thoughts via our Support form.

New in Basecamp 3: Decide who gets notified when completing a to-do

Elevating an invisible feature

To-dos in Basecamp are pretty straightforward. At a glance, you can see who’s responsible, when it’s due, and important details you might need to know:


Unfortunately, it’s never been clear who will get notified when you complete a to-do. That made it hard to pass the baton to a coworker or tap your manager on the shoulder when you’ve wrapped things up.

Sure, you could hack things together by @mentioning someone in the Notes field or by subscribing them to comments. But if you just want to be sure someone knows when you’re done, you shouldn’t have to jump through hacky hoops to do it.

Say goodbye to hacks

Now, when you make a to-do in Basecamp, you’ll see a new field labeled When done, notify. Add people you want to notify when the to-do is completed and Basecamp will be sure to tell them about it:


Wondering who will get notified about a task you didn’t create? It’s all spelled out at the top of every to-do:


Basecamp will still send notifications to the original assigner and to everyone who’s left a comment about the to-do. But if you’ve ever wanted to hand work off to a colleague or keep someone else in the loop about a task, now you can be absolutely sure they’ll get the memo.

That’s it for now. We’ve got more great ideas in the hopper, so stay tuned. In the meantime, happy to-do’ing!


Got feedback or ideas to share? We’d love to hear what you think about the new features. You can contact us on Twitter or share your thoughts via our Support form.

Hard first or easy first?

Accountants have FIFO (first in first out) and LIFO (last in first out). Product designers have HFEL (hard first easy later) or EFHL (easy first hard later).

No matter the project, there are things you’re more confident about and things you’re less confident about. No brainers, maybe brainers, yes brainers. Assuming you have limited time to complete a project (we spend a maximum of 6 weeks on most projects), you have to decide how to sequence the work. Do you pick off the hard stuff first? Easy stuff first? What to do?

It depends, of course. I don’t have any answers for you, but I can share some of the things we think about when deciding what to do when.

First we get our bearings.

Does this feel like a full project? Is it probably going to take all the time we have? Lots of moving parts? Does this work touch a lot of other things, or is it mostly self-contained? Do we feel like we’ve mostly got it down, or are there some material unknowns we haven’t quite nailed down yet?

If it feels big, and full, and challenging with some significant unknowns, we almost always start with the hard stuff first. The worst thing you can do in that situation is kick big challenges down the road because you’ll inevitably run out of time. You’ll either make bad big decisions that way, or you’ll push the schedule out, or you’ll work late or work weekends. All those are big no-no’s for us, so we tackle the hard stuff first.

Sometimes we start with a quick spike. We put a few days into it and see if we’re able to make any meaningful forward process. That’ll reveal if the problem is really as big as we think it is, or we’ve been overestimating the shadow of worry its been casting. But waiting until later isn’t an option. We chip away at the big rock to see if it’s sandstone that’ll break down easy, or granite that’ll require heavy machinery.

Once we have a sense of where we’re at, we think about what we need, as a team. I don’t mean what does the team need as far as tooling or technology goes, but what do we need emotionally? Do we want to slog along without any short-term visible progress, or can we grab a quick win and start to pick up some momentum? It depends — how did the last project go? Are we coming off a high or a low? If a low, maybe we should find some quicker wins to fuel the spirit. If a win, maybe we’re already feeling good enough about ourselves to go heads down without anything material to show for a few more days. The past plays a surprisingly important role in the present.

We’re currently working on some significant improvements to the way our customers work with their clients in Basecamp 3. It’s a big project, and we’ll likely be working on it over two 6-week cycles. There are unknowns — both technical and visual — but the last time we tried to tackle this problem we ended up putting a lot of work in with nothing to show in the end. We didn’t ship what we built because we 1. didn’t finish on time, and 2. didn’t feel great about what we built, and 3. didn’t want to put more time into a bad time. Therefore, this time, we ran easy and hard in parallel. The programmers worked on a hard problem first, and the designers worked on an easy one. It was a nice way pour the concrete foundation and choose the paint colors at the same time.

On the design side of things, we often try to stay away from the details early. Details can turn into quicksand. We never want to get stuck on something early on — that’s a surefire way to burn too much time on something that’s going to change later anyway. Never ever get stuck on something you just know you’re going to change later. So when we start a design project, we typically go from very big to very small. It’s a bit different from choosing hard first or easy first, but it’s still a choice. We still have to decide where to begin.

One other thing I wanted to add, but don’t know where to put: We aim to avoid feeling like we have something to prove. That’s hero language, and we don’t do hero. We do work. We have work to do. Big and small — we’re satisfied by doing good work and getting it done in the time we give ourselves up front. Heros are only satisfied by rescuing things, doing the impossible, or saving the world. We’ll leave those antics to teams that run on fumes. We’ll run on a good night’s sleep.


I wrote this essay without reading it back — a stream of consciousness burst. I’ve had a bit of writer’s block this week, so I’m trying to bust through by just writing raw thoughts and getting my fingers moving again. I hope it was helpful. Any questions?

The Basecamp 3 refresh is here!

Last month, we shared a sneak peek at some major design improvements we’ve been cooking up for Basecamp 3. Today’s the day — you’ll see those changes in your Basecamp account right now!

There are countless little tweaks and improvements throughout the entire app, but here’s quick recap of the most important new stuff.

High-level Changes

The examples we showed in the preview still stand: improved navigation, colors, and typography, better use of space on desktop screens, and more consistent placement for buttons, headers, and menus. These changes apply everywhere.



A few examples: Message Board, To-dos, and Docs & Files

New Comments Design

Comments got a big upgrade. We wanted to give comments their own identity and charm, while reducing the metadata noise that had built up around the actual writing. They’re friendly and easier to read, too.

Comments get a big bold header, simple shapes, and an all-around cleanup.

New Options Menus

There’s a slick new design for the ••• options menus that appear on every page. We consolidated all page options into these menus, so now there’s just one consistent home for all the actions you can take, rather than having various buttons and links scattered in several different places. Note: Edit and Bookmark have been moved in here too.


New Breadcrumbs Shortcuts

We built on the breadcrumbs navigation in a couple ways.

First, there’s a new and improved quick-jump button, so you can easily hop between any of the tools in a project. (The project’s name used to to pop up this menu, but now the name is a simple link, just like the rest.)

Second, now you can click anywhere on the white “back sheet” to go back up one level—or click it multiple times to go back multiple levels.

Click the four-squares button to get the jump menu shortcut, and click the backsheet to go up one or more levels.

Unified Buttons and Themes

Buttons got a lovely facelift (they’re all round now) and they’ve been themed to match whatever custom color theme you’ve picked. We also sprinkled the theme color on a variety of other elements.

The red theme.

Tidier Message Composing

Posting a message in Basecamp is an important moment, and it should feel GOOD. We simplified the message categories picker, cleaned up the new-message screen, and gave you more space to breathe—and write.

Ahhh, sweet sweet space.

Updated Design for Clientside

If you use Clientside, you’ll notice a few changes. Now there’s a big button at the top of the project to access the Clientside (this replaces the old tabs). The Clientside is now on a white sheet, and message threads are updated too.



New Clientside design

Plus…So…Much…Other…Stuff…

Those are just the biggest changes. There’s a lot more than we can list here—so go forth and explore it!

We’re just getting started

We think the refreshed Basecamp 3 is more cohesive, modern, and sophisticated, but still friendly and familiar too. We hope you enjoy the changes as much as we do.

And this is only the beginning. These updates set the stage for a ton of additional improvements we’re planning to make, so keep an eye out for those coming soon. It’s gonna be a great 2018.

Thanks and much ❤️ from all of us at Basecamp!

Previewing the Basecamp 3 refresh

We’re close to finishing up a refresh of the Basecamp 3 interface on web and desktop. We’re planning on launching it in the next few weeks, so we wanted to give you a thorough preview before it shows up in a browser near you.

First, why?

A combination of reasons, really. One, we have some new ideas that we didn’t have when we launched Basecamp 3 a few years ago. Now feels like a good time to modernize. Two, we have some cleaning up to do. We’ve updated the product hundreds of times over the last few years, and we’ve introduced some inconsistencies and rough edges. Time to pause, clean it up, and set the stage for the next few years. And three, we think this new design makes Basecamp more enjoyable to use, and far more approachable for new customers. It was a heck of a lot of fun to do, too!

Further, we’ve always believed in following the same pattern car manufactures follow. Major model updates every few years, and mid-cycle refreshes about half way into a model cycle. Basecamp Classic (February 2004), Basecamp 2 (March 2012), and Basecamp 3 (November 2015) are our major model updates (entirely new code under the hood, entirely new designs, etc), and the Basecamp 3 refresh like the one we’re about to launch in early 2018 is equivalent to a mid-cycle refresh in the car world.

Lastly, we approached this as a refresh, not a redesign. We wanted to update navigation, page layout, typography, buttons, placement, and proportions, while still retaining a familiar Basecamp 3 feel. A freshening up, not a flushing out. We know our customers are in the middle of important work, and they rely on Basecamp to help them manage the load, so we wanted to tread confidently, but change carefully.

Let’s take a look at some screens

Messages

First let’s look at the screen that shows all the posts on the message board inside a specific project or team. The new design is wider, bolder, and more confident. Fewer floating objects, stronger left margin so text all starts from the same place, stronger callout of comment count in big blue circles, less dead space at the top of the screen, more messages visible without scrolling, etc. Before on the left, after on the right.


← BEFORE | AFTER →

And now let’s compare what an actual message board post looks like. Here you’ll see a tighter layout, fewer intersecting and overlapping shapes, stronger masthead, better type, reorganized metadata, and overall better use of space. It just feels a whole lot more confidence inspiring, which is important when making company-wide announcements using the message board.


← BEFORE | AFTER →

Automatic Check-ins

Automatic Check-ins are of the most popular features in Basecamp 3, and they’re getting a well-deserved overhaul.

Let’s look at the check-in page itself. Here’s an example from “What did you work on yesterday?”. The previous design is on the left, the new design is on the right. We’ve cleaned up the top quite a bit, and replaced an “Add your answer” button with a field you can just type directly into. We’ve tucked some infrequently used subscription options into the ••• menu, vs. having them messily exposed. And you’ll also see a hint of the new answers/comment design — individual comments are now encased in a light grey shape to hold them together and separate them from everything else on the screen.


← BEFORE | AFTER →

Schedules

We’ve tweaked the schedules design as well. While it inherits the new header design you’ve seen elsewhere, we’ve replaced an ambiguous “Subscribe” button with a clearer, front-and-center “Add this schedule to your Google Calendar, Outlook, or iCal…” link. Further, we’ve tightened up the header, and given things a bit more room to breathe, so the screen just feels more solid, less floaty. Before’s on the left, after’s on the right.


← BEFORE | AFTER →

Project/Team home screens

We’ve put everything on a white sheet, vs directly on the background. It helps eliminate awkward negative gaps, shapes, and alignment, and it just tidies things up considerably. The page feels more sure of itself, and better organized overall.


← BEFORE | AFTER →

Docs & Files

Docs & Files also get a white sheet, a new masthead, a general clean up, and the new look:

Organized w/ folders

Navigation and background

You’ll see in the screenshots above, that we’ve lightened up the background. Less beige, less yellow. It’s paler, but still a trademark warm tone. We want Basecamp to feel comfortable and cozy, not cold and clinical like so much software out there.

We’ve also placed the navigation straight on the background, vs. in a strip. This cleans things up and emphases the content below rather than the navigation above. Further, we’ve added a “backsheet” behind the breadcrumb which further emphasizes hierarchy and adds some structure.

Before:


After:


“New” buttons are also all in the same place now. The current design has them centered and big in some places, while small and top left in other places. Now they’re always top left on the same line as the headline like this:



Overarching themes

While this remains a work in progress, and the final product may look a bit different from the previews you see here, the gist will be the same. We aimed to make the interface and user experience more consistent and predictable, the text more readable, and the hierarchy clearer and more intuitive. Further we tweaked the typeface, sizing, spacing, and proportions to make everything feel more comfortable, and removed a bunch of fussiness from the design. Overall, we feel great about where we’re headed here, and we’re eager to share the final version with everyone soon.

Thanks for following along, and thanks for all the feedback along the way. We’ve built plenty of it into the redesign.

All the best,

— The team at Basecamp

The presence prison

Are you chained to the green dot? Turn it off and break free.

As a general rule, nobody at Basecamp really knows where anyone else is at any given moment. Are they working? Dunno. Are they taking a break? Dunno. Are they at lunch? Dunno. Are they picking up their kid from school? Dunno. Don’t care.

The vast majority of the time, it just doesn’t matter. What matters is letting people design their own schedule around when they can do their best work.

Keep reading