It is easy to get seduced by the sexiness of design. We often jump into the design process before even considering our business objectives or target audience. Even if we exhibit the self-control to do our homework, once we have done so we are all too quick to start producing pretty pictures.
It is important to remember that ultimately a website is not about it the design. The design fulfils a function, to guide the user to the information they need and convince them to complete a call to action.
Therefore, before I jump into the design of the new Boagworld.com website, I first need to ensure the content is organised in the right way.
This begins with addressing the structure of the site.
Establishing your site structure
There are all kinds of ways to establish the structure of your website from card sorting to user journeys. Although valuable for larger sites these felt like overkill for Boagworld.com.
The website had too few pages for a card sorting exercise to be of much value and because it was a blog, in most cases the user journey consists of visiting a single page to read an article.
I therefore created a simple site diagram based on the content of the site and the additional messages that I wished to communicate. This structure was as follows:
- Podcast – The podcast fulfils multiple objectives both from the users perspective and my own. For the user it helps educate and create a feeling of connection to the web design community. For me it is a chance to demonstrate our expertise and passion so promoting our services.
- Archive – The archive of old posts exposes users to a greater wealth of content than the latest few displayed on the homepage. This draws the user in and hopefully demonstrates the breadth and depth of material available. Ultimately this should encourage users to subscribe.
- Community – The forum and other social tools meets the needs of those working in isolation within the web community. It also helps answers specific questions and deepens users relationship with boagworld.com. The ultimate aim here is to create passionate participants in boagworld who will actively promote the site.
- Books & Talks – This section gives users access to more in-depth content on certain subjects while allowing me to sell some material and demonstrate my expertise in specific areas.
- About me – A less frequented part of the site but still necessary. This section exists primarily to add credibility to my writing by establishing my authority.
- Hire me – Obviously the ultimate goal of the site is to generate more work (as discussed in episode 1). This section is therefore important in encouraging users to contact me either about working with Headscape, booking a consultancy clinic or hiring me to speak.
Although establishing the sites structure was relatively easy, the bigger challenge was working out what messages, calls to action and content needed to appear on these various pages and templates.
To achieve this I used page description documents.
How page descriptions can help
A page description document is a useful tool in establishing the content for your website and keeping each page as focused on user needs and business objectives as possible.
The exact nature of page description documents will vary from project to project. However, in most cases each page on your website will correspond with a page description document that will be at most a single A4 sheet.
Each page description document will ask a series of questions. Typically these might include:
- What is the title of this page?
- How can this page be summarised in one or two sentences?
- If a user only scans this page what is the one message they should take away?
- Who is the page aimed at?
- What is the user trying to achieve on this page?
- What is the call to action for this page?
- How might the user have arrived on this page?
- What elements must appear on this page?
I must confess that I did slightly reduced this list for my own page descriptions. Instead I focused on three main things:
- What is the user trying to achieve on this page?
- What are the main calls to action?
- What elements must appear on this page?
However, even this stripped down version of the page description document proved incredibly useful. It made me think much more strategically about the role of pages rather than simply slapping content online because I felt somebody might be interested in it.
Once I had my page descriptions in place I was able to transform these into more meaningful wireframes.
Making the most of wireframes
For me wireframing is one of the most important steps in the web design process. It is where much of the thinking is done. By separating it out from the sites ‘design’ you ensure that the structure and visual hierarchy of pages are given the attention they deserve instead of taking a second place to aesthetics.
I was determined that each of the key pages on the site would be wireframed to ensure they were structured as carefully as possible. Unfortunately as I looked at the site this translated into more wireframes than I had to the time to address by myself.
I therefore decided to draft in help in the form of Leigh Howells, our UX specialist here at Headscape. Together we worked through each template using the page description as a basis for wireframing up the content.
Each wireframe focused on two things; helping users achieve their objectives and nudging them one step closer to completing a call to action.
As we worked we found our wireframes becoming more and more refined. Often this is not the case. Wireframes can be as simple as a quick sketch but occasionally they become as detailed as a full working prototype.
In our case the wireframes were becoming increasingly ‘designed’ as we strove to ensure the best user flow around pages. We used size, colour, typography, position and whitespace to draw the users eye where we wanted it to go. Even though the wireframes did not contain all of the final design elements we wanted them to become as effective a representation as possible. This was because I was keen to test how well they worked.
Testing your wireframes
Another reason that wireframes are so important is that they make a superb testing tool. Because they are relatively easy to create when compared to a final design, it means you can iterate through different versions based on user feedback.
As I write this I am still in the process of testing the wireframes we have. However, I have already tested one or two key pages using two different approaches.
First, I ran a simple memory test on verifyapp.com. The user was shown a wireframe for 5 seconds and then asked to recall as many screen elements as possible. This is a great way to establish whether key elements are as visually prominent as they should be to grab the users attention.
Ad-hoc usability testing
Second, I ran some ad-hoc, bargain basement, usability testing. I simply grabbed 5 or 6 random people and showed them the wireframes I had done. I asked a few simple questions checking to see if they ‘got’ what the page was about and what they would click on next if they were trying to complete certain key tasks.
I didn’t concern myself with the demographics of the people I was selecting or running the sessions in any kind of formal way. This was just a quick sanity check to get an outside perspective on the work I was doing.
People often complain that usability testing is time consuming and expensive. However, it doesn’t have to be. This simple ad-hoc testing is amazingly effective and ensures that the user is kept at the heart of your development process.
Also because it is so easy, you do it all the more often. As Steve Krug says in his book “Don’t make me think”, it is far more important to do multiple rounds of testing than it is to do a single round in a ‘super professional’ (my words) way. We spend far too long worrying about demographics, large numbers of test subjects and two way mirrors when we should be worrying about testing a little and often.
It always strikes me as strange the things people get obsessed with. Another example of this is your choice of wireframing tool.
What tool should I use for wireframing?
I didn’t feel I could finish this article without addressing the question ‘What wireframing tool should I use?’ To be honest it is not a question I want to answer. However, I know that if I don’t mention it people will ask anyway.
The thing is your choice of tool for wireframing really doesn’t matter and yet people seem to obsess over it.
The truth is you should pick a tool that you are most familiar and comfortable with. The tool should become invisible. If it slows you down in your idea generation you are using the wrong tool.
Some argue that pen and paper is the best wireframing tool, others prefer something like Flairbuilder or Balsamiq. Actually they all have their pros and cons. Take for example pen and paper. Its quick, easy and has the lowest barrier of entry (anybody can scribble a few boxes). However, it can also be difficult to revise and its hard to demonstrate interactive elements.
I regularly change my wireframing tool of choice depending on what I am trying to achieve and to some extent my mood! For this project I worked with Keynote because I wanted to have a fair degree of design control and yet not so much I ended up designing the finished site. I actually used the constraints of keynote to stop me getting too carried away.
Leigh on the other hand worked with Balsamiq because that is a tool he knows inside out. Ultimately it is down to personal taste.
Whatever tool you choose to use be sure not to skip the wireframing stage.
Never skip wireframing
As is often the case it has been at the wireframing stage that the new site has taken shape. After going through the wireframing exercise I am now confident that the site will work.
I was tempted to skip wireframing one or two pages I considered too obvious to bother with. I am glad I did not give into that temptation. Whenever I wireframe new things always occur to be that would be so easy to overlook when designing or coding. I believe wireframing is an invaluable phase that should never be skipped.