So we all want a “beautiful website” and beauty is in the eye of the beholder, however good design can also improve a sites navigation open up to a new audience and increase sales.
I recently took on a contract role with an organisation who’s old site was in dire need of both a visual refreshment and a code overhaul.
Choosing a CMS
So my poor client had a propietry CMS (not open source).. I felt obliged to rescue them from it. It was over 5 years old, no longer supported by its creators and just not up to scratch on managing files, being accessable or mobile friendly. For me it’s natural to move clients to WordPress its open source highly customisable and easy to make standards compliant.
Before and after a design renovation
Design wise the original site looked like it had been made in the 90’s with a funky top and side menu that was difficult to navigate and update it was not doing my client any favours.
But before we could replace it I had to get some concepts and ideas about what might work better and what the
company wants. My own wishlist was quite long:
- RTO compliance
- Mobile first ( hamburger menu )
- html 5
- All courses on dynamic list
- Backup system
- https (on all pages)
- User driven
Mock up stage
I use mockups and wireframes to work out some layout basics, many modern sites use parallax and scroll down So I wanted to do that and define clear sections of the front page.
I tend not to have images at this stage as it distracts the client from addressing the real layout. We have a top section with the menu and a massive image slider. A call out section that clearly defines the key business services and links though to meet those needs.
A “brag” section to inform the user of the companies achievements followed by a featured courses section that puts the most important thing on the front page.. links through to book featured courses. Followed by a bottom menu for fallback and user friendliness. Having sorted all the main elements and got some kind of sign off we are then free to start the build.
Key design features and benefits
As you can see the final site is super modern, featuring clean but simple design elements. We went out of our way to take our own photographs featuring female and male students in workplace situations.
I worked collaboratively to make custom site icons for the 4 sections ensuring they are industry specific and not just generic stock icons.
One important factor for me was to generate a dynamic listing of all the courses, as the old site had no single page that listed all available courses and even if I created one it would be difficult to maintain as such information is likely to change. This seems like a small ask but it also seemed vital to the sites success.
For this I used Woo commerce as it allows categories
and should the client want to use the selling system, its powerful and has many options. Woo naturally generates a “shop ” page that can be ordered and highly visual with clear calls to action like “book buttons”.This list will automatically add new courses – no maintenance needed.
I needed to ensure the main menu was more user friendly so I’m using a “mega menu ” as i find older users have issues navigating with drop downs and many of the clients are over 30. Nice clear section headings help keep it feeling organised and some courses can be listed twice theres a lot of control over how and what it shows.
Custom 404’s add an element of fun to what can be a frustrating user experience.
Improvements to the search functionality and availability and internal links built to help users find their way around the site.
Good design shouldn’t stop at the front page. Each product was carefully looked at and key elements a user may need to know were put into a information block so students can at a glance identify the cost, duration and outcome of a course. Imagery was created for each course to help identify the key course subjects, and the way the course is to be delivered.
Using accordions to keep the clutter down we were able to get clear repeatable information blocks such as prerequisites, terms
and conditions, funding and an enquiry form on every page.
Dynamically generated bookings lists populate pages giving users choices about when courses are available and making bookings possible on a mobile and a tablet. .
Half the battle with sites like this is presenting information with clarity and consistency. Using modern CSS we were able to use process maps and charts, some fun UI additions such as fontawesome for icons that will scale. This site has many features I’m super fond of and hope will take the client into a new era of web.
Metrics and analytics
So good design is more than just the visual, for a commercial website to be “successful” you should somehow measure that success. For me thats all in the google analytics. It’s early days yet but the old site had a conversion rate (for bookings) that was on average 2.5-3.5 % and currently the new site has 21% . I’m happy to say the new site is working twice as hard for the company as its predecessor, with mobile bookings now a possibility thats 1/2 the sites traffic now able to use it fully so I’m pretty happy with the result.
Check out the site yourself https://www.jbhunter.edu.au