Overhauling Balsamiq.com

This week we quietly relaunched balsamiq.com, overhauling and re-tuning the site to align with our new priorities as a growing company. On the surface it may not seem like a huge effort, but it was challenging.

I'll run down the goals of this project, and talk through some of the steps we took to make it happen, in the interest of sharing what we learned.

Defining the Project Goals

When I came on board, Peldi expressed the need to look at the web site and learn how we can help make it easier for our customers to accomplish a few key tasks. Peldi's blog talks a bit about how we're slowly growing the company, and over the last two years as the site has grown both deep and wide, finding things has become harder.

Our high-level goals were to focus on information architecture and findability, with a little effort to smooth out rough edges. From the top, here were the priorities we thought the new site needed to focus on:

For Current Customers
  • Make the update process simpler and the badge/button easier to find
  • Provide clear paths to support materials, e.g. documentation, updates
  • Simplify the site navigation and reduce verbose copy on very long pages
  • Make the documentation navigable
For Prospective Customers
  • Introduce customers to the company and reassure them of our mission--we compete on usability and customer service
  • Provide clear, no hassle path to try the product right now
  • Cut redundant content, get to the point about what our products are
  • Provide clear call to action--aka make the button bigger and redder ;)
  • Simplify the buy process
For Us
  • Tell the story of our growing family
  • Make it easier to maintain content
  • Centralize frequently used elements
  • Emphasize the voice established by Peldi and bring in the entire family

Planning Our Design

Overhauling is the right word to describe what we did here. If you've ever had a car or bicycle overhauled you know that it's a process of systematically taking something apart to examine it, look for things that need repair, and putting it back together so that it runs as good as new or better. That's what I had in mind for us to do.

I started, as many of us do, doing both top down and bottom up activities to define the problems. The top down was defining the goals and planning the navigation to suit. The bottom up was the nitty gritty of taking inventory of the original site. The goal was to get an idea of what content and services we were providing and see what entry points we provide.

The screen below shows my initial content inventory and a flow chart Peldi did for the new single Buy page.

Before the content inventory, I also started observing the points of pain by talking to customers. I started doing customer support with Balsamiq on day 1. This was and continues to be the biggest factor in helping me understand what we need to improve with the Balsamiq user experience. I learned about what blocked people at the point of purchase, getting software updated, and getting help or requesting features using the product daily.

In the first few months, we handled some of the quick fixes. We had issues with people finding out how to update the software, so we provided a simple link in the app, and a download link in the site header. We did that immediately. The next phase was tackling the bigger usability issues, e.g. providing an information architecture that suited customer needs better, and providing a cleaner purchase experience. We built an outline of a new IA and started mocking up.

Finding Our Story

The next step, and the hardest for me, is finding the right design. Being a design director is perhaps similar to being director of a film. Given a premise and story, you set out to develop the vision for how the story will be portrayed, you gather the actors and crew and creative team, and you provide the schematics for execution. That's a simplified analogy, of course.

All the practical work of serving needs being hashed out, we had to find a way to respect the history and personality of the original site and make it represent the new us, now that we were company of 6 (+2). On our small scale, it meant meeting with the entire company on our retreat and learning what our story was, talking with everyone to develop a concept that depicted that story, and then telling it with this site.

There were things I didn't want to change about the original site because they represented a key element about why I wanted to be a part of this small company. The thing that I found to be pretty awesome about Peldi's design of Balsamiq.com was the voice. You can still see it in the informal screencasts Peldi does. It's like he's actually sitting next to you showing you the software. Some may find the quality of the recording rough, but I like it because it's natural and friendly, and keeping that informal delivery means we can be ourselves and do screencasts more frequently and directly. That's the way we do support--we engage people directly and try to be as approachable as possible. That voice carries through the site, and wanted to be sure that we retained it.

I wanted to focus on this idea of the company as a corner bistro--like a small family restaurant. I was introduced to this idea of the "little Italian restaurant on the web" after reading an interview with Peldi on 37signals. The idea came from David Heinemeier Hansson, who refers to this idea of being the little business you returned to because you know the owners, and you prefer the quality of what they produce. That's what kind of set the tone for how to write the copy to reflect the new us that was still part of the voice that Peldi brought to the site originally.

