Blogging And All That Malarkey

A top down look at the CannyBill redesign

With the first phase of the CannyBill redesign process drawing to a close, I would like to say a huge thank-you to the CannyBill team for encouraging a public, open design process and to everyone who has commented and tweeted their helpful suggestions.

Although there is still work to be done, I want to share the full set of design templates starting with the third major template in the series — the product tour page.

While the original CannyBill site confusingly sports links to both a tour and demos, I am recommending to the team that they combine both features into one new tour section.

Flickr | HTML

In place of dry lists of features and links to a demonstration area for the application, I am recommending that the team walk potential customers through the application's key features in a series of short videos.

While their investment in the production of these videos will be higher than written copy and screenshots, I think that they can be assured of a better user experience and therefore increased sign ups (although in the absence of data to back up that opinion it remains hopeful speculation. I will be interested in learning the results).

My first idea was to present these videos on a single page using a slick JavaScript interface, but now I am recommending that for several reasons, including better search engine visibility, that the videos be presented on their individual pages.

I also advise the team to group their tutorial documentation (PDFs) and knowledge-base information into categories that correspond with the videos that they present. I will be returning to this section, along with its associated support pages, at a later stage when we have a better understanding of the scope of that content. Until then, I hope that the page's grid structure will be flexible enough to handle almost anything that is thrown its way.

Other page designs

I have taken note of the feedback about the design so far and, where we felt it was appropriate, have incorporated it into the pages. I know that a design project is never truly finished and that we will iterate these designs during and after the build as we get information about how people are using the new site. This concept stage might be drawing to a close, but I can see an ongoing process of iterating aspects of the designs in the months ahead.

Here are the remaining page designs that include several content modules that the team can easily reuse and repurpose to make additional templates. Open them in either Safari 4 or Firefox 3.6 Alpha. Sorry Internet Explorer, Opera or Firefox 3.5 users, look at the screenshots on Flickr instead.

Home page: Flickr | HTML

Plans page: Flickr | HTML

Contact page: Flickr | HTML

Discussions page: Flickr | HTML

Entry page: Flickr | HTML

You can also start clicking (or tapping) through the designs from the home page down as all links are now active.

Next steps

Over the next week I will integrate the new written copy that Relly is hard at work crafting and adjust layouts where needed. Then Owen and I will move onto browser testing to see exactly where the natural differences between browsers are acceptable. Look out for a post about that process next week.

Leave your comment

Pete

October 22 2009 @ 06:31pm #

Interesting that you went with the darker design. Personally I preferred the lighter version simply because it seemed more “open” and “friendly”. Not that there is anything inherently wrong with the dark one. I normally like light on dark but I think it’s something about that shade of blue.

Dave Smith

October 22 2009 @ 06:45pm #

Hi Andy,

I’m not sure if this has already been raised as a question, but are you actually using HTML5 “in the wild” on client sites now?

I know it’s possible to use it and I’ve built sites with it before (eg: findmebyip.com), but they’ve never been client sites.

I’d be interested to hear your reasoning.

The design is nice, though I must say I much preferred the lighter version for the same reason as Pete [above]. Nice use of -moz-transform on the
‘s. Never come across this before.

Nice work.

Martin Bean

October 22 2009 @ 07:19pm #

Very nice. Although the link is broken for the discussions HTML link.

Andy Clarke

October 23 2009 @ 05:06am #

Pete: Interesting that you went with the darker design. Personally I preferred the lighter version simply because it seemed more “open” and “friendly”.

— I will be delivering two colour versions (with a recommendation for the dark) and will leave it to the client team to decide.

Dave Smith: I’m not sure if this has already been raised as a question, but are you actually using HTML5 “in the wild” on client sites now?

