Ease of navigation
Navigation items
If your menu is longer than six items the user experience can suffer. Keeping your top menu short and simple is always recommended so that a new visitor can remember all their navigation options without having to re-read the menu.
Imagery
For the drop down items you have, making them more visual by including images will help visitors determine what they are looking for. For example, including an image to represent the different Bikeability levels will visually aid which one might be right for you.
Dropdown in a dropdown
This is usually considered bad practise as the user needs to click twice to see the navigation links. This is seen in the 'Cycle More' navigation for example. To help fix this you might consider using a wider tray to use more of the screen space, and use columns to structure the information better.
Active states
There are no visual aids to show you what page you are on. This could be as simple as using a colour on the navigation item when you are on that particular page.
Overall
The ease of your navigation across desktop is totally fine. It’s accessible, meaning that it’s on a nice white background colour, and it’s also very legible. However, the above are a few pointers that could improve it.
Typography
Legibility
You are using 'Museo Slab' as your headline and body typeface. Using a slab typeface for body copy is not ideal as they tend to be harder to read at a smaller size. Using slab fonts is absolutely fine for headlines as they tend to be bigger.
Overall
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Images
Overall
High quality images and graphics are good across your website. SVG files have been used for most icons which is great, these will display sharp and are a lot smaller file size than pngs or jpgs.
From what we can determine hi-res images are all compressed which will help save on load time.
As a side note, using images within circles is fine however, you need to be careful you're not cropping anyones head off as seen in your carousel display.
Overall
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Design cohesive with company branding
Overall
Guidelines are very simplified so it’s difficult to review in detail. The only note to reference is that Tahoma Regular was mentioned to use online. This font would be much more legible for body copy.
Overall
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Mobile friendly
Navigation
On mobile there are opportunities here to sit icons outside of the burger icon for easy access. For example, if you wanted to promote 'Find a course' you could include a search icon next to the burger icon for ease of navigation.
Responsive issues
Learning resources
On the Learning Resources page the tables haven’t been made responsive so are unreadable on mobile. You could introduce horizontal scrolling on the table to fix this issue, otherwise condense the tables so you only show the vital information on mobile.
Department for Transport logo
We've noticed this is missing from your mobile site in the top navigation. This is vital for building trust, so adding it to the footer could help solve this issue.
Partner logos
On the homepage the Partner Logo section hasn’t been made responsive. The logos are scaling down but not forming a new layout, so they display very small. You could stack the logos in 2 columns to fix this legibility issue.
Overall
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Specific pages
Homepage
Carousel
I would avoid using carousels when you can. The reason being is people tend not to look at anything after slide 1.
Also, when you’re reading slide 1 and then it flicks to slide 2, this can be frustrating for people that are half way through.
Find a course near you section
The position of this is quite low down on the homepage. We’re assuming this is the main CTA on the site so should be included above the fold in the hero section.
Some people may be unsure of their local authority, using postcode would seem more obvious and results would be closer to me. Also, introducing a typerhead would be best practise here, this will ensure when someone starts to type, it can make a guess as to whats next and show options.
Cycling freedom section
On the homepage the 'Make the most of your cycling freedom section' is great, but none of the propositions go anywhere. For example, under the ‘where to ride information’ it would be great to include a CTA for the new guide to take visitors straight there.
Bikeability club
There doesn't seem to be any promotion of the Bikeability club on the homepage. We're assuming it's quite important to capture people's email addresses so it might be best displayed here. You could even put it in the footer so that it's on every page.
Find a course
Landing page
Similar comments to the Home Page section here. The overall page structure is fine, however you could feature the search bar higher up so people can use it straight away.
Reducing the amount of copy in the introduction would also help to keep it more snappy and straight to the point.
Search results
Once you’ve completed a search, it would be helpful for the page to anchor you down to the results, rather than taking you back to the top so the user doesn't get lost.
Some people might jump straight to this page if you’ve searched from the Home Page. It may then be unclear as to what the Bikeability levels mean. Showing a brief description or tooltip for each level would help this.
Extras
Heatmaps
Your heatmaps are available to download in your shared dropbox folder here. The folder contains a video analysis of the homepage, where we talk you through our findings, as well as jpegs of the homepage for you to look over.
Userbrain review
We instructed someone on userbrain.net to have a quick whizz through the site. A visitor in the older generation who might be booking on for their younger children. The video can be watched here.