The Challenge

Establish a small creative agency producing big agency results.

My Role

Design, develop, write copy, and manage affairs.

My experience working at and researching small creative agencies has unearthed an unfortunate fact: many of them are not very good at what they do. Whether for lack of technical skill, design prowess, or caring, there are a lot of agencies pumping out bad websites on a daily basis.

I thought I could do better, which is why I decided to found Catnap with a super-talented friend of mine, Liam Scott—to make beautiful, responsive websites custom-tailored to each client’s specific needs.

Establishing a brand

When Liam and I first sat down to start seriously thinking about what we wanted to create, we brainstormed a huge list of names. At the beginning, most of them were serious, sleek-sounding titles, like Amber, Carbon, and Aurora.

But when we really began to question our own personalities and how we envisioned our ideal creative agency, our answers were rooted in things like character, spirit, and fun—a far cry from the trendy but ill-fitting Carbon. After some deliberation, we settled on Catnap.

Early naming attempts and some poorly-drawn cats.

The name Catnap is simple. It’s memorable. It gives us a persona that we can use to humanize technical concepts. It attracts the clients we want (the artist; the mother of three who owns a small business) and dispels the ones we don’t (the stodgy businessman who throws around terms like “b2b” and “synergy”).

The logo

As the logo took shape and we began testing it in different locations, we realized that the cat illustration was a touch too unwieldy to be used in small sizes or single-color prints. So we opted instead to use the cat as more of a mascot—it graces illustrations throughout the site without being directly attached to the logo. Win-win. We also ditched “Creative” from the wordmark, opting to use it only in formal listings.

Round 1: Basic logo and type in muted oranges and yellows.
Round 2: Brightened colors. Flattened subtitle baseline.
Round 3: Adjusted dimensions and stroke width for clarity in small sizes. Removed subtitle.
Final logo paired with the Catnap mascot, Sam. On the website, the logo is solid white and animates a rainbow when hovered.

Aesthetically, we refrain from paw prints and other animal clichés, and try to keep the cat puns to a minimum. Although our mascot and name are feline-focused, our business is about technology, not cats—just like Apple is about computers, not apples.

There’s no page like home

Perhaps the most crucial part of any website is its landing page. Are you greeted by a friendly receptionist or thrown into a dark hallway full of unmarked doors?

We greet people with a space cat. It’s friendly, it’s fun, it gives a good idea about how we approach business. But more importantly, the surrounding text paints a clear picture of exactly what we do.

catnap-screenshot
  1. Right off the bat, we answer the two most important questions for any website: who are you and what do you do? (It’s astounding how many sites leave this part out.)
  2. Listing our experience shows that despite the cute design, we know our stuff.
  3. Big, bright icons put our services front and center.
  4. Once the two most important questions have been answered, there’s a third that’s just as critical: why do we care? In other words, what can Catnap offer that the others can’t?
  5. Finally, we offer an invitation to contact us, or (if you are unsure) learn more about us.
  6. Each top-level page (Works, About, Contact) is represented by a call-to-action button somewhere on the landing page.

SMIL like you’re a star

The stars in the background pulsate and twinkle thanks to SMIL—the Synchronized Multimedia Integration Language. Basically, what SMIL lets us do is declare animations within an SVG file rather than relying on Javascript.

SMIL can also accomplish a bunch of neat animations not currently possible in CSS.

And since we’re dealing with vector graphics, everything remains nice and crisp—whether you’re viewing the site on a Gameboy Color or a retina Macbook.

Content comes first

Design on most sites exists to convey a message, usually in the form of text. When creative agencies design pretty interfaces with zero regard for what content will actually fill that interface, well… it’s a bit like beautifully gift wrapping a box and saying, “we’ll figure out the gift later.”

In developing Catnap (and as part of our philosophy) we always refrained from greeking—that is, inserting chunks of text like lorem ipsum into a design simply because content hasn’t been written yet. The words that we write and read deserve no less attention than the design which surrounds them, and we made sure to thoughtfully compose every sentence, from the heading on the homepage to the confirmation email and the 404 page.

A prompt confirmation email lets people know everything was sent successfully, when to expect a response, and what to do if things don’t go as expected.
The tone of an error message like that on the 404 page is gentler than the chipper language present on the homepage.

Results

We officially launched Catnap on February 6, 2015, less than a month after returning from a semester abroad, at the start of our final semester. Before either of us could catch our breath, we had graduated from university—Liam was flying to New York City to write code at an amazing startup, and I was driving home to play keyboards for a summer-long theatrical engagement. Sometimes life takes you in different directions.

But our efforts weren’t in vain. With Catnap, we laid a bulletproof foundation that’ll only require a pinch of marketing should we choose to return to it in the future. We solidified our views on user-focused design, gained experience working on a self-driven team, and learned a whole lot about setting achievable deadlines (and sometimes extending them).

That's it!

Time sure flies when you’re having fun. You can visit the live site at catnap.co or check out some of my other projects down below.