Archive for the ‘Design’ Category

From Snooze to Spotlight: How We Improved Our Marketing Flyers for a Big Conference

October 9th, 2012 by Deborah Kim

Brochures can be boring. They can be a total snooze factory, especially if they’re crammed with big empty words.

But if done right, brochures show you what’s important — fast — and then win you over. Or, at the very least, you’ll wanna find out more.

With that in mind, we wanted to refresh our old flyer before Dreamforce. (Read about our DF experience.)

Here’s what we had before:

The format is pretty simple. We’ve got five essential parts: (1) our logo, (2) a summary, (3) key features, (4) customer love, and (5) contact info.

But the flyer looks a bit… erm… generic. It’s one long, cluttered column full of small text. Our branded logo is left-and-center, but it kinda blends in with all the blues and greys. Nothing stands out too much — it’s not visually intriguing.

Also, the call-to-action is muddled. It’s not immediately clear what the reader should do. “Look for us” is hidden at the bottom of the page.

And let’s be real: no one will read your ad copy as lovingly and tenderly as you. We’re all skimmers (especially when we’re wary of sales pitches). The longer something is, the more likely you’ll skim it.

So, we realized we needed a change. Effective design is a process, after all.

We decided on some goals for the new flyers:

  • Trim the word count
  • Add variety to the layout
  • Emphasize the call-to-action
  • Add graphics
  • Make it pop (with a little color)

Then I did a quick mock-up with Google Drawings, since it’s easy to rearrange elements there:

It was certainly more interesting with the colorful blocks, but there was too much color!

Feedback from the team: Too many bits and pieces. No one will read all the text.


So I cut down the elements and moved the form examples to the left. The pricing was also bumped to the bottom, where it’d be noticeable and useful.

It looked much cleaner laid out with the three columns and the rows.

Feedback: Separate the form examples from the key benefits, since they don’t really fit.


I decided to use Google Docs for this one, because it’s easier to work with text, and because I didn’t have to rearrange stuff at this point.

Feedback: Looks good. Let’s move to a ready-to-print file.


Xin, our UI/Graphic Designer, whipped this up in Adobe Illustrator.


  • The greys feel a bit cold. The icons, too. What about different colors?
  • “Quickly Create” box might look better with rounded corners.
  • Summary at the top isn’t big enough. Needs more white space around it.
  • Bottom bar feels unbalanced. Can we even it out?


White space, check. More friendly colors, check. Large call-to-action, check. There’s balance and harmony here. It’s much more clear what benefits FormAssembly offers, with much less effort on the reader’s part.


Have something to add?

We’d love to know! Toss it into the comment box right there. ↓

Behind the Scenes: Website Redesign

August 22nd, 2012 by Deborah Kim


Ye Olde Veer West

Here’s our old website, originally designed in 2006, when we were just a fledgling company! The layout got pretty dusty. It didn’t have a particular style, and it was mostly text, so it was basic and kinda ordinary. We needed a change. We needed to be more “us” — to showcase our team style and ethos right off the bat.

Our Goals

  1. Make very clear that we’re the company behind FormAssembly. The old site also featured a few open-source projects and a time-tracker app, and this time, FormAssembly was the only product we wanted to highlight.
  2. The website is our personal space. We’ll post corporate-y things like job openings, but also fun stuff about our company, which wouldn’t belong on the FormAssembly website.

Draft 1

My first idea was a clean, minimal look with a limited palette. The website would show screenshots of FormAssembly on computer and tablet screens, so our service would be front-and-center.

And it was time for a new logo. The old one was powder blue, with a curly wave. If I used it, I’d be restrained to the color and style, meaning the whole layout would have to match. So I tossed it, but kept the typography. The new logo is black and white, sleek and simple, so it could go with almost anything.


But the layout looked more like a product website, not a company website. And it didn’t fit FormAssembly’s design, either. It felt a little cold and empty. Nope, not us!

Draft 2

I had another idea — we could use the sky, land, and sea. Instead of being empty, it would feel open and warm, with birds and trees and fish. But how would we make it meaningful? I thought about what “Veer West” means, in the literal sense. “A sudden change of direction.” To veer, to turn, to sail.

Naturally, I thought of pirates.



Building the Ship

The new logo went well with the sloping hills and the arcs of the clouds. From there, I brainstormed a flurry of sea creatures and a bright, plucky pirate ship. The team suggested ancient maps and treasure chests and a shipwreck. I wanted to try as many elements as possible, so I kept drawing. We even had pirate hats!


Rethinking a Pirate’s Life

I began to have second thoughts about the pirate-y atmosphere, though. Pirates could be fun, but pirates were also… mean, to put it mildly. In our little website world, what would happen once our ship hit land? Did we really want to represent ourselves as wild seafarin’ criminals?

The Veer West Life

So our team discussed a new direction that was less combat and plunder. We wanted the website to be a place to unwind, a place apart from work. The keyword was relax. Think breezy, think vacation. I got rid of all the pirate stuff and switched gears. I swapped the pirate ship for a friendly sailboat, a better reflection of Veer West. Out with the hats and gold, in with the flip-flops and bubbly drinks.



Cleanup on Aisle VW

But the layout quickly became way too busy. There were a ton of things vying for attention — the hot air balloons, the “Click Here,” the web form in the sky, the neon-green octopus. Too much colorful chaos. Not exactly peaceful or calming. I needed to do some serious trimming, even though I’d given these little graphics a lot of TLC.

Also, the skyscrapers didn’t make sense. Veer West isn’t located in a huge city, and the cluster of high-rise buildings was an ill fit for the cozy island. More chopping!



Almost There!

The house was much better than the skyscrapers — a welcoming and comfy touch. Still too cluttered, however, and we needed an introduction for Veer West at the bottom.

Font Choice

We also debated serif versus sans-serif and tried to find a balance between style aesthetics and readability — sometimes fonts are very pretty, but they’re hard on the eyes as a dense block of text. We decided on a combination of serif (some flair for headlines and larger text) and sans-serif (clean and easy to read).

I almost chose Georgia because it’s a great serif, but Lora is more fresh. It’s excellent for our design, too, because Lora’s roundness complements our geometry.


Ready to Sail

Yep, here we go. A more peaceful shade of blue, too. You get the sense of ease and welcome, but also the spark of discovery — you can soar, sail, or dive in right along with us.

P.S. Thanks to Deborah Kim for helping put this post together!