Our website from a UI perspective

Our website from a UI perspective

Posted on 01 April 2016 by Jason

After much deliberation and waiting, we finally managed to launch our new website yesterday. The old website, although still pretty, was growing old, was unresponsive and becoming a pain to maintain from a security point of view.

We wanted the new site to be first and foremost – easy to use. There was a balance between doing this and making it aesthetically pleasing with different quirks that add to the user experience.

Mobile First

From the existing analytics (as well as knowing from studying client information day to day) we knew that most of our users’ accessed the site on their phones. This led to the first question - what are people likely to be doing on their phones?

  • View our work
  • Come to our offices for a meeting
  • Call us enquiring about work

For that reason, we dedicated the homepage to provide an easy link to our work, and used space in the sticky header for quick CTA’s to both contacting and finding us.

It’s our hope that people visiting the site will use these areas to do what they want to do. We’ve put heatmap analysis on the site, so in a couple of months we’ll see how much attention these items are actually gaining.

No Secondary navigation

We wanted the journey through the site to be as easy as possible regardless of what you are looking for. To remove unnecessary UI clutter, we made the conscious decision to remove a secondary navigation as we felt it wasn’t essential.

This provided a question when browsing both the projects and blog at first. Once the user is viewing an entry, how do they get to the next without having to go back to the parent page? We’d seen a method used successfully by Medium.com a couple of years ago whereby you reach the end of an article and it loaded in the next one as you scrolled.

Whilst effective, we felt it’d be better for the user if they actively clicked an item to read it. There was the possibility they wouldn’t realise they were reading something new.

So, now at the end of both blog articles and projects, we show a slither of the next item. A quick click and the project is loaded in.

Other little additions

As mentioned earlier, we wanted to make the interface simple and uncluttered, but also to have a little personality too. Some of the UI items that we’ve included for added experience include

  • A rolling ‘close’ icon on the mobile menu icon
  • Rotating staff heads on rollover
  • Subtle image size increase on blog and project grid entries

We’ve built the site with the view to build on and add anything we feel would add value, but for now we’ll see how the current iteration turns out and let you know of anything new that gets added :)

Like what you're reading?

If you'd like professional support to kick-off your digital marketing strategy or if you have a project brief you're ready to share we'd love to hear from you...

Get in touch