1. Introduction

Understanding where to start when building a new website can be a confusing and challenging process. Often, well-meaning colleagues, board members or volunteers will immediately jump into action, all very excited into the ‘how will it look?’ and ‘what will it do?’ stages. They will show you great designs and editing software, some will even start sketching it out whilst others dream of functionality that only large organisations can afford. You soon discover that building a new website can be quite a political process where everyone has a different perspective.

Thankfully, there is a process to adopt that many agencies and consultants use that helps you steer everyone in the right direction and ensure you get the best possible new website for your heritage organisation. This is a practical resource based on a well-tested roadmap which gives you series of checklists and worksheets to help you build (or rebuild) a website.

One of the big questions is do-it-yourself or employ a web developer or agency? This is difficult to answer as it depends on your team, time, budget and the functionality you need. You may not have the budget to afford an agency, but the good news is that you can get the most out of your budget through careful planning.

This resource will help you decide how much of your organisation’s website you can build yourself and at what point you may need additional support from a web developer or designer.

This resource is to help you:

• Evaluate where you are now and where you need to go
• Help you discover what functionality you need to be thinking about
• Create a roadmap for building your website
• Decide how much you can do yourself and where you may need to budget for additional support

The aim is to leave you with a straight-forward plan to start building your new website.

2. Audience journey research

Put some time aside for some research before you plan your website build. Often this stage is missing, however, it is important for you to have criteria in place to avoid a website build from being hijacked by stakeholders. At this stage you may find starting a website is more about the people than the technology. Give yourself a reasonable timetable for research but avoid it becoming a procrastination exercise.

The resource ‘Identifying your audience journeys‘ will take you through a process to identify your key online audiences and their journeys. It is highly recommended you complete this resource before resuming this current resource.

Please note that when we use the term ‘audience’, in this context it means a segment of your users, visitors or customers. An audience is a group of people that share common characteristics.

3. Your team and organisation

a. Digital skills – you and your team

What skills do you and your team have? How much effort (really!) are you willing to put into the website build? Do you know your way around WordPress, could you learn? Or would you rather have something quicker like SquareSpace or Wix? This exercise will hopefully identify gaps that you can fill using paid professionals. Do you think with a little training you could achieve more and save money doing more yourself?

You may have an enthusiastic volunteer who ‘does websites for fun’ and wants to do yours for free. It is important to step back when you start thinking about a new website and assess what you need and who should be helping you. Often that volunteer really does not have the professional skills you require, or they will take forever and you find you have no means to speed them up. If you are considering taking on a volunteer, hold on, finish your plan, and then go through the specifications and criteria with the volunteer to gauge how much they could do. A good approach is to ask them about what they will do on the website to follow the accessibility standards and gauge their response.

b. Governance

What are your organisation’s vision, mission and values? If these do not exist, you need to question why. Without these you cannot ascertain what your organisation needs from a website nor brief designers and developers. Do you strive to be accessible to everyone, encourage inclusive dialogues and work towards carbon net zero? What are your organisation’s accessibility and sustainability policies? Again, if these are lacking it would be good to get some guidance from the CEO/Chair/Board of Trustees as to what your organisation’s position is regards accessibility and sustainability (and this needs to go on the website too).

Accessing your position on accessibility, inclusion and sustainability is very important as it will play a big role in which website platform you choose. Wix has accessibility features built into any site you create for example: https://www.wix.com/accessibility however they do not rank as high for sustainability (using servers run on renewable energy).

4. Audit your current website

a. Website accessibility

Do you have a legal requirement to make your website accessible? Since 2018, any majority public-funded organisations are required by law to meet a standard called Web Content Accessibility Guidelines (WCAG) 2.1 Level:AA.

Before you start your new website, its useful to know where you are now so you can make the necessary changes. Visit the resource How can I improve my website to make it more user friendly, accessible and fit for purpose to do an accessibility audit of your current website.

b. Carbon calculator and sustainability

