Speaking of Clover.

Clover Sites 3: Design Beginnings

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:

media wireframe pic

And just in case you are curious, here’s all the wireframes for the new Greenhouse:Wireframes

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.

29 Comments

Annie said on January 22nd, 2013:

You kids is crazy!

Eric said on January 22nd, 2013:

@Annie – We’ll take that as a compliment! ;)

Merel said on January 22nd, 2013:

I love how professional you guys are!!

Philip said on January 23rd, 2013:

You guys are fantastic. I appreciate your work very much. My brother owns his own software development company, so I understand how intensive this process is. I only wish (selfishly) it could go faster. Cannot wait to update my current site, utilizing this new interface. Any timeline on beta testing, which I would be happy to do :)??

Eric said on January 23rd, 2013:

@Philip – Thanks for that! And we’ll keep you in mind once we reach the point of doing a Beta.

Marc said on January 24th, 2013:

Looking good. Excitement for all and we thank you for moving the product forward with a redesign to HTML5.
I’m up for Beta testing as well if you want to start a list.

Eric said on January 24th, 2013:

@Marc – Thanks! We’ll keep you in mind.

Jack Sheehan said on January 24th, 2013:

Love the current product, but would also like to be a part of beta testing.

Bryan McGee said on January 31st, 2013:

First, I am super excited about the new features you guys are adding to the next version. We are very pleased with the current platform and can’t wait for the next round. Our next generations pastor walked in my office a few minutes ago and said how much she loves working on the site. This speaks volumes as she is the antithesis of a geek. Keep up the great work!

I have a request for the new version. Is it possible to have 2nd or possibly 3rd subcategory levels for the menu structure? We have a few categories that we would want to go one or two levels deeper (ie ministries>students>highschool>retreat).

Terrin said on January 31st, 2013:

This looks fantastic!!! I have a question for you though…. are you looking for beta testers? I have a boss who has itchy fingers and is looking at a different mousetrap. I’ve spent the last 4 years getting to know and love (LOOOOOOOVE) clover and am trying to hold off until the update comes out (as it has some of the features he’s after). Do you have a tentative release date or a need for beta testers????

Eric said on February 1st, 2013:

@Bryan – You’ll be able to have more than 8 Main Pages and 10 Sub Pages per Main Page once we release Clover Sites 3. We won’t offer more than 2 levels of navigation, but with the way the new pages will work with multiple distinct sections, and the ability to have hidden pages, more than 2 levels of navigation in most cases won’t be as big of a need. Hope that helps.

Eric said on February 1st, 2013:

@Terrin – no tentative release date yet, but once we get to the point for beta testing, we’ll most likely reach out to some current customers to give it a try. Thanks for your interest!

Mike said on February 10th, 2013:

We will be happy to beta test too!

Jens said on February 12th, 2013:

Would be happy to Beta Test, too.

Andrew said on February 21st, 2013:

will clover 3 be able to Integrate with Church Community Builder? I know it may be too early to answer that, but thought I’d ask anyways :)

Ricky said on February 22nd, 2013:

Eric – I’ve read through the comments so hope to not ask a repititive question. I’m thankful for the updates as I’ve been currently working with a graphic designer to give my clover a funeral. The lack of mobile ability and for people to access forms via phone has been a killer for my business.

Perhaps the greatest hindrance is the social networking. It doesn’t sound like you guys are going to allow for the blog plug-in, but you mentioned in a earlier comment that it will a lot easier to link to & easier access?

What does this specifically mean? Will their be shareable links?

Eric said on February 27th, 2013:

@Andrew – it probably depends on what kind of integration you’re talking about. Generally speaking, with Clover Sites 3, it will be much easier to integrate 3rd party content, but what that means specifically for each platform / service depends not just on how we’re creating the new version, but how each platform handles their integration abilities. Safe to say it’s a little early at this point to determine any particulars. Hope that helps a little.

Eric said on February 27th, 2013:

Hey Ricky, thanks for your questions. If you need to create mobile-compatible forms and would like to keep your current website, you could use another 3rd party form-creation tool like Wufoo for this. Give us a call or shoot us an email if you have questions about how to best go about doing that. We just want to make sure you have a great solution that works for you, either way you decide to go.

Also, as far as social networking, it will be easier to integrate “share” buttons into your pages if that’s what you mean. Right now, all pages are individually addressed which means they have unique links you can share to social media, but the “sharing” buttons that give people the ability to share content directly from your pages are not something we’ve implemented currently for Clover Sites. Hope that helps!

Taylor said on March 9th, 2013:

I’d be open to being a beta tester also…I love using clover and recommend it to everyone I know looking for a site. Can’t wait for this new version! Keep up the awesome work!

nathan said on March 18th, 2013:

Not sure if this has been asked, but if so – I didn’t see it. Will the new html 5 clover sites be responsive design or just mobile friendly? With responsive design being one of the largest shifts in new design, my hope is that “3″ will incorporate this style rather than just being mobile friendly. Thanks.

Eric said on March 18th, 2013:

@nathan – Responsive design is a huge part of what we’re doing. Look for a blog post very soon about this!

Rick said on April 7th, 2013:

I know I am coming late to this, but I have been waiting for the launch like everyone else. If you are going to do a Beta, I am up for it. I would love to transition as soon as possible.

Eric said on April 8th, 2013:

@Rick – sounds great. Thanks

Josh said on April 17th, 2013:

Would you guys be able to work in a way to fill out forms from our website on an ipad or other smart devices? As a church it helps to have that as an added way to sign up for things. Thanks and everything looks great!

Eric said on April 18th, 2013:

@Josh – Forms will work the same way as Clover Donations giving forms, perfect on mobile, desktop, tablet, etc.

Joe Grom V said on April 25th, 2013:

I spy Bootstrap. Gotta love it – such a good responsive framework! I would love to work with you all, if only I lived in Cali.

Eric said on May 1st, 2013:

@Joe – Actually… This is all custom code and framework we built ourselves specific to our needs. But we’ll take that as a compliment! ;) If you’re interested and looking to relocate to SoCal, shoot us your resume and portfolio for consideration: jobs@cloversites.com

Caleb said on June 13th, 2013:

I’m sure I’m repeating a frequent request. But I really hope you’re integrating navigation into the slideshow options for photos. Being able to navigate through slides for a home page or news feed is essential in today’s web!

Eric said on June 14th, 2013:

@Caleb – definitely on our list. Thanks!