Designing the CannyBill home page
After two weeks on the CannyBill redesign project (one of which I spent traveling to Chicago for An Event Apart), it time for deep breaths as I talk about my design of the home page for the new CannyBill front of house site and ask for your thoughts and suggestions.
First take a look at the original pre-redesign (is that a word?) CannyBill home page.
After spending several days on the site, understanding the product better and listening to the aspirations of the CannyBill team, I wrote down three key goals that I wanted to accomplish on the new home page.
- Explain more clearly what the product does
- Provide clear examples of how people use the product and what they think about it
- Emphasize the benefits to business, rather than the features of the product
The original design commits few deadly sins, but one of the worst is that it is hard to understand exactly what CannyBill does. It's a well-rounded product with many facets, but the myriad of features cloud the message. Sure the first paragraph of copy says clearly.
CannyBill is a web based invoicing and billing solution for businesses and web designers. Easily create, send and manage invoices and accept payments online via credit card. You can also sell your products and services using order forms which your customers can signup to and even link to live API's such as Plesk, cPanel/WHM, Geotrust, Enom, Basecamp and many more.
But why CannyBill? Why use it when there are so many offering similar (if less well integrated) services? And what is an API again?
Many of the page's problems stem from the CannyBill team's uncertainty about who exactly this product is aimed towards. Many of its possibilities are great for web designers reselling services, others have a wider appeal. This uncertainty results in the obvious separation of markets in the middle of the page, but here again is a list of features that does little to inspire me to go any further. I wrote in my sketchbook on the first morning, But why I should use CannyBill?
Day one
On the first day I sketched out the content that I hope answers these questions.
- What CannyBill can do to help people save time, keep on top of business and provide easier ways to add revenue?
- Who uses CannyBill and what do they do with it?
- What have been the results and what do they think of it?
- What are the compelling reasons that will make a person read further and sign up?
With a sheaf of paper littering my desk (untidy) I plugged my ideas into my package of foundation files (tidy), laying out elements simply over a 960px fixed-width grid that I applied as a background image to the HTML element.
For a good while at the start of any project I work in black-and-white as it helps me to focus on typographic and layout structure (infact they're the same thing) without the distraction of colour.
Day two
One of my habits is to leave a design open on my second monitor, sometimes just while I make a cup of tea or nip out for cigarettes, other times overnight so that I get another first impression when I walk into the room. Sometimes just a few minutes away from a design can help me to spot areas that need improvement.
Generally happy with the spacial relationships between the key elements and the overall clarity of the page, I went about refining the layout and its elements.
Days three
Confident that everything was sticking to the grid as I wanted, I turned of the grid background and reintroduced colour based on the palette that I had devised the previous day. For this I used a tried and tested method for creating a palette of hues from just two colours that I sampled from the original site's branding. I hope that this retains a little continuity for people who may already be familiar with the site.
Colour swatch
Day four
This, together a background image that I compiled using over a thousand instances of the CannyBill symbol added a touch of visual interest and helped me set the direction for the look of the new design.
Day five
Taking a few days away from the design while travelling, when I came back to the design I realised that one key way to illustrate how people use CannyBill, tutorial videos and sccreencasts was pushed too far down the page. I hope to have given this important area more emphasis by bringing it to the second level of the layout.
CannyBill home page day five Flickr | HTML
Day six
When I start most projects, I don't have a clear idea of how I want a design to look. I prefer to focus first on typography, layout and organising content and functionality so that it make sense to me and, I hope, to people who will use a site.
For CannyBill I had no preconceived idea that I would make a light on dark design. Instead the design evolved gradually until the point that waking up on day six I decided that that a darker design would help to better focus a person's attention on the content of the page. Returning to my colour palette, less than two hours later I had forked the design into two colour themes.
CannyBill home page day six (forked) Flickr | HTML
OK, let's have it
Tomorrow I will write in more detail about the markup and stylesheets for the new design. Until then, I'd love to hear your thoughts and suggestions on the home page design at this stage. Have I made the right decisions? Can I improve and where?