Websites can use a lot of energy and count towards your organisation’s carbon footprint. Downloading large file sizes and making dynamic webpages takes more energy than simple static pages.

Run your current website through the Website Carbon Calculator: https://www.websitecarbon.com/

Do you get a ‘hurray, your website is better than..’ or a ‘Uh oh! This web page is dirtier than…’

If your current website does well then you may need to question why? What elements of your website are working and how can you carry them into your new website.

c. Core web vitals

Core web vitals are Google’s measure of a user’s experience of your website. They score how easy your web pages are to load and how stable they are. If you have a pages with large images or lots of unneeded code they will slow down the loading time.

The score you have now is important and may impact how you decide to start a new website. Check out a selection of your web pages by putting your URLs here: https://pagespeed.web.dev/

Have you passed or failed? Have a look at your performance score by scrolling down the page to the ‘Diagnose performance issues’ section.

If your score is over 50 then you have some serious thinking to do. Your current website is doing well and building a new website may well affect this score. If you’ve failed, then a new website or rebuild is a priority.

Why are core web vitals so important?

Since June 2021, Google has put page experience, measured using core web vitals, into the overall search algorithm. Data currently suggests that sites with poor scores are being penalised and thus search engine optimisation is becoming an issue. Also, low scores indicate that your site may not be very inclusive or accessible for everyone. For example, if your pages take a long time to load, that indicates they have large file sizes and this will impact people on mobile devices who pay for that data.

If your site currently does well, your new website may make things worse. Often older websites are leaner, they have less graphics, simpler code that make them inherently better performers on pagespeed scores. In your website plan you’ll need to schedule testing for pagespeed testing throughout the build.

d. New requirements

Does your organisation have any new requirements for the website? New online exhibitions or courses for example? Make these new requirements audience-focused, e.g. a new online exhibition space to attract people who cannot visit the museum and engage current visitors.

5. Competitor research

It is called ‘competitor research’, however, we are looking for great ideas that your colleagues have implemented for other heritage organisations. Have a look at the websites of organisations which are like yours and also websites you really like. You do not need to reinvent the wheel and a lot can be gained by looking at what other people are doing. Make it a practical exercise to keep focus.

Step 1

Step 2

Similar websites also give you excellent information about audience journeys.

Search for each organisation using Google. Hopefully under the homepage will be a list of site links, these are the most popular landing pages on the site.

For each website, list the landing pages. Do not forget the homepage. Find the top 3 to 5 calls to action for each page. A call to action is a prominent link or button that catches your attention. Many museums have a prominent ‘Plan your visit’ link as the first thing you see. This could be followed by a ‘Book online’ link and then the most current exhibition.

Also explore the menu of each site (ignoring the home page). This also gives an indication of the most popular audience journeys.

Can you identify patterns between the two worksheets? Can you find examples of specific online audiences and their journeys.

6. Your new website objectives

What do you want to achieve? Your objectives will be based around the audience journeys you identified and your new requirements. Importantly these are audience-centred goals rather than organisation-centred goals such as ‘we want a new design’ and ‘we want an easier to manage website’. Instead, you are first focusing on your users.

For example, a new website which will:

• Attract a new younger audience to the online exhibition spaces
• Enable the museum to engage existing visitors by offering a range of resources to explore
• Offer online booking for exhibitions and events
• Position the museum to attract funders and sponsors through case studies and testimonials
• Increase event sales through integrated shop and email newsletter
• Help people find out about our organisation and offer engaging content
• Offer new membership packages and a members area

Then for each goal, list what you will need to achieve it – your requirements. At this point do not think about budgets – so put in everything you can think of, this is your ‘wish list’.

At this point you’ve hopefully listed everything you need. You can use this checklist to ensure that nothing has been forgotten:

Requirements checklist

