Archive for the ‘Design’ Category

Pete Curley

A tale of a ridiculous billboard

By Pete Curley | 11 months ago | 12 Comments |

If you drove up 101 North in California between Palo Alto and SFO in the month of April, you probably saw our billboard. Then you probably thought: did this stupid thing actually work? How much did it cost? Should my startup get a billboard? Here’s what we learned.

Billboards are expensive. In the SF Bay Area, they can cost upwards of $30k/4 weeks depending on location and availability (Apple pays almost $50k/4 weeks for theirs and have them leased out all year). Those prices were out of our range. But like any scrappy startup, we figured we could outsmart the system and get big impact for relatively little money. I had a theory that sometimes billboards get booked, but for whatever reason the buyer backs out or doesn’t get the artwork done on time. The only thing worse for CBS than selling a billboard for cheap would be having a big blank billboard. I asked our CBSOutdoors rep to ping us if this happened. It only took a few weeks before they needed to fill some space.

Our billboard’s info:

  • Size: 12′x40′
  • Run time: 4 weeks
  • Total cost including art work and taxes: $6,999

The design

I had just a few days to finalize the design and get it off to the printers. We had a big decision to make. As a relatively low-profile company, should we clearly present our value proposition? Point out our competitors many weaknesses? The problem with billboards is that your audience can take very little action. They have to actually see the billboard, remember the name, and search for it when they get to their final destination. We thought that if we could get some press and buzz online, people could click through to our website resulting in far more actual visits. Crazy billboard was the way to go.

We’re big fans of the online community Reddit where users make “Rage Comics”. They’re crudely drawn characters developed by the community that are used in comics that any user can create and share. We used one of our favorite characters, the Y-U-NO guy for our billboard. He basically just asks why people aren’t doing something (like using HipChat).

The response

The response far exceeded our expectations and continues to pay off today. Just to be clear, we didn’t tell anyone about it. We didn’t submit it to Reddit, Digg, or any news site. Shortly after it went up, it was all over the place: Twitter, TumblrFAIL Blog (in the “Wins” category), and every startup’s dream, TechCrunch. It also caused a ridiculous rise in searches for “hipchat”. The billboard has been down for weeks but when we’re wearing our HipChat t-shirts, we still have random people come up to us and scream “Y U NO USE HIPCHAT” in some sort of confused Spanish/Italian accent.

Most importantly we got a lot of new, happy customers (the actual goal of any advertising campaign).

There was also a slightly negative reaction. People thought that we were a huge company and that our marketing team was ruining an internet meme. The reality is that we’re just three guys that thought it would be really funny. Although it made us sad that the Reddit community didn’t like it, we know that the overall title of a post dictates how people will react to it.

What happened to the billboard?

I’m actually not sure. We were told they’d be able to use it again if we contracted another billboard. I was hoping to get it fleece-backed and use it as an enormous blanket.

So, should your company get a billboard?

Maybe. You have to be really confident that you can come up with something crazy enough to create buzz, online and off. A helpful exercise if you do get a billboard: drive up and down 101 looking at existing billboards to see which are the most effective.

Here are my observations:

  • Don’t overdesign - You’d think that if you’re making something 40 feet wide, it better look great. This isn’t the case for most billboards I notice.
  • Use big, sans-serif fonts – You have just a few seconds to get something across. A name, an idea, a feeling. If you need to use text, make sure people can read it.
  • Dark text on light backgrounds are the easiest to read. Avoid using a blue background, it blends in with the sky.
Garret Heaton

What’s HipChat made of?

By Garret Heaton | 1 year ago | 0 Comments |

At meetups people are always asking questions like “Hey, what’s your stack?” or “What do you use for analytics?” It’s a great way to learn about worthwhile tools and services (and sometimes start a heated debate.) We thought it’d be fun to share our technology profile to satisfy your curiosity and support the awesome services we use.

Services

Languages

  • ActionScript – desktop client (AIR)
  • HTML/CSS/JavaScript – website
  • Objective-C – iPhone/iPad app (coming soon!)
  • PHP – website
  • Python – chat server and other services
  • Ruby – for Chef

Server software

Anything else you’d like to know? Have a tool we should check out? Please let us know.

Pete Curley

How Adobe ruined Fireworks CS4/CS5

By Pete Curley | 2 years ago | 10 Comments |

Adobe Fireworks is my secret weapon as a web-designer. It has the power of Photoshop but sports an interface and tool-set geared towards rapidly creating multiple versions of pixel-perfect mockups. Two of my favorite features: “Pages” where I can quickly create different versions in one file, and “Styles” where I can save our styles (buttons, dropdowns, etc.) and re-use them over and over again. I still do my finished pixels in Photoshop but the layout, margins, and typesetting is all Fireworks.

I’m a stickler for mockups that look EXACTLY how they will look in the browser. We like working off of pixel-perfect mockups when implementing new features. I don’t waste time making complicated specs and they don’t have to question what they’re building. The new versions of Fireworks (CS4/CS5) have made this impossible to do.

Why Fireworks CS3 is awesome

Fireworks has several text alias options. The one I always choose is “System Anti-Alias.” This will render fonts exactly how that font will look in a web browser.

Font rendering in Fireworks CS3

Font rendering in Fireworks CS3

Why Fireworks CS4 and CS5 are not awesome

When Adobe released Adobe CS4 I was shocked to see that when they updated the text engine, they removed the System Anti-Alias option. It is now actually impossible to get your mockups to duplicate browser text. For me, this was a clear deal-breaker.

Font rendering in Fireworks CS4/CS5

Font rendering in Fireworks CS4/CS5

Here are all of the alias options that Fireworks CS4/CS5 have:

All the font options in CS4 and CS5

All the font options in CS4 and CS5

It’s too bad, because Adobe has updated Fireworks CS4 and CS5 to be faster and more stable. The hardest part now is finding places to acquire Fireworks CS3 legally.

Pete Curley

5 HipChat features that designers love

By Pete Curley | 2 years ago | 0 Comments |

One of the things I dislike about being a designer is design review meetings. Painstakingly going over each mockup while wasting the time of dozens of people in the room that probably don’t care that much anyway. We’ve added features in HipChat to make design reviews a thing of the past and make your design team agile and effective.

1. Using rooms instead of meetings

At HipChat, we have a room called “Design” where I share my mockups. We discuss what we like, dislike, and I make revisions based on the feedback. Once the designs are finalized, I share the assets in the “Development” room so the engineers can implement them. This saves a lot of time compared to meetings or emailing mockups around and waiting days for feedback.

2. Image previews

When you share an image (jpg, png, gif) in HipChat we’ll give you an instant preview of the file. This is not only awesome for design reviews, it makes it easy to track previous conversations.

Live image preview

Live image preview

3. Paste images/Photoshop layers from clipboard

Now this is really cool. You can copy and paste images directly from your clipboard (including Photoshop layers) right into the message box in any conversation. We convert what you have on the clipboard into a file to be shared. The days of taking a screenshot, saving it to a file, and sharing by email are over. This also works well if you hit your Print Screen (on Windows) button and paste the screenshot on your clipboard.

4. Files and links sidebar

On the right side of any chat there’s a “Files & Links” sidebar that will show you the most recently shared Files & Links. This is the best way to flip through previously shared items without having to scroll through previous chat history.

Files & Links sidebar

Files & Links sidebar

5. Color swatch preview for hex colors

Hex swatch preview

Hex swatch preview

When you share a hex color in a room, we drop in a swatch of that color. This feature may seem silly, but wait until you have 6 colors listed out from a designer.