Tips for designing a website for your group, part 1: Planning

We know that designing, or redesigning, a website can be a scary task. But with time, some thought and a bit of creativity, almost anyone can produce a good website. If you can use Word or Facebook or Google, you can do this too!

In part one of our three-part guide on creating a website, we'll cover the important bit that often gets left out: planning!

We'll start by clarifying what you want from your website and what your potential users might want. Having used these to work out what you need to include in your website (your 'requirements'), we'll move on to which platform (i.e. tool) is best to use for building your site. Finally we'll look at how to work out which pages you need on your site and how they might fit together.

Part 1: Planning | Part 2: Design and copy | Part 3: Driving traffic to your website

We also know that funding can be hard to find, so in this guidance series we have specifically focused on things that should cost nothing or at most a minimal amount of money, although some may require your time to be invested!

Contents:

  1. STOP!
  2. Work out what you want
  3. Work out what your users need
  4. Work out your 'requirements'
  5. Know what you like
  6. Work out your structure (and do a chuck out!)
  7. Choose your platform (tools)

1. STOP!

This may seem like a perverse first principle, but one thing that is all too commonly missed out in work on websites, from the biggest to the smallest, is the first work you need to do.

The temptation is to jump in to creating the site. You know what’s wrong – it’s old, or it looks rubbish, or it’s slow, or it’s difficult to update.

Resist the temptation.

If you jump straight into putting things on a site now, you’ll most likely continue to have a lot of the problems that caused you to start this process in the first place. The better the foundations you lay at this point, the better the results you’ll get from all the following stages.

So… what do these foundations involve?

2. Work out what you want

First up, you need to work out clear objectives for your website: ‘we need a website because the old one is rubbish’ is not an objective!

Examples might include: driving more concert bookings, building a better relationship with repeat audiences or recruiting new members.

Try not to have too many different objectives here: if you have lots, try to distil them down into 3-5 primary ones, otherwise your website will lack focus because your reason for having it lacks focus!

Check that they are useful

Once you’ve put these down, it's worth double-checking that they are going to be really useful in helping you to make decisions about what to include and how.

Are they:

  • Specific: Vague objectives don’t work – get fit = fail; go to gym 3 times per week = win
  • Measurable: If there’s no way to measure your goal, you won’t know if you’re succeeding
  • Achievable: don’t set unrealistic goals!
  • Realistic: is it worth the time, is now the time to do it, does it fit the economic environment – helps to ensure people you need support from will help
  • Time-bound: set a target date or time period to ensure focus – if useful, break down targets into steps from now to the goal

Smashing Magazine has some good examples of objectives in action if you're not sure how to apply this.

3. Work out what your users need

Although you now have a clear picture of what you need your website for, your users will often have different needs. If you don't take these into account, you will likely find that your ticket sales, member recruitment, newsletter sign-ups etc. remain stubbornly low.

You: I want people to buy tickets to our concerts
User: I want to find out about concerts next week, in case there's something I might enjoy

These may seem like the same thing – the user needs to buy tickets; you need them to buy tickets – but actually you may need to provide them with help to make the decision to book your concert rather than doing something else instead (different concert/film/pub/etc.). 

You: I want people to enquire about joining our choir
User: I want to see if I'll enjoy being in this choir before I commit

Again, the ideal end result might be the same (joining the choir), but your users are looking for more than someone to email about joining - they need to understand what kind of experience singing in your choir offers and to be reassured that they will enjoy it.

As you can see, understanding your website users' needs can highlight content that you would otherwise not think of providing, so it's vital to spend some time getting these clear before you move on to deciding what to include (your website 'requirements').

Do some research about your users

Ultimately, you need to find out a bit about your users before you can put yourself in their shoes.

The easiest place to start is with your group, friends and family. Ask people what made them come to your concert, why they joined your group, what they are interested in about you.

Second, think about demographics. What characteristics are common to your potential users (age, gender, income, ethnicity, location etc.)? Behavioural patterns can also be a useful thing to consider, e.g. frequent attenders vs once-a-year vs walk-ins.

Third – think about your users’ attitudes. Arts Council England commissioned a report, Arts Audiences: Insight, that provides insight into the patterns of arts consumption and attitudes towards the arts, how people spend their leisure time and what competes with the arts for people’s attention.

A section from the Arts Audience - Insight document

Turn that research into pen portraits 

Once you’ve done this research, it's a good idea to write 3-4 brief 'pen portraits' that will start to bring your potential users to life.

These are descriptions of imaginary individuals who represent different key users: their interests, motivations, technological literacy and so on. Try to make these as if you were describing a real-life character. The more you do so, the more easy it will be to hop in to their shoes at the next stage to work out what they want or need!...

E.g. 

Sharon - retired, but just as busy as ever!

