Cloud Four Blog

Technical notes, War stories and anecdotes

Cloudfour.com Redesign: This is how we do it

By now you’ve probably heard that we’re full steam ahead with a redesign of our beloved cloudfour.com, and we’re doing it in the wide open for everyone to see.

This is an interesting and fun endeavor for us, being both the client and the project team. It definitely adds a layer of complexity, but it also allows us to try things out that we might not be able to given a client’s project constraints.

We pride ourselves on being adaptive to the project’s needs – we don’t have a one size fits all process. This is part of our DNA (and part of our differentiation as a company.) Here’s how we are adapting to fit our own project’s needs:

Cadence

In our public Slack channel, I mentioned that we’re working in agile fashion (not capital-A-agile, but y’all know how I feel about that. We’ve settled into two week sprints as a general default on projects, and we started our first sprint last Tuesday. It goes through March 8.

To keep things fun and interesting, we opted to name sprints after animals. Sprint 1 is called Honeybee, mostly because I liked the emoji for that animal. Buzz!

Communication

We have weekly check-in meetings that take place during our regularly scheduled staff meeting. We already have that time blocked, and we rarely use it all, so no need to schedule yet another meeting.

For daily communication, we use Slack. We also have a Basecamp set up for this project, but we are using it less and less every day.

We’re still feeling out if a daily stand-up is necessary for this project and we’re exploring some tools to facilitate asynchronous stand-ups via Slack. More on that soon!

Tasks and Status

Cloud Four Redesign Trello Board

We’re using Trello to manage our backlog and keep track of what is in-progress and complete. We’ve made our board public, so you can follow along there as well.

We generally set up our Trello board so there is a Project Information list at the far left. This provides some basic context for the work that we are doing, and hopefully is a good place to get started when you first join the board.

For the moment, we have just a few lists to help us keep track of tasks. Please feel free to take a peek around!

Follow along with us!

I’m excited about the challenges we are undertaking on this project, and super thrilled we can discuss them in the open. Check in on our Slack channel, Trello board, and Pattern Library to stay up-to-date on our progress (GitHub repo coming soon!). We’re also tweeting at #c4redesign. You can catch up on all our redesign posts here on our site.

So, about that logo…

Back in the heady days of the .com boom when my cofounders and I all worked at Kavi Corporation, we had a number of technical standards-setting organizations as clients. As proof of industry support for their standards, almost all of these SSOs would have a page on their site that displayed the logos of their member companies. It was up to me and the other designers at Kavi to make sure these rosters looked good; the images were compressed properly, free of float clearing issues and with equal visual weight given to each logo, especially those at the board level.

Over time, I became something of a tech company logo connoisseur and developed an awareness of what made for an effective logo. Aside from the basics taught at design schools everywhere, I found that a width to height ratio between 2:1 and 3:1 was a de facto standard, and that straying too far from this aspect ratio range meant that the logo wouldn’t read well when sized to match the others.

cloud-four

I kept this “early aughts tech company logo” aspect ratio in mind when designing Cloud Four’s original logo. Also, we wanted a logo that conveyed the intangible qualities of our fledgling agency: openness, transparency and reliability. Nothing says, “Hire us, we’re almost certainly going to be around six months from now!” quite like a serif typeface, so we selected Lineare, whose graceful ascenders ably supported our brand qualities.

A color palette of muted blues and grays reflected our home, Portland, enshrouded in a gentle drizzle 8 months of the year. The cloud shapes above the letter forms were an obvious tie-in to our company name and added a sense of rise, growth and lift to the text treatment. It is probably no small coincidence that I was pregnant at the time of the original logo’s creation either!

New Cloud Four logoOne or two things have changed since 2007. For one, that 3:1 aspect ratio doesn’t work too well for the abundance of square formats to which a modern logo must conform, such as home screen icons and Facebook profile images.

So, our new logo was born out of necessity, quietly appearing first as a favicon, then migrating to our Twitter account and beyond. We’ve also evolved as a company; gaining confidence and expertise with each employee who joins our team. While we’re still an open, transparent and reliable company, we’re also a cheerful, responsive and scarily smart company.

Our new logo reads well in sizes ranging from Slack emoji to the t-shirts we wore at Responsive Field Day. The vivid blue is more eye-catching than the demure slate of yesteryear. The cheerful, bubbly cloud shape contrasts with the strong diagonals of the negative space of the “4” that impart a sense of motion and activity to the logo form. I envision our new logo emblazoned as a badge on the arm of a scout, exploring the wilds of the web’s frontier.

Mood Boards (Neither Bored Nor Moody)

Our team had a set of defining characteristics and was almost ready to start redesigning cloudfour.com. But before we dived into element collages (more on that in a future post), we wanted to draw from a shared well of design inspiration. So we decided to make a mood board.

A mood board is a collage of reference imagery from the outside world with some relevance to the project in question. It can include examples of typography, colors, illustrations, photography or other stylistic elements. Traditionally, you’d assemble one from magazine clippings or whatever else you didn’t mind cutting up and gluing to foam core.

Photo of traditional mood board exercise in progress circa 2009

We decided against the cut-and-paste method for a couple of reasons:

  • Most of the team’s favorite sources of inspiration are easier to assemble digitally than in physical form. One could argue that the value of a mood board exercise is in exploring sources outside one’s typical frame of reference, but for this project it felt like a poor fit.
  • By this point, our team was engaged in parallel projects that made scheduling a day-long, in-person exercise difficult to coordinate.

Digital mood boards are nothing new, and there are plenty of tools to choose from (InVision’s being particularly impressive). We decided to use Pinterest, simply because most of our team was already using it.

Over the next few days, we assembled 79 pins into the cloudfour.com mood board:

Screenshot of our Pinterest mood board

Although our team members contributed independently, the overall tone of the board is fairly cohesive (possibly owing to our earlier characteristics exercise). This gave us the inspirational mind-meld we needed for the next design phase.

Shared Visions and Sticky Notes

When we started redesigning cloudfour.com, I knew I wanted the entire team to feel a sense of ownership in the end result. To establish an inclusive design direction without designing a camel, we had to distill the collective input of every team member into one guiding vision… a singular “us.”

Fortunately for us, few problems in the universe cannot be solved by getting in a room and writing things on sticky notes.

After broadly discussing our hopes and dreams for the redesign, we jotted down words on stickies that described how we wanted Cloud Four to feel.

Each of us presented and clustered these notes on the whiteboard, grouping those that seemed thematically related.

Collage of sticky note exercise photos

Then, we agreed on informal titles for each cluster. These became (in no particular order):

  • Leadership
  • Academic
  • Open
  • Ahead
  • Craft
  • Integrity
  • Cheerful
  • Web ❤
  • Responsive
  • You
  • Boutique
  • Portland

We managed to swiftly condense 93 sticky notes from nine team members into twelve tidy descriptors. I call that a successful exercise!

These directly informed our mood boards… but that’s a story for another post!

Redesigning Cloud Four in the Open

We finally have the time to give our perpetual back-burner project the attention it deserves. And we decided we wanted to try something different this time.

We’re going to redesign Cloudfour.com in the open!

We’ve never done something like this before. Consider it a grand experiment.

We started the design a while ago before client needs overwhelmed us. We created mood boards and element collages. We even started a pattern library and plan on open sourcing the tool we’re using to build it.

Sample element collage from our redesign

Over the coming days, we’ll share with you what we’re working on and our thinking behind it.

In the meantime, if you want to follow along, you can join our public redesign Slack channel, read archives of that same Slack channel, and check out our in-progress pattern library.

We’re looking forward to sharing our progress with you and getting your feedback along the way.