Lonres.com Public Website

  • Category: Web Design 
  • Completed at: Lonres.com, 2013
  • Responsibilities: Design and Layout
  • Tools: Photoshop, Balsamiq

I had worked on an internal site refresh, bringing our main product up to date, but now it was time to improve our public facing site.  It had been the same for the past ten years.  You can see the old public site below:

old-lonres public siteold-lonres public site

How could we sell a product using a site like that?

Truth was, we didn’t.  The sales strategy used other avenues, and the public website was really just a log-in page.  But management decided a change of tack was needed, and they wanted something more modern that sold us far better to the range of visitors we had.

I started by meeting the relevant heads of department to find out what they wanted from the site.  It needed to act as both a sales portal, but also carry out several other functions like allowing people to apply for membership.  It also had to retain the original purpose of a log in page.  

I had some ideas in mind for the design of the site.  I wanted it to be an evolution of the internal site we’d done a few months earlier. Constraints were less limiting this time, so I had more of a free hand on design.  

Design #1

Lonres-New-Public---Draft-5Lonres-New-Public---Draft-5

A good first stab, but it lacked something.  The design and content needed tweaking.

Design #2

Lonres-New-Public---Draft-6Lonres-New-Public---Draft-6

The design and content worked better together, but it felt a bit tight.  Everything seemed to be packed into a small space… maybe the colours didn’t help.

Design #3

Lonres-New-Public---Draft-7Lonres-New-Public---Draft-7

Again, it looked better but it still wasn’t right.  It seemed very constrained… it didn’t make any use of a widescreen monitor for example.  I was told that a responsive site was off the cards, but that didn’t mean I couldn’t make something more expansive.  Management also wanted me to make much more of our key products too.  A whole new layout and concept seemed to help quite a bit…

Design #4

Lonres-New-Public---Draft-11Lonres-New-Public---Draft-11

This was a big step forward.  It looked a lot less stuffy, and was easier to scan because of better hierachy between text and elements.  I was told that the main downer was the lack of a carousel to show different products.  I explained that I wasn’t sure there would be an advantage to a carousel, but I was asked to design one in anyway. 

Final Design

Lonres-New-Public---Final-Blue---Revisions-12th-JuneLonres-New-Public---Final-Blue---Revisions-12th-June

Exactly what everyone was looking for.  The design was now wider, which gave all elements room to breathe and there was a lot more vertical spacing too.  I managed to fit everything management wanted onto the front page and there was room for a carousel too.  This was the chosen design.  

You can view the site here: www.lonres.com

Summing up

I was really pleased with this design in the end.  It wasn’t precisely what I wanted, but it was what the company wanted and sometimes you have to relax control a bit if it means reaching the objectives of others.  The site was modern, full of information and was pretty quick too.  As a bonus, we managed to add some pretty funky animated icons that gave the whole thing a lively feel.

If I’d have had the chance to do it again, I would have cut down on the amount of content on the home page and modularized everything better.  It would be nice to revisit and think more about a user’s journey through the site.  Unfortunately, because of time pressure we didn’t have time to put much effort into that.