We have been providing support for Lafayette Graduation (Lafayette)  eCommerce site since May 2014. The site was originally developed by a third party more than a decade before this. Although CSE have developed various enhancements to the solution since then, it was felt that the technology used would not be able to keep pace with the demands of the business and the modern web. After extensive review of the possible ‘off the shelf’ solutions available, the decision was made by management at Lafayette to develop a new bespoke solution. As the providers of support for the extant application, with the knowledge and experience that this brings, CSE were approached to tender for the work.

Drawing on our knowledge of the strengths and weaknesses of the current solution,  we worked with the Managing Director, Stephen Holland, to identify both the new requirements and aspects of the existing system that could be incorporated into a best of breed solution. As specialist in the development of functional, data-centric client-server based solutions, we worked alongside a graphic design house, kooba, to create the brand design and media assets; an approach that has worked very successfully for us in the past. This meant that both parties were able to play to their strengths to produce a solution that fulfils the functional goals for both customers and the back-office team with a visually compelling design.

Evidence of this is borne out by comparing the following three aspects of the user experience:

• General Design and Look & Feel
• Behavioural Analytics
• Performance

General Design and Look & Feel

The elements that Lafayette  wanted to change with the new solution were many and varied but focused predominantly around the user experience being in line with the design of modern web sites. The aim was to provide a more contemporary look that is easy to browse and use on any device.

The resulting solution focuses on providing a modern, dynamic look with vibrant imagery that effectively communicates the Lafayette brand and its capabilities. The new solution uses a modern responsive web site design that is as easy to use on a mobile phone as a desktop computer.

The eCommerce element of the solution was designed to focus around a dashboard and navigation cues that were simple and intuitive to navigate. The purchasing journey was broken into five steps with a clear indication of progress through them.

Behavioural Analytics

Kooba’s tracking of usage patterns on the new solution using Hot-jar ‘heat maps’ have demonstrated an increase in activity on the main pages of the site and a focus on ‘call to action’ and drop-down menus to explore the services offered. This increased engagement has been demonstrated by comparison of the traffic on the old and new sites, showing an increase in:

• Direct and Referral traffic of ~20%.
• Sessions per User of ~16%.
• New Users of ~2.5%

A key aspect of the new design was to make it mobile friendly and the success of this has been demonstrated in the significant 16.5% increase in mobile traffic to the site. The site was implemented using the Bootstrap version 4 framework to achieve the responsive design to render on mobile devices without any further customisation for a specific screen size or operating system.

Performance

The time that a web page takes to load has a significant effect on user engagement and a slow page speed increases the risk that a user may leave the site. This is particularly important when sites are being accessed via mobile devices with potentially low bandwidth. A standard test for the performance of a website is the Google PageSpeed Insights performance test. The data transferred to render the homepage averages 1.5 MB, which is impressive when you consider the visually rich content being displayed. This is loaded in ~ 1 sec, giving it a score of 97% in the Google PageSpeed Insights performance test.

CMS

Another important element of the new solution for Lafayette was the ability for them to be able to refresh their content quickly and easily. This capability was limited in the previous version, resulting in a lot of changes having to be made by a software development resource. Lafayette wanted to have greater control over the ability to modify the content in the brochure-ware areas of the site.

Rather than looking at integration with an off-the-shelf CMS product CSE developed the functionality as part of the main web site development.

Providing superior integration with the eCommerce element of the site and ultimate flexibility in its development, the framework developed is as a WYSIWG implementation. An example of the implementation can be seen here for the Aerial and Drone Photography page.

Further Information

For  more  information  about  CSE and this case  study,  or  our  services  please  contact  us on:

01223 968100 or enquiries@cambseng.com