Over the past couple of months I have received a few messages asking for real-world examples of wireframing and prototyping in action. The difficulty has always been that much of this activity never really sees the light of day – or at least, as far as Joe Public is concerned. In a way I think a lot of people treat their early mockups as ‘not fit for public consumption’ and are a bit wary of showing them to the masses.
A bit of background
Some of you might know that this blog isn’t all I do for a living. I’ve earned my humble crust for a few years plying the trade of freelance web application developer for various companies, and more recently I’ve spent some time designing, developing and marketing my first product. Well, technically a service, but that’s splitting hairs.
The product in question is Kupima, which is a web-based user testing service. Sure, it’s not the only such service but I felt that there was room for improvement over these established user testing sites and was confident I could build a better one. So, I set about doing it…
This article is really meant to share some of my own personal thoughts and show how my design for just a part of this new website (the homepage) would evolve over time. It’s not complete as many ideas were rejected and deleted, but what I’ve gathered here is the ‘bloodline’ of the homepage as you see it today. It’s not a tutorial and the chronology isn’t entirely right (too many missing steps) but nonetheless I always find glimpses into the creation of new things quite interesting and I thought that perhaps you might too…
To begin with, I had a few vague sketches, piles of post-it notes and a sort of fuzzy idea in my head about how this might hang together. I didn’t have any sort of design plan, and to my shame I initially approached it in a very haphazard way.
Soon, though, I got my act together and started to pick out the features that the site should have and identify a rough sitemap. I then started to make the first significant design step in the project: wireframing.
I chose to use Balsamiq Mockups almost exclusively during the design phase. The reason for this choice was a combination of availability (I had a license, was familiar with using it and was enthusiastic about what it could do) and the speed by which it allowed me to put designs into a reproducable format. This was quite important as sketching on paper is fine but as a design grows you find yourself having to re-do a lot of the sketches even for small changes. As someone who changes his mind all the time about designs, the ability to move elements around quickly was also a big selling point.
The first take
I spent a bit of time looking at the parts of the site that would likely be common – in other words, the header bar, the footer and so on. I created some template wireframes so that I had a common basis to build on (the above is a very early template although a few revisions of this were made). Then I started making an initial take on the various pages, including the homepage:
You can see by this point there’s a basic layout without any real styling. One of the benefits (to my mind) of an app such as Balsamiq is the way that it doesn’t lead you to get sidetracked with cosmetics. At this stage, deciding roughly what things should be on a page and where they should go was more than enough!
This particular version shows my idea to have a video embedded on the front page, with a large call-to-action button. I deliberated over the positioning of these elements as in many respects there were arguments for and against having the video on the left or the right. Here’s a version with the video on the right:
One of the most powerful features of prototyping and wireframing is the relative ease by which you can compare two competing designs. I really couldn’t make up my mind, so printed both out and stuck them on the office wall. Over the course of the next day or two I started to realise that the second layout, using the right-hand side, was the better approach.
Crisis of confidence!
Mid-way through this process, I started to play around with some html templates to see what corners I might be able to cut. I was about to embark down a dangerous road: that of the design being led by the availability of a template that I liked. I spent a good couple of weeks exploring some wacky alternatives (both in wireframes and in html):
I actually rather liked this one – it was a commercial theme although in the end I abandoned it (although actually some of their styles and a couple of images remain in the Kupima site of today – why re-invent the wheel, eh?).
The next one was my attempt to try to introduce some of the stylistic influences of the commercial theme into a format compatible with my preferred right-hand image/video layout:
As you can see, wireframing was helping me flesh out ideas quickly, without tying myself up for large periods of time. Nonetheless, I was still torn on whether a homepage video or rolling slideshow of screenshots would be best.
The concept behind the previous wireframe involved a series of screenshots with prominent calls-to-action. I also included a ‘how it works’ section below.
I was still exploring this concept far later in the process, including this layout from as late as April 2011:
The most notable things here are that I had started to think in terms of how the site was going to sell itself – see the pricing bubble, a concept which would push the competitive pricing to the forefront:
One of the more difficult things I was finding was how to choose what things would be visible on the homepage and what things could be moved to other pages. I really struggled with this, and even now (post launch) I am still not certain that I have this right. At least it’s reasonably easy to make changes, and if I get it wrong nobody gets hurt or upset…
The front-running contender by early spring was the layout as follows:
As I was now comfortable with the ‘text on the left, media on the right’ layout, I started to flesh out how this might look. In fact, as I write this I’m surprised just how closely the homepage of today looks to this late wireframe. Sure, there are some differences – mainly aesthetic – and of course there are different words and navigation, but it’s broadly the same design.
Now, I’m no graphic designer, but I do know my way around Photoshop and so I have, through persistance, managed to get a fairly reasonable look to the site (to my eyes anyway). To make it a bit different from the competition, I decided to inject some personality into the design by using the superb Leo Blanchette orange people designs to lift the pages. Yes, if you’re being critical you might say that the cartoon look might distract some people, but I feel that most business sites lack personality (with notable exceptions such as MailChimp) and I was quite pleased to be able to steer this one in a different direction from most.
I had fun compositing the little people together into groups as required, and I was quite pleased with the end result. A good few people have commented favourably on the visuals and I have to give credit to Leo for his outstanding work. Also, while I remember, I must thank Ross Sneddon for his great logo design. Anyway, I digress….
Launch in early June 2011 was interesting. As I’ve explained before, I don’t have a team of people working with me so I had to do pretty much all of the work myself. From coming up with a design, to getting it to work, to choosing colours, to building the pages, designing the middle-tier and the database layers, to writing the marketing blurb and actually running the website. As anyone who’s done anything similar will know, this really spreads you thin. I’d committed to a June launch and I had to make some compromises in order to hit that date.
One such compromise was that the site actually launched without a video for new users to view. I won’t go into the details of creating the video presentation, but suffice to say that whilst I was impressed with what I could get Keynote to do, it’s far from a marketing classic. I had to delay this for a week after launch just in order to get the site out the door.
This also meant some compromises in aesthetics. Here’s a fairly recent (mid July) screenshot of the site:
I always felt that there was just a bit too much text and that it lacked something. It felt a bit, well, ‘bitty’. It needed something to draw it all together and so after spending a few hours looking at other homepages to try to get some idea about what works and what doesn’t, I decided that it needed a background and a text-trim. So, at time of writing here’s where the homepage has ended up:
So, all-in-all, it’s been a fascinating journey for me – and I hope that it’s been an interesting read for anyone considering using wireframing as a way to come up with a homepage design. Sure, you’ll take wrong turns along the way but it’s quite nice to look back and follow the blood-line of your design, its DNA if you will.