Does your practice's website tick these 6 design boxes?
As a financial planner you probably don't give much thought to design. But understanding some of the basics can help you make smart decisions about your website.
Whether your website needs a full renovation or just a few minor tweaks, let's have a look at some key design elements.
Copy and design matter
Copy refers to the words used on your website. Visual design encompasses, well, the visual aspects. They are both important, and many argue that it is the old 1 + 1 = 3 scenario.
But today we are focusing on design.
Design is important.
Good design breeds trust.
And trust is important in such a personal and relationship oriented profession like financial planning.
But let's step away from financial planning for a moment and check out Lings Cars.
It brings a new understanding to the word "clutter" doesn't it?
And it's not at all easy to use.
And yes, that is a chicken on the home page.
Images, and in particular photos, are an important element of a site. They can play a huge role in communicating your message, so it is vital the message you send is the one you intend.
Poor stock photography can make your site appear dated, run-of-the-mill and very corporate
Real photos can introduce the personality of you, your team, your clients and your business
Interestingly, a recent test showed that using a less professional head shot actually improved conversion rates (the number of people signing-up to a webinar).
Of course it will depend on the message and business image you are trying to communicate, but it's certainly worth considering whether the current photos on your website are generating the best results for you.
2. Font style and size
Like each element of your site's design, the fonts you choose also say something about your practice.
Let's look at a few examples:
Times New Roman is traditional and a bit "buttoned up"
Museo Slab is modern with a strong, powerful feel
Century Gothic is easy to read and slightly feminine
The size of your font is also important.
Tiny fonts can make your site difficult to read. Not impossible, but requiring a deeper level of focus and concentration.
Hard to scan.
Easy to click away from.
Here is an example from Professional Planner - a site which could benefit from using a larger font size.
Anything below 14-15 pt is likely too small.
The body text on this site is 26 pt!
Ultimately, the aim is to make the experience as pleasant as possible.
And keep in mind your audience too. If you serve a market of boomers and retirees, then a larger font will help those with failing eye sight!
Creating a structure and ultimately the navigation is a big part of planning a website.
You want to create a structure that is simple, and communicates all the things your ideal client wants to know, as well as serve your existing clients.
A great way to help with this exercise is to use sticky notes, a sharpie and a blank wall, window or whiteboard. Write each of the elements you want to include on a separate sticky note, and then start grouping logical ones together.
Soon, you will come up with a structure that might look something like this:
It becomes the basis for creating the navigation/menu for your website.
A few key points:
Each menu item should be self-explanatory. Having an item called "links", "resources" or "videos" doesn't really give a visitor much reason to click. However something like "Money School" tells a little about what the visitor may find when they click.
Keep your navigation simple, and limit the number of layers you use. You don't need to include everything on your website. It is there to help move visitors to take the next logical step in your process.
4. Visual hierarchy
Wikipedia explains visual hierarchy as "the order in which the human eye perceives what it sees" and designers attempt to "guide the eye to information in a specific order for a specific purpose."
This is often through the use of things like size, placement and colour.
Some examples include:
Now don't think too hard about this, because it's commonsense stuff.
A headline is going to be larger and at the top of your page, and possibly in a dominant colour. It needs to stand out to get noticed first.
A disclaimer (which we love in financial planning 🙄) is going to be in a smaller font, possibly a lighter grey colour, and positioned in the footer.
A quick test is to look at your website from a few metres away. What stands out? Hopefully it's the things you want to.
5. Colour and white space
Colour is powerful, and can set the tone for your website.
It also needs to appeal to your audience, and complement your brand.
If you are starting from scratch, consider using four main colours:
Main - Used for headlines. This may pick up on one of the colours in your logo.
Secondary - This is an accent colour and used for sub headlines and images. It may also pick up on one of the colours in your logo.
Action - This is used for links and call to action buttons. It is a good idea to have this colour quite different when compared to other colours on the site, as you want it to stand out.
Text - This is the colour for your body text. It needs to be easy to read. A dark shade of grey can work well, as pure black can seem too harsh. You may use a lighter tone for text you don't want to emphasise, such as your disclaimer.
Of course, white space is important too, as it can help you highlight the things you want to stand out.
The Lings Car example above, is lacking white space! Apple, on the other hand, has a whole lot of it.
6. Consistency and conventions
To get the best results, using these guidelines consistently throughout your site not only looks good, but helps your site's visitors focus on what's important.
Staying within website conventions can also be advantageous. For example, deciding to use a fancy image based menu can look appealing, but can act as a friction point for visitors. If they have to think too much or you make it too hard, it's easy to click away and look at the next alternative.
Above all, apply the KISS (keep it simple stupid) principle, and you will be well on the right track.