Benni want to transform the way businesses provide workplace benefits. They believe that there’s a better way for businesses to offer more benefits to more of their people and for employees to be helped to learn about and choose their benefits. The challenge is to update the website making it upbeat and eye-catching.
Homepage Map – Desktop
Using Hotjar I can see the heat map for the current Benni page. As you can see the section that is seen the most is the top section then the future do down the page you go the lower the customer attention is.
As you can see here there is no calls to action in the hero section. The navigation links are the only buttons, which the customers can click on.
The “make an enquiry” form Benni is at the bottom of the page, on desktop top the engagement of this section is only 30% and on mobile it is 10%. Customers are not viewing the form; this is probably why Benni does not have many leads.
Homepage Map – Mobile
On the mobile version of the home page, the text is different sizes, which is not best practice.
The engagement of the site drops to 40% after the fold and then a further 90% before the customer gets to the “make an enquiry” form. It would be a wise decision to move the form higher in the page so that more customers see the form.
Following the Style Guide, I crafted a UI Kit that would inform the Design System for Benni.
- Making it easier for the customer to contact benni
- Inform Customers about the different solutions
- Inform customers about news and articles
The current hero banners are currently broken and they do not look professional. With still images that are cut half way, this is very distracting when you view the page on other devices.
I have an animated hero would bring life to the pages. I decided not to have the animation constantly looping, as this might no look professional.
Each page also has its own character which is diverse not only in race but in profession. This indicates to the customer that Benni is for everyone.