How to cut a monster website project down to size

posted in: websites | 0
Cover of 'I'm Coming To Get You' by Tony Ross
Cover of ‘I’m Coming To Get You’ by Tony Ross, a formative book from my childhood.

Overhauling your charity’s website can feel like a monster project. Huge. Scary. Hairy. But just like in picture book classic I’m Coming To Get You, getting a clear sense of scale can make all the difference.

The best way to stop yourself from feeling overwhelmed by the size and complexity of a website redesign is to break the project down into smaller parts and simple stages. Although you will end up with a long, long to-do list in front of you, it will make the whole thing feel much more manageable, I promise.

To help you get started, I’ve put together this quick list of example activities and things to think about. It’s intended as a rough guide, not a complete plan, and it’s flexible – you might do some things in a different order, or do more or less depending on the resources available.

 

A few important principles

1. Successful website development requires user centred design, which means:

  • using the needs and goals of website users as the starting point and not the needs and goals of the organisation
  • involving users in development through research and testing
  1. At every stage of the project it’s crucial to engage staff across the organisation and give them meaningful opportunities to contribute. As well as building buy-in and drawing on staff experience and expertise, a website redevelopment is a great opportunity to build digital skills and understanding.

Running alongside the activities below should ideally be a programme of engagement activities, which could include presentations, skills sessions, meetings, workshops, testing sessions, and a development blog.

You can bring in a digital agency or web developer to help you right from the start if you have the resources, or between the Understanding and Planning stages. Whether you simply discuss the project with a few agencies or run a full blown tender process, the important thing is to find people that you trust and adopt a collaborative approach.

 

Key steps for a successful website redesign

1. Understanding  Example activities
Understand how your website fits into your business plan and organisational strategy Internal consultation, develop digital vision and strategy.
Assess the external environment PESTLE analysis, seek best practice, identify relevant new trends and technologies, competitor analysis.
Get to know your audience User personas, surveys, focus groups, interviews, user testing, recruit customer board.
Evaluate your existing website’s performance Review analytics, user feedback, conversion rates, measure against external standards (e.g. usability, accessibility)
Review your content Review topics, style, quality, format, lifespan, performance, begin to identify user content needs.
Be clear about the aims of your website Define website goals and SMART objectives, identify priority audience.

 

2. Planning Example activities
Project plan Agree project team and roles, write project charter, project management approach (agile / waterfall / mix)
Set timeline Agree deadline and plot milestones.
Define budget Agree budget, key expenditure and contingency.
Choose platform Decide which programming language / content management system to use. Open source or proprietary?
Identify integrations Explore cost and feasibility of  integration with key software systems e.g. donor database, accounts software
Develop specification Write a detailed website specification covering website functionality, appearance, technical set up etc

 

3. Designing Example activities
Generate user stories Workshop to identify most important user stories (goals which users seek to accomplish).
Wireframes Produce a wireframe (simplified) version of page layouts.
Site architecture Decide major content blocks, website structure and key navigation paths.
Visual design Visual design process – mood board, concepts, feedback, iterations.
Content design Choosing which topics, style and format of content to create according to user needs, content review and strategy.
Process design Develop processes for updating and maintaining the site, creating and commissioning content, sign off, data management.

 

4. Building Example activities
Development Agency installs the content management system and builds the website, applying the visual design. Testing and feedback on each new feature as it is created.
Produce content Create content plan and schedule. Edit and repurpose existing content, develop or commission new content e.g. copy, graphics, video
Migrate content Add content to the new website. This will take longer than you think, and it will be more complicated than cutting and pasting. It might be worth bringing in a temp or volunteer to help you.

 

5. Testing Example activities
Alpha user testing Agency runs technical tests. User testing by staff, volunteers, friends, customer board etc
Beta user testing Make site available to the public in a limited way as a form of live user testing and a way to gather feedback e.g. share with supporters, option for website visitors to take a look
Technical testing Devices, browsers, bandwidth…
Process Test editorial system, train content editors how to use content management system (trust me, do it before you launch).

 

 6. Launch Example activities
Prepare for transition Final tests, set up URL redirects, list of other websites to inform
Make site live The developer will do this. Bear in mind it can take 24 hours for your new site to appear to everyone who visits your domain.
Post launch fixes Developer fixes any bugs which appear after launch. There are always some!

What’s a wireframe?

Jargon feeds the monster. Usually there are simple ideas lurking behind unfamiliar terms, and getting your head round them at the start will help make sure you and your website developer or digital agency understand each other. Remember they’ll need to learn your organisational jargon too.

Here’s a short list of useful web development terms and concepts which might be new to you:

User personas are fictional profiles of a ‘person’ who represents a cluster of real people who exhibit similar behavioural patterns in their decisions, reactions, and choices. Find out more. 

User needs are the goals of website users. Find out more.

Agile is a project management approach commonly used for digital projects which emphasises collaboration and user testing, and builds software incrementally from the start of the project, instead of trying to deliver it all at once near the end. Find out more.

User stories are a standard format for expressing a user need or goal. Find out more.

Wireframes or mockups are rough sketches which show the layout of key pages on the website. Find out more.

Content design is the process of choosing which information to show the user and how to present it to enable them to achieve their goal. Find out more.

User testing is when a website is tested by real users carrying out real tasks in realistic conditions. Find out more. 

Beta is testing phase which happens just before launch in which the website is made available to a limited number of users for ‘live’ testing. Find out more.

Over to you

I hope your website project is looming less large now. Remember you’re not alone, lots of people have tackled the same monster and will be happy to share their wisdom over a calming cup of tea if you reach out, myself included.

(If anyone would like to share their wisdom in the comments below, go for it.)

Leave a Reply