• • In-site search
  • Login
  • Menus
  • Blog or news
  • Video library
  • Photo gallery
  • Resource/knowledge hub
  • Contact form
  • Newsletter signup form
  • Captcha
  • Event calendar
  • Event booking
  • Membership purchase
  • Members area
  • Donations
  • Social sharing tools
  • Location map
  • Breadcrumb navigation
  • Reviews
  • Testimonials
  • Comments
  • Discussion forum
  • Online chat (chatbot)
  • pppTemplate for FAQs (e.g. accordion layout)
  • Mobile layouts/responsive
  • Ecommerce integration
  • Ecommerce/booking system
  • Footer links

Compile all your requirements into one wish list and remove any duplicates.

For each requirement give it a priority. 1 = Must have, 2= Nice to have , 3= Could leave it out

Now think about your criteria. These are based on your research of your organisation’s policies such as accessibility and sustainability.

Now you know what you want but not necessarily how to go about doing it!

At this point you are ready to put your brief together, you have all in the information you need. Even if you are not using an agency or developer, it is a good idea to do this so you can circulate to stakeholders before starting your website build plan.

7. Putting your plan together

There is a lot to do in this stage. It does look like a lot of work and it probably feels like it would be better to just go ahead and start the website build. However, planning is absolutely vital, when this stage is left out many mishaps can occur!

a. Website brief

You should now have the information to put your website brief together. It it is worth doing this even if it just for you. The budget decisions made now will affect choice of website builder/content management system which we will discuss later.

Your brief needs to include:

• About you (the organisation and the team)
• Objectives for your new website
• Your audiences and how they will use your site
• Your requirements list
• Your criteria list
• Similar websites you like (and details of what you like)
• Design – your branding guidelines and other websites you like
• Budget and timescale

b. Your action plan

This is your roadmap and will help you: reduce costs, keep on schedule and plan where you may need to allocate budget hiring professional help. The more planning you can do upfront the more you will save on expensive agency/development time.

c. Who is the project manager?

Save your budget and appoint yourself or someone on your team as project manager. They will become like a contractor and hire the professionals only when you need them.

The project manager needs to be someone who can keep things moving, who can make decisions – and has the authority to do so. It is no good giving this role to someone who doesn’t like asking managers and trustees to get a move on! The project manager can delegate most of the work, their role is to keep the website project moving with regular update meetings for everyone involved to report back on progress.

Decide:

• Who is doing which tasks
• Who else is involved and what are their responsibilities? Such as creating new content
• Who needs to approve the website? At what stages are approvals needed?
• Timescale? Soft and hard go live dates?

d. Planning your timeline

Using an excel spreadsheet, Gant chart or online service such as Trello, create a timeline for the new website build. This is clear plan of who is doing what and when.

Now you’re ready to take that wish list and turn it into a specifications list. You need to have a look at what you already have in place and how that new wish list will fit in. Can you adapt what you have already, or do you need something completely new?

e. Your existing systems

You will probably have a range of things already in place that you want to change or keep as part of the new website build. This could be your website content management system itself, your customer database, email provider such as Mailchimp, your booking/ticketing system such as Spektrix or Eventbrite.

Content plan

It’s good to think about your content early on as it can make a difference which CMS or website builder you use. If you find that you are going to need to create a lot of new content you will need to build that into your build timescale. Your objectives, online audience and their journeys will help you think about your new content plan.

A useful exercise is content mapping. This will identify what you need to keep, what can go and any new content you need.

Content management system (CMS)

The content management system (CMS) is at the core of your website and selecting it is your biggest decision in this plan. A CMS can be anything that enables you to create and build a website so includes things like the Wix and SquareSpace website builders. Are you planning to keep or replace your CMS? How can you evaluate whether it needs to go or not? You may have already decided that you want to replace it but has that been a rational decision or because your team struggles with what you have?

Website content management system checklist

Think about your current CMS. What functionality does it have, what works, what does not? Go through your wish list and check it can do all priority 1 and 2 tasks.

Status: 1 = good, 2 = we can live with it, 3 = we need something else