If I were a journalist, this would be like researching a story and finding and writing the lede. The lede sets the tone for the rest of the article.

I focussed on 2 stories that I wanted to set the tone for the site:

1. The first story is about the company.

Peldi emphasized that we should communicate as much about who we were and what we stood for as it did about the product. I didn't get that immediately, but I see the value in making that a priority. There were a few messages about the company that I wanted to communicate and they're sprinkled throughout. The first bit is sort of a mission. We compete on usability and customer service. We're essentially a small company that cares about what we do, and who we serve.

This lead to the message on the front page, "Balsamiq is a small group of passionate individuals who believe work should be fun and that life is too short for bad software." On the company page we tell the story a little more deeply.

This story also lead to us using customer quotes and testimonials liberally throughout the site. We exist because of our customers--people who want to use our software and work with us to improve it--and we want to acknowledge that the continued success depends on that relationship, and we'll do everything we can to nurture it.

2. The second story is about the product.

The story about Mockups is very simple actually. It's made for frictionless ideation and iteration that everyone can participate in, and the low-fidelity sketch-style wireframes they produce keep you focussed on functionality. There's a secondary story that will be told with myBalsamiq, but the first two points are the main ones to communicate, and we wanted to do that with a few sketch-note style graphics, and to continue to use our simple screencast and web demo. I think this is communicated efficiently on the home page, and slightly more in depth on the product pages, where we preview screenshots and sample deliverables.

Mocking up Screens

The biggest factor in helping us get our ideas out, and selecting and refining them, is that we used myBalsamiq, our web version of Mockups that's in beta, to iterate on wireframes. We created mockups, commented on each version, and Peldi and I iterated in the app.

The screen below shows the Balsamiq.com project in myBalsamiq, with all the versioned artifacts of our planning and design process.

We do iterations fast, we keep the wireframes simple, and get far enough to find the right solution that we agree on. From there I could start working on building the real thing. We only modeled a few pages before going on to design.

One cool thing about using myBalsamiq is that we are also able to figure out which features we need in the app and can work designing those to help our process. One of those ideas, for example is creating mockup revisions based on what came out of comments and finding way to develop a feature around that.

Visual Design

With wireframes in place, it was time to start on visual design. With our IA and priorities in mind, I started sketching some concepts. Those are the sketches you see on the bottom left. Then I reflected on the company retreat we had, I started to get a pretty good idea of what I wanted to convey visually.

The stories above are really what helped me find a concept for the visual design. I don't consider myself a visual designer as much as I do an interface designer, but I think I represented this idea of who we were as a company.

From these sketches I began to explore some visual concepts in Photoshop and created visual design comprehensives. I needed a way to share the visual design comps I was working on so that we could critique and review those and I could continue to refine them with feedback. I used the image component in Mockups to post comps that we reviewed in myBalsamiq.

Below are comps for the home page and company page at different points in our design review.

View full size: Home Page Comp or Company Page Comp

Several iterations later and we had agreement on the visual design concept. I got to work developing the site.

WordPress as a CMS

We decided to use WordPress to settle on a single system to publish both our static content on the main site and our blogs. We really didn't have too much content to migrate on the main site, but what we did have, were a lot of Drupal nodes that needed some cleaner HTML and layout and typography stylesheets that we could evolve over time. We chose to host our own WordPress for the main site, and run our blogs on WP Engine.

For the main site we're creating pages with parent-child relationships to create the navigation. We have some custom PHP in our templates to handle the global and local navigation. We're relying on SuperCache to serve cached content and WP Minify to compress scripts and stylesheets. There aren't major modifications that we made to WordPress, besides using custom fields to handle discrete modules of content and output them into different areas of our templates.

We also use the BluePrint CSS Framework for layout, and TypeKit for rendering headings in Myriad Pro, our house font. We discovered, as many people seem to have, that a bug in pre-iOS 4 Safari (e.g. iPads) crashes that browser when serving multiple font weights and styles. That's one issue I am still looking for a resolution for. TypeKit is awesome, otherwise.

We did need to tune our server a little. We had a nice spike in traffic when Hacker News picked up our relaunch. Luis, with the usual quick response from Slicehost (thanks, guys!) helped get us get configured perfectly for our needs.