— Yes, we are, on sites where the client team have good technical ability to make changes to the templates as the specification develops, as it has done recently. I honestly believe that just like CSS3, it is really important that designers and developers use HTML5 now, on as wide a range as projects as possible. Client sites included. Aside from the styling issues without JavaScript in Internet Explorer, I can see no reason not to use HTML5 now, and we have reconfigured all our base files to use it. What do you think? Can you see potential issues that I haven’t?

Colin

October 23 2009 @ 05:39am #

On HTML5: My understanding from following the development of HTML 5, what began as Web Apps 1.0, is that HTML 5 is the right tool for building next-generation rich Internet applications, and HTML 4 lives on for building traditional Web sites. Maybe I’ve misinterpreted that, but it feels to me like it does when people use a framework as a CMS when there are perfectly capable, feature-rich CMSs available. Ultimately the question has to be, “What serves my client the best?”

Now, I feel that your decision here is well thought-out and calculated, but what worries me is that the industry jumps on the bandwagon without as much consideration just because “Andy Clarke is on board.” But these sorts of things tend to work themselves out, so I’m not that worried…

And I’m gonna take my mother’s advice and not say anything at all about what I think of the design result, if you catch my drift…

Andy Clarke

October 23 2009 @ 05:48am #

Colin: I feel that your decision here is well thought-out and calculated, but what worries me is that the industry jumps on the bandwagon without as much consideration just because Andy Clarke is on board.

— Don’t worry, no one listens to me anymore.

I’m gonna take my mother’s advice and not say anything at all about what I think of the design result, if you catch my drift.

— Feel free if you would like to (I won’t tell your mother). That is what the open process is for. I don’t only want to hear positive reactions.

Colin

October 23 2009 @ 06:06am #

Okay, but it’s my hunch vs. your research…

1.) As a freelancer with invoicing woes, my first impression when hitting the home page is, “Are they serious?” And not a sarcastic “Are you serious?” but a, well, serious one. Cute name, cute logo, cute, bubbly design—is the app just a cute invoicing system? I’m looking for a serious, ass-kicking invoicing system so I never have to open Microsoft Accounting 2007 ever again. The app should sell itself, which leads me to my next critique…

2.) Let the app sell itself. Your best first move as a marketer is to get the product in the customer’s hands. That’s why so many software sites put a big screenshot or video front-and-center. This design approaches this, but I’m presented with 4 equally compelling options. I think it would be better to show 1 big video followed by three smaller ones. Guide me through the process. And for heaven’s sake, you’re trying to close on me before I’ve even seen the product! The bright-orange “see prices and plans” precedes any screenshots or demos. So ultimately, I think the content hierarchy needs to be reconsidered; in fact, the tour page is better geared toward making the sale than the home page. They ought to be equally effective.

Andy Clarke

October 23 2009 @ 07:50am #

Colin: Thanks for that, I really appreciate your time and opinions. Regarding your second point, the fact that CannyBill has more facets than a single invoicing application, Blinksale for example, has been one that I have wrestled with repeatedly throughout this design.

One approach we may take to design two versions of the home page, the second along the lines that you described. We can then serve and test both versions to see which performs best. Thanks again for your thoughts and not being backward about coming forward with them. I owe you beer.

brad

October 26 2009 @ 06:48am #

I’m curious as to your reasoning behind the use of <article> and <section>. I think I have a good idea of the correct usage between the two but I still have some doubts and am looking at others usage to help my understanding.

Looking over the CannyBill html I notice you use <section> more frequently than <article>. In places like the blog where I would expect <article> it is used, but I wonder if it should also be used to markup the main content in the support section.

On some pages, like the blog you use <section> as the container and wrap categories, most read, commented on, etc with a <div>, my understanding is that this should be reversed (HTML 5 Doctor is an example of what I mean).

On the pricing page the “benefits” are wrapped in a <div>, I wonder why not use a <section>.

I suspect there is not always a correct answer, but I’d be interested in your thought.

Commenting is not available in this channel entry.

A top down look at the CannyBill redesign

Other page designs

Next steps

Leave your comment

brad

Hardboiled Web Design by Andy Clarke