This list is not exhaustive, a few ideas to get you started (please delete what you do not need). Have a think about anything else you need.

You will find that you can draw out even more specific requirements using this worksheet. Be as detailed as you can, note down everything, including all the little niggles such as not being able to edit something or get a certain type of report. You may find that you also will be thinking about issues on connected systems like your contact database, email provider or ticketing system – write these down too. You will know these items as these are the things that bug you every day!

For example, when adding new contacts only allow one email per contact, how to get a list of attendees, list current members, be able to get a sales report, buy membership online, buy events online, automated membership renewals, allow membership subscriptions etc.

Looking at your worksheet, does it look like you can keep your current CMS or should you be thinking about alternatives?

If you’re thinking about alternatives, now is the time to do some research and look what is available. Do not assume website builders like Wix and Squarespace do not have the functionality you need – you may be surprised. They can run well off excel spreadsheets and convert them into databases and dynamic pages.

There are thousands of CMSs, however the best bet is to look at the list below. These are the most popular and offer you good website building experiences. They also will have more developers that can help you. If you know HTML and are tempted to build a static HTML site please do not be tempted, better to go with a CMS and then put your skills to good use inside that.

Source: W3Techs

If you have a small budget and not much time, you should probably prioritise your research on the top four. Set up free test accounts and try them out. Using your wish list and criteria list check what each one can offer you. Look at the resource: WordPress, Wix or Squarespace?

Customer relationship management system/contact database/email provider

Many smaller organisations choose to manage their contacts using an email provider such as MailChimp or Klaviyo. This makes things pretty straightforward because:

• You have all your contact data in the same place
• You and your visitors are protected – the leading providers have GDPR in place (for more info on GDPR look at this resource)
• They integrate with your website to collect new data

However, if you are selling something such as events or accepting donations then your contact database needs are going to expand beyond an email provider. This is because you will be using another system in addition to your email provider.

The simplest solution is to choose an all-in-one service such as Shopify, Wix or Squarespace who offer a CMS, email marketing solution plus ecommerce. You could also choose WordPress and then a plugin to integrate with your ecommerce and/or email provider.

If you think WordPress offers you the best CMS and you need to think about ecommerce integration (to sell events, memberships etc) then you may want to put some budget aside to consult a web developer to install something like Woocommerce.

Finally, you may have a more complex CRM such as Salesforce or Blackbaud’s Raisers Edge – where integration between the website -ecommerce-email marketing is more complicated. You would probably need to engage a web developer to help with the integration.

 Events/bookings/ticketing/membership system

If you’re using Wix or Squarespace you have the benefit of an integrated shop to sell events and membership.

Many smaller organisations choose a third party provider like Ticketsource or Spektrix. These can be integrated with your website with embed codes. You could choose WordPress and then integrate with Ticketsource or Eventbrite for example.

Payment providers and accounts

It is worth checking what accounting software your organisation uses and whether you need to work with certain payment providers like Paypal, Stripe or Worldpay.  You may find you need to integrate with Xero or Quickbooks and some ecommerce systems/CMS do this better than others.

Adapt your existing site or build a new one?

Often people talk about a new website as a completely new creation rather than something that is adapted from its current form. If you already have a website, it could be that you just want to change the look but keep the backend. Or you may want to change everything.

We need to be careful about throwing out old websites just because of design or functionality changes. It is good not to approach your website build with the mentality that you’re ‘getting rid’ and ‘getting something new’. It could be that changes are needed on the new website such as a new design and some new functionality on top of your existing system. You could put in a new inclusive design on your existing site without changing the backend/CMS and also put in a good page editor on the backend, so editors can add content.

If you score well for accessibility and SEO it could because your website is quite plain and you’ve established good search ranking. You do need to ask if you want to keep that? If you move ahead with a new website that has large image headers, great design and an excellent page builder it may make your team and management happier, but will it actually achieve the real purpose?  The results of the worksheets on the resource are hard data to show your team and stakeholders.

