Two Weeks: Two Redesigns (BatchBook & BatchBlue.com)

As a designer, I probably should be writing more here about the design I’ve been doing. Well, it’s time to give you an update.

BatchBook Redesign

A week and a half ago, I announced over at the BatchBlue Blog that we finished a redesign of BatchBook, our small business CRM.

Here’s how it looks:

BatchBook: Contact Detail

In the blog post, I talked about the main goals of the redesign, such as a better use of space, lightening up the design, making the app faster, and setting up for some more future improvements.

The redesign was an incredibly fun process, with the majority of the redesign happening over five days. The rest was just tweaks, special cases, and browser compatibility stuff. The first step when I started redesigning was to DELETE. I deleted a LOT of code.

I love CSS, but I’ve always tended to be a play-it-safe kind of guy. I use simple styles that won’t run into cross-browser issues and tend to stick with what works. Well, this was an opportunity to try some new things. First came the buttons.

The buttons use CSS sprites. So, I have one file called buttons.png (a nice 32-bit transparent png) that contains every button in the app. All buttons in the application call that same file (but since it’s already cached, it’s much faster!) and then only show a part of the image (as defined with background-position).

I ran into some issues and learned a decent amount while playing with the buttons. Here are some takeaways:

Another favorite part of this redesign was preporation for allowing user skinning. I went through the styles and commented what colors would be user definable. I set those up in a separate override style sheet. We haven’t hooked up the feature yet, but just playing with it locally has me very excited about allowing people to conform the product to their company color scheme.

If you haven’t checked out the slideshow of the redesign on Flickr, please take a look. I’d love to hear what you think!

BatchBlue.com Redesign

Instead of taking a rest after a major redesign, I embarked on another. This one wasn’t quite as big—and it also isn’t completely done yet. But on Sunday afternoon (right after we hit Mashable), we launched the redesign of BatchBlue.com.

BatchBlue.com Homepage Redesign

We ran the old design through some user testing—both via Twitter and in person. We noticed some trends emerge and worked quickly to fix them. A lot changed, but here are the highlights:

A lot of other things changed inside the app, but all the really cool stuff is on the home page. We, of course, have more updates coming up that I can’t wait to talk about.

So, that’s it! That’s what I’ve been up to! I’d love to hear your feedback.

2 Comments

  1. On October 14th, 2008 at 1:36 am Matt Gillooly said:

    Both designs, in my humble opinion, are vast improvements. Awesome job, Adam!

  2. On October 17th, 2008 at 11:58 am Sara Streeter said:

    Thanks for the heads up on CSS Sprites – and great job with the redesign!