Sharon, 67, has recently retired from her job in hospital administration. She is enjoying having spare time for the first time in years but isn't interested in slowing down. Instead she is throwing herself into volunteering with the National Trust during the week, walks with her husband Jim, pottery (a new-found love) and spending time with her friends, family and young grandchildren (who she looks after most Saturdays) at the weekend.

She has always been reasonably comfortable with computers (using them for admin at work), but an iPad given to her for Christmas last year has got her hooked on social media (especially Facebook for sharing her friends' and family's photos) and she often browses YouTube for music in the evenings and downloads radio programmes from BBC iPlayer to listen to while she works on her pottery.

She thought about joining the choir at the local church (she and Jim went to the Christmas carols last year), but she doesn't see herself as the right kind of person for it: she hasn't sung since she was at school, and doesn't know if she would fit in, or find the time amongst everything else!

Now that you have your pen portraits to help you see your users' point-of-view, you can move on to working out what your website needs to contain.

Resources:

Sources of data on audience segments

Tools for getting feedback

For making pen portraits

4. Work out your 'requirements'

Once you know what your users need from your website, you can turn these into your website 'requirements' - the building blocks (both content and functionality) of you website.

Return to your objectives and, using your pen portraits, make a list of all the things that 'you' (as each type of user) would need in order to do what you (the group) want them to.

Returning to our earlier example:

You: I want people to buy tickets to our concerts
User: I want to find out about concerts next week, in case there's something I might enjoy

