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:

• accesable(wcag2)
• 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. 

Product pages

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