8. Wireframe

After you’ve completed your planning it is very tempting to jump straight to designs and a build.

This is a crucial stage which is often ignored, however good agencies would never miss this out. Test out your ideas before you start spending your budget on agencies, designers and developers. It will save you a lot of money and time.

Building your own wireframes and prototypes may sound scary but in fact it can be done using tools such as Lucidchart. Go to https://lucid.app/ and search for ‘wireframe’ (many of these are in the premium account you need to pay for but its not expensive to just use it for a month or so).

Here’s an example of a wireframe you can build using your website brief:

Importantly you are thinking about structure and content as well as accessibility features.

Once you have the wireframes put some audience journeys together based on the results of your research.  Audience journey maps are useful tools for this:

Again, Lucidchart is a great place to go and get a template, search in Lucidchart for ‘customer journey map’. The idea is to start with a blank audience journey sheet, put in the persona or audience you identified during the research and do that journey as that persona or audience. For each stage of their journey e.g. arrives on homepage, clicks to about page, books event etc you put in the touchpoints (things the user can interact with on your wireframe) such as clicks link on menu, or clicks call to action button. Think about how that person will feel and react at each stage, is it difficult to find on your wireframe, have you missed out something like a search? After going through the wireframes for each of your personas and scenarios you may need to go back and change those wireframes.

If you need to do that, then you’ve done an excellent job and saved yourself a lot of time. These issues are usually discovered after the website build, and all you’ve done is a wireframing and user tests to find this out.

9. The design

Do you use a quick off-the-shelf design on Wix, SquareSpace or WordPress or would you rather have something designed for you? Having it designed is preferable as you get exactly what you want and you can then get the design made into a template or theme for your CMS.

This decision depends on the platform you choose– if you’re on Wix or Squarespace you could just choose a template and off you go. You will need to put your brand colours in but apart from that there’s no design cost.  If you choose WordPress then again you can go with a ready-made starter site and put your brand colours in.

So when do you need a designer? When you’re using WordPress or Drupal and you really want the design to follow specific branding guidelines or you do not want to use an off-the-shelf design, you want something really good that matches your brief exactly.

You could ask an agency or developer to do both the design and build but that can get expensive (especially with the former). A good way forward is to split this, give the design brief to a designer (or inclusive designer) who then supplies you with the templates and a storyboard, which along with your specifications you give to a web developer. Employing two separate freelancers can be a lot cheaper if you need to go down this route. Your web developer will probably be happier to work this way.

Keep your design budget as low as you can (£150 – £1000). If it is a low budget then you’re looking for a one page design but with all the functional elements included e.g. header, menu, footer, text layout, lists layout, forms layout, images etc. If you have a little more to spend, ask for a storyboard with 3 – 5 pages, showing you the homepage, a landing page, a listings page (like news or events), an online booking page (showing how input fields and buttons look). Ensure you employ a freelance designer who knows about inclusive design and accessibility. (see accessibility resource)

If you are using a designer, now it is time for the design brief. If you do not have the budget for a designer, still write yourself a short brief so you know what you’re looking for on the ready-made templates.

If you’re on a tight budget you could pay a designer just for a few template ideas.

Whatever you do, do not send your designer the wireframes and prototype. Often the designs that come back match your wireframe layout (which was never meant to be a layout!). Describe what is on your wireframes instead, list the different sections and their relative importance on the page.

Give your designer an idea of your content plan, how you will be structuring content (they may come back with quick jump menu ideas).

Adopting inclusive design: putting people first

If you can work with your designer using annotated templates or storyboards. The Figma A11y annotation kit: https://www.figma.com/community/file/953682768192596304

Is a good example of how you could work. The idea is that the designs clearly show accessibility features such as focus states, semantic structure, colour contrasts, consistent design patterns, prioritising content. For more info about this, check out this resource… and this one:

https://inclusivedesignprinciples.org/

I have the design, now what?

