Basecamp Account Screen

Exploring the Basecamp Account (Upgrade/Billing) screen

By Jason Zimdars, designer at 37signals

One of the first projects for me as a new designer at 37signals is to take a fresh look at a series of features and screens in the company's applications. These individual pieces are ones that we know can be better but haven't made it onto anyone's plate yet. Much like the Highrise Contacts exploration I did a couple of months ago, I'll be looking at each piece intensively for a short period of time with the aim of improving and refining the experience. And also like the Highrise piece, I'll be carefully documenting the process, including the directions that didn't quite work. So stay tuned for more like this in the coming weeks.

This first design was the Account (Upgrade/Billing) screen in Basecamp. It's the tab where Basecamp account owners can upgrade their subscription plan and change a few other account-level settings. This screen was one that, according to Jason and Ryan, hadn't been touched practically since Basecamp launched in 2004.

The problem

The biggest problem with the original screen was that it was too difficult for customers to easily see their upgrade options and make a decision. We feel like most users visit this screen when they need to make a decision about upgrading due to a specific pain point. For example, they might have reached a limit of their current plan e.g., reached the maximum number of projects or used up their available file storage.

  • Original Screen

The account chart did a good job of showing the current plan and evenly compared the specific numbers for each plan level, but in being even-handed it was also complex. It required customers to understand and evaluate too many options. Jason described it as a "math problem". I had a similar experience awhile back when I signed-up for a Highrise account. I stared at the plan chart for several minutes trying to figure out where the must-have feature dropped off and how much I had to spend to get it. Unlike a customer who is signing-up for the first time, we felt like one who is considering an upgrade really needs to focus on the next plan up. They need to see how it compares to what they have and if it eases the pain that led them to seek an upgrade. So that's where I began.

The upgrade offer

I started in Adobe Photoshop iterating quickly through several variations. The first comps focused on more effectively showing the current plan and the current usage versus the plan limits. I also tried a few ways to limit the number of choices to just the next plan up and the Max plan. We wanted to consider the type of customer who just naturally wants the best or highest. Keeping the Max plan visible also seemed to provide some context allowing the customer to compare what they have versus what is ultimately the ceiling of the application. I liked the general look of these, but they really didn't solve the burden on the customer to process so many numbers to figure it out.

  • Concept 4
  • Concept 4e

The next solution explored an idea Jason had to pull the current and a suggested upgrade plan out of the chart and feature them all by themselves. It is interesting, in retrospect, that several key visual elements from this comp actually made it into the final version despite my going down several other paths.

  • Concept 5

This next comp was a breakthrough. From an information and layout standpoint it was pretty close to the final piece. Here the relationship between the current plan and the recommended upgrade was visually clear. It was easy to spot the differences between the two and for the customer to understand what they should do here. All five plans were now back in the chart below for the customer who really does want to compare numbers. And the concept of showing current usage was back in this new header area at the top of the screen. But it wasn't without it's problems. For one, it wasn't very appealing from a visual standpoint. Plus it just didn't feel right with the graphic style of Basecamp.

  • Concept 6

I wasn't willing to let go of the concept of showing the suggested upgrade and the Max plan, so that idea made one more appearance in this format. However, it just added more unnecessary complexity.

  • Concept 6a

The next few comps show some additional iterations that refined the look of the screen and improved the visual hierarchy. A particular emphasis was placed on showing the current plan as the status quo, and the upgraded plan as new, improved, shiny, better. I also wanted the upgrade offer to stand out more and let the full account chart fade back a bit. At this stage the goal is to really polish the concept into something ready for production.

  • Concept 7
  • Concept 7a
  • Concept 8

Web 2.oh-no

Part of really exploring a concept is taking things too far. These concepts succeeded in being slick and attractive, but didn't feel at all like Basecamp.

  • Concept 9
  • Concept 10b

And finally…

The final design simplified the presentation further. This was the strongest upgrade arrow yet, and the careful use of subtle gradients and shadows really help emphasize the suggested upgrade. It's dead-simple for the customer to know what to do here and what they get by upgrading. A few handwritten elements add some charm and visual interest to round it out.

  • Final design

Make it so

While this project started off as simply an exploration, we decided late in the week that it was something that could be implemented pretty quickly and might offer some positive, measurable results in our upgrade activity. If you're a Basecamp account owner, you can see it in action by clicking the "Account(Upgrade/Billing)" tab when logged into your account.

In the end, we're happy with how this turned out. It makes an important part of Basecamp better and we think it will result in more upgrades and a clearer upgrade process for our customers. We'll be watching the numbers and, if we can, report back on the actual results down the line.