FCA INSIGHT
UI Design
The FCA run a news portal focused on financial professionals called Insight. The design was dated and they wanted a refresh which had it's own brand voice.
In the first two weeks following the launch, visits to the new site increased by 300%, page dwell times increased by 200% and mailing list subscriptions grew by 15%.
THE CHALLENGE
Create an updated site to house new and existing content and create a new brand to go with it that is distinct from FCA.
THE LOGO
FCA were keen to use a wordmark rather than a symbol based logo, so it was important to use typography that would work well and be thematically appropriate for the rest of the site as well as the logo.
Two typefaces were chosen from Google Fonts, a serif and a sans serif, which would work well across titles, body copy and quotes. They create a good contrast between the flowing, condensed style of Playfair Display and the geometric, open and legible Raleway.
Although Insight would be distinct from FCA it was important that there was a few subtle call backs to that brand, the first of which was the use of FCA Maroon as the main brand colour for Insight too.
BRAND ASSETS
Following on from creating the wordmark, colour palette, typography and image style were nailed down. We knew from the work on the logo that we would use Playfair Display and Raleway as our fonts, and that we would be using FCA Maroon as the main brand colour. From here highlight colours were added for signposting, and a photography style was decided to help guide editors.
COMPONENTS
The site was designed in Sketch using a components based system. As there were going to be a lot of reused objects, it made sense to standardise these objects so they were consistent throughout. This also streamlined the design process, making the creation of new pages much quicker and more efficient.
This was also an opportunity to bring in another subtle nod to the FCA brand. During the design process FCA went through a rebrand of their own, I used the angle of the shape in the new FCA logo to add a 'slash' device which housed titles and descriptions for featured articles in the 'hero' areas.