Our requirements here need to include not only content that will make the booking process simple ('I want to find out about concerts next week'), but also that will help your user know that they will enjoy the concert ('in case there's something I might enjoy').

So on the practical side you might have:

  • Information about concerts, pricing, discounts, ability to view by date/calendar, online booking on the event page

...and also some supplementary information to help them make the decision:

  • interesting information about the theme or composer, previous concerts media (photos/videos/audio), snippets of favourable reviews or mentions of any awards

And so on.

Likewise, for our second example:

You: I want people to enquire about joining our choir
User: I want to see if I'll enjoy being in this choir before I commit

Our requirements here need to include information about how to join but also, crucially, that will reassure the user that they will enjoy it ('to see if I'll enjoy being in this choir').

So on the practical side you might have:

  • Information about the choir and its approach, rehearsal times and frequencies, subs pricing (including any discounts), information about auditions and/or the joining process (if applicable), contact details

...and also:

  • A mention of why/how new members are welcomed (buddy schemes, mentoring, personal lessons), a quote from a member about why they love being part of it, images/videos of the group having fun!

And so on.

Once you have worked out the requirements that correspond to each of your website objectives for each of your user types (personas), you should have a pretty good shopping list to help you choose your platform (tool) and plan your structure (see below).

5. Know what you like

Just before you move on to looking at the different platforms for building your website, it's a good idea to use what others have already done to check you aren't missing anything from your requirements and to see what you think works (and what doesn't).

Take a good look around the internet at other websites, trying to keep in mind how easy (or not) it would be for your users to find what they need on these. Don't just look at your competitors - look at other websites, even ones that have nothing to do with your sector.

A moodboard of websites

Write a list of websites with notes about what you liked/didn't like.

E.g.

Website Like Dislike
http://www.voces8.com
  • Lots of audio and videos to watch
  • Easy to find things
  • Not very colourful - grey and bland
http://www.multi-story.org.uk
  • Simple layout
  • Too much/too long text content
http://www.bfi.org.uk
  • Simple navigation options
  • Tailored options for mobile version
  • Lots of competing messages/fonts
http://www.barbershop.org
  • Slider on homepage
  • Passionate tone of voice
  • Too much choice in content/navigation options - overwhelming
Etc.    

This process will help you get a clearer picture in your head about the common factors that you think work well as you go on to plan your website's structure in the next steps.

Resources:

6. Work out your structure and do a chuck out!

A website with a confusing structure is a disaster. Your navigation (the links to main pages that usually sit at the top of the website) needs to guide your visitors along each stage of their journey (without it they won't find what they're looking for and will give up) - it should be intuitive and easy to use.

The BBC Music website main navigation

Revisit your old website information architecture (the way that your content is structured and laid out). Quite often you will find that there is content that serves no useful purpose, or that is less important getting in the way of the things that your users really need. So how can you avoid making that mistake this time?

Try 'Card Sorting'

One exercise that is used a lot in web development for working out structures (and that we used to re-structure the Making Music site) is card sorting.

  • Take all your requirements and write them on post-it notes or cards.
  • Start to group them together into related categories.

When you have no more than 4-5 groups or categories (some might be standalone categories with only one item – e.g. news), treat these as your primary navigation items. E.g.

About us | Concerts | Join us | Videos | Members area

Pretend that you are one of your pen portrait characters, arriving on your site with a particular goal, and see if it’s easy and quick for them to make a logical choice of which category/section to look in.

If not, re-think the categories.

E.g. in the example navigation above, you could leave out 'Join us' (and instead put this content within your 'About us' section), but might people wanting to find out about joining be confused about whether to look in 'About us' or 'Members area'?

If it is easy and quick for them to make that first choice, sort the items within each category (into items or further subgroups if necessary) and repeat the exercise. You should end up with a pretty clear grouping that provides the map of your website’s structure, and you should be able to take any one of your pen portrait characters and be confident that:

  • they can tell (at each stage/page on the journey) where to go 
  • there is nothing in the options/choices/structure that will confuse them on the way 
  • you have identified and included anything missing that they need to be nudged in the right direction

You can then be confident that you are providing all that your users need, whether that is for attending a concert or paying their member subscriptions. Now you're ready to move on to picking a platform for building your site.

Resources:

7. Choose your platform

10 years ago building a website usually meant starting from scratch and using complex codes that took a lot of time to learn and were tricky to master. But don't worry - this isn't true anymore!

Now you can use a content management system (CMS) instead. This is a user-friendly platform for building websites and managing content in much the same way that you might use Word to write a document (e.g. below is a view of a Wordpress CMS).

A view of the Wordpress admin interface for updating content

This has two very big advantages:

  • It saves a lot of time and effort in setting up your website
  • It doesn't require an expert to make updates, so anyone in your group can update information at any time 

Which should I choose?

The main types are:

  • 'Open Source': these are free CMS tools, available to anyone to use, and with lots of added extras that can be enabled.
  • 'Serviced': these are provided by companies in return for a regular payment

Although there are lots of different options to choose from, we think the best of each type are Wordpress.org and Wix.com. The table below can help you decide which is right for you.

  Wordpress.org Wix.com
Cost of CMS Free From £7/month (if you want it to appear on your choice of web address)
Layouts and design options included? 2-3 default options, 50,000+ others available from £0-£60 500+
Ease of use Quite simple (like Word) but takes a bit of getting used to Very easy (drag-and-drop style).
Flexibility (functionality, layout) Huge Reasonable
Free add-ons for special functionality 30,000+ 200+
Separate 'hosting' required? Yes (from c£2/month) No
Support via Online community Online customer support
Can include members-only area? Yes (through free plugin) Yes
Can have an online shop? Yes (via paid-for plugin) Yes (for more expensive packages)

If you choose an 'Open Source' system:

  • make sure you are good at following written instructions and using forums for finding answers (although these platforms can usually be installed in 5-10 minutes, since there is no 'customer services' line you will need to be a little self-reliant and willing to experiment if you hit any problems)
  • remember that you will need to set up 'hosting' - i.e. a place for your website files to live (it's usually simplest to do this through the same company that you bought your domain from)
  • shop around for templates (these usually come with free default templates, but if you want something snazzier or more tailored to your needs, there are tens of thousands of excellent templates (often called 'themes') that you can get free, or buy and use for a one-off fee of c£20-50).
  • check the plug-ins (these all have large numbers of available add-ons for your site, often for free, that can provide extra functionality, e.g. email signups, members-only areas, online shopping etc.)

If you choose a 'serviced' system:

  • always check for 'hidden' charges (sometimes these can be variable dependent on whether you want the website to appear on your own domain)
  • look at what other users have produced using them - do they work well? Sometimes templates that look amazing at the start become much less attractive when you put real content in them (e.g. where design decisions have been made based on pretty stock imagery that you have to replace with your own)
  • check to make sure that the functionality you need is included (e.g. online booking, private area for members etc.)
  • 'try before you buy' (often you can use a free trial period or free version to test out how the system works and what things look like when your own content is in place - it's worth doing this before you commit to ongoing charges)

Whichever route you choose, make sure that you’ve looked at examples of sites that use that platform, and double-check that any key functionality (like booking tickets, or paying subs) is covered either by the standard functionality, or (quite often) by an add-on or plug-in.

What if you're paying a professional to build it?

Even if a professional is building your website, it is a good idea to ensure that they use a CMS. Otherwise, you will find it difficult to update your content in the future without paying them to help (and if they decide not to support you any more or you get into a disagreement, you will be stuck!)

Also:

  • always ask for/look at examples of their work
  • be very clear about what is and isn't included in the work you are paying for (e.g. training, ongoing updates, numbers of rounds of design feedback)
  • find out about their availability (often they will be juggling multiple projects, so make sure they realistically have time for yours if you have a deadline to keep to)
  • ask them about their approach to mobile users/responsive design (see part 2), search engine optimisation (see part 3) and accessibility.

Resources:

Now you have worked out the content and functionality that your website has to have, the structure that will be most useful for users and what platform you're going to use to build it. Now you're ready for part 2: working out your design and copy...

Part 2: Designing your website and copy

Part 3: Driving traffic to your website


We hope you find this Making Music resource useful. If you have any comments or suggestions about the guidance please contact us. Whilst every effort is made to ensure that the content of this guidance is accurate and up to date, Making Music do not warrant, nor accept any liability or responsibility for the completeness or accuracy of the content, or for any loss which may arise from reliance on the information contained in it.