I wanted to let you guys in on how we started the design process of Clover Sites 3. We’ve said this before, but 5 years ago the web was a totally different place in many ways. Not just in the way we consumed information, but also in the way we interacted with the technology. We wanted this newest version of Clover Sites to take advantage of the best of the new web, so when we started this project, we really started from the ground up.
Our creative process starts with about a million theoretical conversations. We brainstorm new ideas quickly, diving back and forth between the big picture and tiny details. These initial discussions typically revolve less around the actual product and how it will work, and more around what the needs are, and what problems we are trying to solve for our customers.
Once we feel confident with the direction we’re heading, we begin the wireframing process. Wireframing is pretty typical among web companies, and is an essential part of our creative approach as we think through what our people’s interaction with our new product will look like.
Basically, wireframes are non-designed versions of the end product (i.e. the “functional” parts of the website, and in our case the Greenhouse). Wireframes allow us to fully script through what the interactions will look like without getting caught up in the little design details. Ultimately, this part of the process allows us to go through multiple iterations of the product quickly, and helps us to continue to refine the product to give you more power, flexibility and ease-of-use.
Although we can only test the “feel” of the user interface once the product has been created, wireframing gives us a chance to make sure the experience fits the expectations and capabilities of our people... And will be truly “Clover-esque”.
Here are a couple shots of what our wireframes look like for Clover Sites 3. They may look a little crazy, but what they represent are about 5 years of keeping the best parts of our user interface, mixed with a bunch of easier and more functional improvements, capabilities and features.
Here's a scaled down version of the wireframe for our new media player. A bit ugly and chaotic, but it gets the job done:
And just in case you are curious, here's all the wireframes for the new Greenhouse:
Seeing these wireframes from a bird's eye view might not give you much insight into all the functionality that is in store, but hopefully you can see the work and planning that goes into our products before we can even start designing something new.