"Design is a balance between form and function."
There's so much more to designing a great website than just making it look pretty with a nice colour palette and some branding. Those things are awesome but they're just top layer 'skin' stuff; you need a well thought-out user journey and a site that functions the way it should with barely any effort from the user.
How To Map Out a User Journey
1. Understand the goals of your website
Before I get started with my website design clients I always ask them about the goals of their business, and also the main goal for their website; whether that be 'to buy products', 'to sign up for a mailing list' or 'to fill in a booking form'. Knowing the purpose of your website is the first step in mapping out how your users should be using it!
2. Get into the mind of your different users with user stories
Usually there are at least two different types of people with different agendas using a website, so work out exactly who they are and what they want!
The best way to organise this information is to try an Agile user story formula for your website. These describe what type of user you expect and what they want to get out of being on your site. So for example if you are a wedding photographer targeting young professional couples some of your user stories may look like this:
As a newly engaged 28 year old female with a busy schedule
I want to see a good variety of portfolio work quickly
So that I can easily decide whether to add you to my shortlist
From this story, you may decide to have one 'gallery' style page to display your photography portfolio so that users can see your work at a glance without clicking on different sections.
As a small wedding catering company
I want to find a way to contact you easily
So that I can see if you're interested in partnership opportunities
From this story, you'd want to make sure that your contact form is easily accessible and in good working order. You may also consider including a note on your contact page saying whether you are or aren't open to partnerships and collaborations, as this could save a few email back and forths!
3. List all the pages you could possible need, then start combining
Go crazy with a pen and paper and just write down whatever page or piece of information you think you'll need on your website, then once it's all out of your head, start combining pages that may have duplicate or similar information in order to cut the amount down. Less pages is not only better for the user to cope with, it's also better for you to manage!
4. Prioritise pages into primary & secondary navigations
Once you've come up with a shortlist of pages, it's time to assign them to your navigations.
A Primary Navigation is the top level page options on your website (on mine this includes 'About', 'Services', 'Portfolio' etc). As a general rule you should try and keep it below 7 options to avoid overwhelming users with choices. These are your top priority pages and ones you want your users to find instantly!
A Secondary Navigation includes the pages that drop down beneath your Primary Navigation options, and they should fit into a category with those top level pages. So for example rather than have Brand Design and Website Design as two top level pages in my navigation, they fall underneath my 'Services' title in the primary navigation to keep things organised.
A Tertiary Navigation is present on some websites, usually in the footer section. This is very common for ecommerce websites who have lots of extra important information that needs to be accessible from all pages of the site!
5. Prioritise information and be ruthless
Perhaps this is stylistic preference, but I very much believe that less is more. Keep the information on each page to a minimum, and include plenty of whitespace, using visual photography or branded graphics to say 40% of your information.
6. Provide clear call to actions
One of the most important things in your website design is to include call to actions - buttons, links and commands that encourage your user to take action (be that buying a product, joining a newsletter or going to your booking form). Include at least one call to action on each page, if not two (one near the top and one near the bottom!).
7. Get feedback & tweak!
Having others use and review their experience of your website is essential! Even if it's just your family and friends, getting feedback on the journeys they take through your site is incredible useful for tweaking and improving. You can even use a site like UserTesting to have strangers review your site for you!
Using existing data for a redesign
If you are redesigning your existing website, rather than starting from scratch, you've got the luxury of using traffic data to improve your user experience - yay!
Look at Google Analytics to see which pages people are using and dropping off on...
You can use GA to see which are your most popular pages and which aren't doing so well (if some important pages aren't getting views, why not move them up to your navigation?). The other cool thing you can do is see exactly which pages users are dropping off from, and what they are doing if they continue on your site...
This is great for analysing how well your website's user journey is working and seeing where you can add links and call to actions to keep people on your site!
Use a heatmap tool to see where people are viewing and clicking on each page...
You can try a free tool like Hotjar to get visual data on exactly where your users are looking and clicking on your website - it's pretty neat!
You can also see things like how far down your page people are actually scrolling and where they are dropping off, which can help in determining which information you put where on your pages.
Things to Consider
A few final notes on other things to consider - I'm sure you can think of more!
- Find a balance between useful & overwhelming with backlinking
Internal backlinking just means linking to other pages within your website. Make sure that you are providing a valuable help when you add backlinks, because too many could overwhelm your users; ask yourself this "If the user clicked off this page and onto the linked page, would it benefit their experience and benefit my business?".
- Remember to include information & pages you are legally required to have
- Have people be able to contact you from every page
This means either a very clear accessible Contact page with an email address (not just a contact form) in your main navigation, or even social icons that appear on each page of your website in your header or footer - these a great for quick contact enquiries!
- Don't get too fancy with the navigation titles
Yes it can be fun to get creative with your navigation titles and page names, but I'd recommend doing this sparingly for two reasons. 1) You want navigating your site to be as easy as possible for your users, so it's best not to confuse or catch them off guard with unusual page titles. 2) Having a standard 'About' or 'Contact' title is also helpful for Google when ranking the pages of your website, so SEO is something to bear in mind here too!
- Be aware of linking away from your website
Some websites (eg, blogs) sell advertising space in their sidebars or elsewhere on their site - which is fine! It's a great to to earn revenue online, BUT consider whether the value you get from a user clicking on an ad is worth them leaving your site... It might be your only income stream, in which case that's cool! But if you want your users to hang around on your website for longer you may want to reconsider.
- Got more to say? Add a link to download a PDF 'info sheet'
If you've got a page on your website that is starting to get a bit wordy, but you still have loads of information to get across to your readers, turn it into an information whitepaper (like this one!) that people can download in PDF format from your website.
- Large site or blog? Always add a search bar
There's nothing that annoys me more than finding a really interesting website or blog but being unable to find what I'm looking for! Do your users a favour and add a search bar to your sidebar or website header - it's super useful!