Safetygoat

Redesigning BView part 2: My new priorities

Wednesday, May 20th, 2009

I previously wrote a post about the history of how we came to this redesign, and the lessons we learned by doing things the hard way. This is a redesign of the site, bview.co.uk. It currently looks like this:

My glimmer of hope

We didn’t start out thinking we’d do a redesign. After another day of design by committee, my head of products, Colin, and I were discussing that we thought the overall feel of the site was a bit drab and lacking simplicity.  I lamented that I knew I was capable of making it better, but didn’t have the freedom to do it.  He then said, “Go out and change BView to look the way you’d like it to look.”

These words: The ones that make a designer most excited but also the most nervous.

I said, screw it, I’m going to pour my heart into this design and worked over weekends and evenings (and got a bit of work time too).

I wasn’t to change things too much functionally, but there were a few consistency things I wanted to implement:

1. Hierarchy of titles
When we talk about what is the most important on the page, these titles should follow this hierarchy.

2. Hierarchy of links

On some pages we have over 90 links. Obviously making them all link blue and underlined couldn’t work. Just as the titles structure our content, so too does the link structure. This is very important for future product planning, as it forces people to think about where it should fit within the hierarchy of the page: biggest to smallest.

3. Bright, fun colour palate

Colour has always been an issue with BView because of how much content needs to fit on the page. What do you make bright? What can be in another colour? It got to the point where all the colour slowly disappeared because it looked messy with it in, as things weren’t organized coherently. So for the new design, we started with the colour palate for the site from the beginning and made sure that it stayed bright and fresh.

4. Clear user path through the page

I want to gently lead people through our site, not bombard them with everything at once. The page should be easily scannable, and not everything needs to be above the fold (wherever that is). The hierarchy and spacing should make it much clearer what they need to do. If they want more help, that should be easy to find as well.

5. Simplicity

If it’s designed right, there’s no need to repeat buttons or text in multiple places. If it looks simple enough, it won’t scare people away.  It’s easy to over-design stuff.  The real talent is in keeping it simple and clean.

6. Design that causes a bit of “delight”

The new design delights me. I’ve put it on a grid. I’ve been quite strict with myself (hard work for this messy girl!). I’ve thought about the shading, the colours, the links, added subtle borders, and added little details to make it stand out. I’m also planning a few little easter eggs!

7. Use some modern web techniques

I don’t mean using the most current trends “just to have them”, but to add them only if they add to the design but keep them subtle. I’m also making sure the code is by far the most tidy it’s ever been: it’ll be full of microformats, well organized and without a bloated stylesheet. I’m going to add some visual treats for those using the latest version of firefox and safari as well.

8. Not designed to make everyone happy

I’ve been reading everywhere about ‘design by committee’ and the problem with when you don’t train others how to give feedback. Our team has been really good about trying to change the way they give feedback.

Instead of “make the buttons rounder, and I don’t like the colour and can you make them about 4px taller?” we’re now working towards,

“Those buttons don’t make me want to click on them. How can we make them look more clickable?” which I love, because then I can try stuff out and find a good solution that still matches the design.

Because we’ve been going about this redesign in a more constructive manner, I am more happy with it now with their feedback than I was on my own. Feedback is supposed to improve things, and this new method is definitely doing its job!

8. Embrace our brand

I haven’t ever really liked our logo, and that’s always been clear… but that’s personal preference.  Because of that, I never properly tied the logo into the design.  That’s not the right approach: a lot of the time web designers don’t have control of their branding, and their job is to properly tie in the branding into their web design. Because I want our site to have a proper good personality, it needs to start with tying the logo into the design. So, I’ve brought the courier into the design for buttons and given the whole site a feel that I think better matches the font choice.

And here it is!

It’s just being built (and hopefully released in the next few weeks), so these are just the screenshots. It’s a big job to reskin the site in the new style, and only the major pages will be done in this next block of time, but I’m really looking forward to seeing it on there! Let me know your thoughts and feedback

Uncategorized