Scottish Financial News
Project type:
Web Redesign
Services:
Web design,
UI/UX
Client:
Scottish Financial News is the leading daily online news service for Scotland's community of accountants, auditors, finance directors and insolvency practitioners. They publish a free daily email newsletter which is sent directly to the inboxes of thousands of Scottish citizens working in the many diverse areas of the profession.
Project goals
The client contacted me with a request to do a redesign of few of their websites. They are running both Irish and Scottish legal and financial news websites which had very similar structure, so they basically needed a modern news website design template, which they could reuse and just change color nuances and logos for the different markets. The challenge here was to come up with a design that could fit many niches but still have some character. Another goal for this project was to bring more awareness to their social networks as well as their weekly/daily newsletters which are of great benefit to their readers. We've also had to include a directory with events and jobs for users to search from.
The client had a logotype based on a serif font so we discussed that this could be a good start for creative direction. I've crafted a moodboard to agree on the overall look and feel incorporating the font they've used and it fit perfectly with the newspaper feeling we were looking for the project. The text-heavy nature of the website made me go for a light and spacey style to enhance readability.
Approach
After agreeing on the style I've continued with wireframing. I chose 4 column grid for most of the pages where the layout would alternate between 1-column articles and big 2-column news containing a photo. The navigation was decided to be two levels deep respectively on a separate rows. The website counts on advertising to fund itself so I had to make space for different size banners too.
For the articles page I've gone with the 5 column grid in order to use the bigger part of the space - the 3 middle columns for displaying the main content centred for best reading experience. The other two columns contained floating elements like share buttons and author's information.
Solutions
-
For such projects the typographical hierarchy and contrast between texts has most weight towards the aesthetics of the design. I've spent a good amount of time playing with different sizes and weights in order to achieve optimal readability and have this newspaper-like appearance. I've used line style iconography for repeating sections like "latest articles/jobs" or "featured news" in order to spice up the design a bit.
Having so much text can be overwhelming so I've decided to have a special treatment for article's tags by making them have a backdrop and a border in order to pop up more.
I've used subtle lines to divide sections which could otherwise get too dense.
Another cool thing we've decided to add is the amount of time needed for reading an article, which could encourage people to read more especially if they are commuting or waiting on a cue. -
The articles page needed a special treatment as this the most used template in the website. Having the main content centered, I've used the remaining space for improving user's engagement by having a sticky column containing share buttons as well as a invitation for subscribing to site's newsletter. Article's quotes were also going out of the centered main content area which made them stick out and made the layout look non-trivial and more interesting.
Other interface additions were the required image captions with link, especially for the legal news website, and also the properties container. This container appears for housing articles and shows the location of the building as well as some other essential information such as type, council, team etc. -
The websites of the client had to give additional value to readers in the fields of financial and legal news, and this was achieved by offering them a way to search for jobs in their area as well as events that can be filtered by date and location. Apart from the dedicated pages for these, we've included the most recent ones in sections on the homepage as well as a right-side columns on other pages.
Mobile version
For the mobile version I had to come up with a reduced size typography for most of the headings. The navigation was hidden behind a hamburger menu so that only the "subscribe" button which is important for the readers will be always visible. The layout was also reduced to two column grid and headliners we made full width.