WP Engine for WordPress Blogs

Migrating WordPress blogs to WP Engine was a simple decision for us. The guys at WP Engine are awesome, and they had a solution for multi-site WordPress hosting that took the hassle out of us having to keep WP up to date. Takes the worry out of handling traffic and performance issues on our main server, they can serve all of our images from a CDN, and provide support for keeping the blogs up and running, so we can focus on just communicating and working on our product. They even helped us figure out some of the issues we caused with our 301 redirects that were interfering with image rendering. Good stuff.

Testing and Checking Copy

I took most of the existing copy on the old site, and copyedited it to fit with the new combined founder and company voice. I then created some copy in other parts that were consistent with this. Peldi did several rounds of copyediting from there and we iterated on some pages to fit and for voice.

The rest of the company then joined in and started testing the site and began recording issues and providing feedback in PivotalTracker, the agile project management tool we use. Our reviews uncovered parts of pages where the calls to action could be clearer and more visible, so we did a few more iterations on those pages that could be improved. With the pieces in place, we launched.

What's Next?

The last bit of the process has been fixing the problems that inevitably crop up post-launch. There are only small issues to deal with now. The continued reports from our users are helping us find the issues. Thanks, as always, to our awesome customers for helping us out!

That's the somewhat long story of Balsamiq.com's new face. I hope you like this aspect of our site's evolution, and most importantly that you find things easier, and that the user experience is better. There are more improvements on my list that can come later. I'm working on how to improve our onboarding experience with each category of product purchase, and as always, will continue to look for things that we can improve by listening for feedback in the forums. I look forward to hearing how we can make Balsamiq better for you!

Comments (10)

  1. Hi Mike,
    really thank you for having shared your workflow on the redesign, it’s really helpful to improve mine.

    About myBalsamiq, I’m experiencing – with my team – the same collaboration problems you found. We are a nascent Startup and we can’t purchase Balsamiq Desktop each one, so the team members have the only way to comment my mockups on BaseCamp, with the obvious problems that this causes (mainly the fact that I’m the only one to edit the mockups, and that the others can’t really have a role in this, comments excluded).
    It seems that myBalsamiq solves this problem, making my team members able to interact with the mockups without having to purchase Balsamiq Desktop. Is this right, or I’m wrong?
    I would like to use Balsamiq Mockups for managing our features map (positioning the features in terms of importance/development time), making my collaborators able to add new features or to move the yellow stickers in the space. Will this all be possible using myBalsamiq?

    Thank you in advance,
    Andrea Giannangelo

  2. Pingback: Weekly Round Up: 17th October 2010 |

  3. Great post, Mike! As I mentioned before, you did a great job with the site and I can now see how deliberate you were about ensuring that the Balsamiq look and feel was represented in the new design.

    It’s also eye-opening to see how well thought out everything was before the jumping into Photoshop to start on the visual design. I’m probably a couple of months away to doing a light refresh of the design on my marketing site and this will be a great reference for me when I start that effort.

  4. You’ve done a great job, Mike. I especially like the IA and tone you have set in the Company section. The changes make Balsamiq feel more grown up.

  5. Andrea, yes, with myBalsamiq your team members will be able to edit mockups, and we’re working on a release where they will also be able to propose alternatives to the current mockup which can then be approved to replace the latest version–sort of like version control and branching for mockups.

    Thanks, Ruben and Jamie!

  6. Hi Mike, thank you for the answer. That’s really what I would need!
    Is there a free slot for the beta version of myBalsamiq?
    I live in Bologna and I’m building my startup here (it’s http://www.iubenda.com). This could be a good reason :P

    Andrea

  7. Andrea, forward your email address to peldi@balsamiq.com and he’ll put you on the sign up list.

  8. Hi Mike,
    How was this mockup/sketch created? Using the web based or desktop? Looks more like hand drawn

    http://balsamiqmu.wpengine.netdna-cdn.com/ux/files/2010/10/sketch-full.png

  9. NJ, those are iterations on sketches I did on the iPad using SketchBook Pro before working in Mockups.

  10. Pingback: Friday Links « The Fight Sequence

Leave a Comment

Your email is never published nor shared.