Ask for stakeholder approval. Ensure you have a signoff from all interested parties before going any further.

Ask your designer to supply a storyboard if they can or create your own using a great online tool called redpen.  This tool allows you to upload each design into a nice looking storyboard which you can then email people with an access link. People can then make comments directly on the storyboard.

When you get the design back, check with the developer that they can they use it and is there anything that needs to change. At this point it is much cheaper to send the design back to the designer than ask the developer to try and create templates that workaround issues.  It maybe that the designer has used a layout that really does not convert well on a mobile for example.

Choosing a theme

Now you have a design you can choose a website theme or template. If you’ve chosen a starter template or site in Wix, Squarespace or WordPress this is your theme. If you are hiring a developer on a WordPress or Drupal build then you may want them to adapt a theme rather than create a new one (which is a lot more expensive). WordPress developers can adapt a ready-made theme and overlay your new design, they will change the theme templates for this. There are thousands of WordPress themes and some are better than others. You may find really impressive ones that let you do everything you want to on your website however they may slow your website down and have accessibility issues. Make sure that once you have added your theme you run accessibility and pagespeed tests (see earlier on). Some WordPress themes which are particularly good and lightweight are: GeneratePress, Kadence and Astra.

10. Prototype

You have approval, everyone likes the designs…

Again, you might be tempted to start building, but if you can hold on, now is the time for the biggest time and money saver of the whole project.

Using your design and wireframes build a prototype for user testing. Prototypes sound a little scary but they are not. It is a way to build your website for testing without actually building it! This is the stage to get real people involved, including some testers.

Try using some simple web-based tools to help with this such as https://draftium.com/  or https://proto.io/  . Using your design and wireframes use these tools to build a clickable prototype website. Make sure you have some content (generated from your content plan) to put on at this stage.

Find some people to test. If you can, these people will represent your online audience types from your research. You need a maximum of five people. Set them a simple series of tasks based on your audience journeys and ask your testers to do each task such as find an exhibition, book an event or signup to the newsletter. Record how they feel about using the prototype and any issues. Get some feedback on the design too.

If they are no changes, great, however you may find you need to make design alterations so do keep a small budget back for the designer. After you get the new designs back get a final approval from your stakeholders using a storyboard. You can feedback the results of the user testing too. This can be very useful if the stakeholders do not like particular elements of the new website. Also, do not forget to use your criteria list (sustainability and accessibility in particular) to explain why you have made some decisions.

11. Conclusion

Now you have a project manager, a plan, an approved design, website brief and prototype. You have identified your online audiences and tested their journeys on a prototype.

Importantly you have decided what do you yourself and when to bring in some help.

You’re ready to start your website build.

Good luck!

More help here

Video: How to build a WordPress website

A good understanding of how to build a WordPress website will help you decide how much of your organisation’s website you can build yourself and at what point you might need additional support from a web developer. In this online masterclass recording, Paul Blundell shows you how to set up a WordPress website from scratch and takes you on a journey through the dashboard and the different elements and functions that you can utilise as you build or rebuild your organisation’s website.

 

How to improve your website to make it more user friendly, accessible and fit for purpose

How can you engage all your users and give everyone the best experience? Do you want to make your website accessible to people with disabilities and comply with the current legislation? How can you make sure that your website is offering the best user experience? In this practical resource, Paul Blundell gives you the tools to audit your website and fix any issues you may find.

 

How to identify audience journeys on your website

Identifying your audience journeys will give you important information to be able to upgrade or build a new website. It will also help with your digital marketing strategy. In this practical guide Paul Blundell takes you through a sequence of steps to build a clear picture of your audiences.

 

Except where noted and excluding company and organisation logos this work is shared under a Creative Commons Attribution 4.0 (CC BY 4.0) Licence

Please attribute as: "Where to start when building a new website for your heritage organisation (2022) by Paul Blundell supported by The National Lottery Heritage Fund, licensed under CC BY 4.0