Head of Digital
Posted on April 15, 2016
Beginning to design and develop a new website is always exciting. No doubt you and your team will be buzzing with ideas and enthusiasm and raring to go, but with a new site, it never pays to go speeding off too soon.
In our five-step guide, we’ll help you navigate your website project smoothly and calmly, tackling problems before they arise, and hopefully avoiding a fair few altogether.
Don't miss next week's blog!
No spam, just great articles written for financial marketers by financial marketers.
1. Getting it right from the beginning
Every successful web design project has, at its core, a High-Level Requirements Capture. Every other step of your project will be dependent upon the outcome of this stage, so it’s crucial to do it well.
It hinges around asking the right questions:
- What is the purpose of the website? Is there more than one purpose? Do you want to drive sales, support existing customers, improve an offline process, or something else?
- Who are the stakeholders for this project and what does each one need from the website?
- How does the website fit into the short, mid and long-term objectives of the marketing team and the wider business?
- What will make (or not make) the project a success? How will you measure this?
Each question will lead to more questions. Keep following them through until you can see the full scope of the project. Once you can see where multiple needs and requirements exist, you can begin to prioritise them.
Developing a sitemap
Now’s the time to begin developing a website structure/sitemap.
The highest priority needs and requirements you’ve identified will help you to create key sections; then each section can be built up with supporting pages.
Don’t be tempted to try and make a page meet too many needs at once or you risk diluting your messaging and confusing visitors. Each page within your website should have one clear purpose or message, or at the most, two.
Identifying key features
On your sitemap, begin to group similar pages together which share the same purpose, for example, your financial products pages.
Wireframing provides an invaluable tool for communicating ideas and will save you a lot of time later. We use Balsamiq to sketch out the key page groups and the key features of each page. Groups of pages can likely share the same structure, with just the content varying each time.
The idea at this stage is NOT to create a design. Wireframing is used solely to plan components of each page and groups of pages. Then work out how pages could complement each other, and identify where different features might need to go.
2. Digging deeper
By now, you should have a firm grasp of the overall website objectives and how these fit with stakeholders and your marketing strategy. You should also have sketched out a draft sitemap and wireframes for the main website pages. So where do you go next?
This is where a Low-Level Requirements Analysis comes in. During this stage, you will need to take what you’ve worked on so far and drill down into a lower level of detail.
The easiest way to do this is to split it up into the following steps:
Create a functional specification
To create a functional specification that will meet needs creatively and is achievable, digital developers must be involved by this stage, whatever the usual protocol. You need their expertise and vision, or you’ll likely hit problems later.
Your website functional specification should include:
- A description of each component in your wireframes and its functionality
- Which browsers (and versions) the website is expected to work on
- Where the website will be hosted
- Any external systems that the website will need to link to (e.g. CRM)
- How the website will be tested
Create a project document
Your project document should describe everything to do with your new website – it’s your project’s living, breathing form on paper. There are no set rules for how this is laid out, but make sure everyone in the project team can easily understand every aspect.
It should always include:
a. Timescales (that are realistic!)
b. Details of any:
iii. Risks and how you plan to address them
Check for any gaps
Now it’s time to check for any gaps in your project plan. This isn’t always as easy as you’d expect and far more important than you’d think. It’s worth devoting a significant amount of time and energy to make sure you haven’t missed anything.
- Find areas within the project that are not as well defined as they could be
- Locate parts of the project that make unreasonable assumptions
- Search for project dependencies that are implied but not made clear
- Check that any external systems the website depends on are securely accessible
- Address anything else you can think of!
3. Content creation and graphical design
Finally, we’re getting to the fun bit.
However, in the rush to see what your website will look like, content is all too quickly forgotten, so don’t rush into aesthetics too soon. It is nearly always better to produce your content in at least a draft form before you launch into the graphical design. Your content will and should strongly influence your design, so try and resist the temptation to design first and write later.
When producing content, remember these three simple rules:
- Each page should communicate one (possibly two) messages
- Each page should include a clear call to action
- Content should use clear, concise sentences and avoid jargon wherever possible
Once it’s time for graphic design to take centre stage, never underestimate the power of subjective opinion. Different people invariably like different things, and if you’re not careful, this can lead to a spiral of amendments and re-designs that will significantly slow your project.
To minimise this, speak to each stakeholder before the design process begins, to get an idea of the types of website designs they like, and ask for examples, if possible. Is there a common theme? Some glaring no-nos? Pay attention to them and let them steer your new design.
Most importantly, make sure your designer is designing with mobile devices in mind. A significant proportion of web traffic now comes from tablets and mobiles, and the device ‘friendliness’ of your site now even affects your Google ranking. A grid-based responsive graphical design is a good way to help ensure your website collapses and resizes well on mobile devices.
4. Build and test
It’s time for your developers to take over and for you to see your hard work come to life.
Make sure the website is constantly tested, in-line with the work done in the Low-Level Requirements Analysis, and that regular reviews are scheduled as you go, not just at the end of the project.
5. Launch and review
The website is live, and it looks fantastic. It’s a good feeling, but don’t make the mistake of thinking that the work stops there.
A website is an ever-evolving project that will need to keep developing over time. Now’s the time to compare the website to the original aims and objectives – inevitably, you may spot some areas where things can be improved. Make the most of the new traffic and interest to engage with your visitors and customers as there’s nothing like real-use feedback. This should all give you plenty of scope for an on-going development plan.
Planned, managed, and nurtured well, a great financial services website will always be worth the effort. And if you ever need help and guidance, we’re only a telephone call or an email away.