Overview
Working at Skylab – we were tasked with the redesign of the National Club Golfer website.
The NCG is quite a large websites which specialises in providing users of the website with features such as:
- Latest news articles
- Equipment reviews
- Course reviews
- Golf tutorials
As well as various other content pages.
I was provided with a specification, produced by the Skylab Project Manager in conjunction with the stakeholders at National Club Golfer. The document listed exactly what was required from each page in terms of functionality – it was up to me to decide the look and feel of the interface.
There were a few insights into what the stakeholders required from the project, such as the desire for a much more modern & much cleaner look for the website – more along the lines of editorial sites such as GQ. As well as the requirement for it to be a little less cluttered and “busy” looking.
There was little-to-no budget for research into the target audience, the competitors or even other websites of a similar type. Any research that was done, had to be conducted by myself.
Initial thoughts
Looking at the current website – it was clear to see it was in need of a re-design. It hadn’t been updated since around 2012 – and it showed!
The homepage was a mish-mash of stories, from all different categories, seemingly crammed together with little-to-no space afforded to each element. This is something the stakeholders expressed dissatisfaction with.
The site was responsive for the most part, but there were still certain elements that weren’t, and often made the page wider than the mobile viewport and often interfered with the experience when scrolling. It was critical that this was resolved, as the mobile audience of the National Club Golfer was quite a large percentage.
I was also informed that the main demographic of the website were males aged between 35 – 50. With this in mind, I was consciously aware that what I was designing would have to be usable by a generation of users that may not be as tech-savvy as an ideal target audience.
My Goals to accomplish for this project
After examining the existing website and the specification – I immediately had a few thoughts as to what I wanted to personally achievement
- Make the site fully-responsive across a wide range of devices – this should be an absolute minimum!
- Ensure users can easily find the content that they want – to do this I’d make sure that the categories were clearly defined
- Give some breathing space on the website as the current website feels too much information are cramming together.
- Give the site a brand new look and feel – however stop short of overly complex designs, and focus on the usability of the website.
Sketching & Wireframing
I started with a rough sketch of the homepage using the traditional pencil & paper. The initial aim was to give a little more structure to the homepage of the website.
The top of the page had a featured article which encompassed the top of the page – commonly known as the “hero” area – and often featured the biggest/most popular story of the week.
The news articles would be displayed in “card” form, in categories that would be split into rows which spanned the full 12-columns grid. Each category would have filters so that the user could separate which content they wanted to see.
There would be space allocated in between the card categories for featured posts – which were selected in the CMS. This was requested for when NCG wanted to draw particular attention to anything – such as an internal competition.
The paper wireframe was then transformed into a digital wireframe using Adobe XD.
When it came to mobile, the news article cards were designed to take up around 3/4th’s of the screen, and the users would have the ability to swipe between each news article.
This allowed each news article to have the appropriate amount of screen real estate dedicated to it, as well as the documented positive effect that swiping on a website or an app elicits in users. It is also a nice, intuitive way of interacting with a website and helps give off a more “premium” feel with users.
The other pages of the site followed suit into the wire-framing stage.
Some of the pages featured the aforementioned hero image – others had a plain header (ones such as the search results page. This would be something I would address later on.
A true multi-device experience
The National Club Golfer went into hi-fidelity stage and was completed using Sketch. In the time between the wireframe sign-off, and the hi-fi creation – there were a few things that were changed at the request of the stakeholders (anyone who has worked in a Waterfall environment can sympathise!).
There were also adverts that needed to be added to the site – due to the signing of a new contract shortly after the wireframe sign-off. Despite this, I feel site retained it’s original, light feel – but with a much more modern twist. Subtle drop shadows were added to the news cards to offset them against the light background a little more.
The rest of the pages were created also, and followed the same design principles as the home page.
When viewed on a mobile device, the redesign was far superior in terms of usability to the existing website. Internally – the team expressed satisfaction regarding the design output, something which I took great pride in.
A tale of two headers
When I mentioned before about there being two different versions of the navigation bar – one over an image, and one over white – this is how I solved the issue of the search & navigation drop-downs.
Basically – ensuring that the search/drop-down I designed could easily be translated over to a different variation of the navigation bar! I did consider going for a white/grey dropdown or search component, but I felt that that much of a change would be a little TOO jarring.
What I accomplished for this project:
- The output was fully responsive, and could easily be displayed on a multitude of different devices
- The site was a lot more organised, compared to previous design
- A fresh look and appeal was now evident, and looked like a site that was designed and built in 2018 – not 2012.
Overall
After working on this – I was satisfied with the output. There were some things that had to be compromised later on in development, as well as when the site was launched. More adverts were placed on the site also, which I feel compromises the look of NCG – however I do understand the monetary value it brings.
Looking back, there are a variety of things that I would do differently – but that’s part and parcel for being a designer.
In golf terms – I’d say it was a Birdie. Good – but room for improvement.