Who are Raconteur?
Since 2008 Raconteur has been producing special reports for The Times and The Sunday Times, as well as content marketing solutions for brands and bespoke market research. They have excelled at creating thought leading printed content coupled with beautiful illustrations.
Raconteur's website didn't reflect the quality of their printed publication, which is why they put their website out to tender. From the first moment that we met Raconteur it was clear that they were looking for a flexible and supportive agency to partner with. An agency that had the ability to guide them. They wanted to work with a group of people who could offer expertise in a market place they were desperate to enhance their presence in.
0 REPORTS
0 ARTICLES
0 IMAGES
The Pitch Process
When Raconteur first contacted us, they sent over their brief and asked us to come to Covent Garden and pitch. We were up against several other London agencies and saw this as an opportunity to impress (we don't take pitching lightly).
The Si digital team all gathered together over a period of two days in order to understand Raconteur's problems. Their existing site and brief was studied in detail and each of us made notes on post-its, highlighting our own interpretations of their problems, ideas we had, inspiration we could suggest and questions that needed answering. A lot of information was collated and it was a task in itself to structure all of the feedback.
This collaborative process was invaluable and actually a lot of fun. Gathering several different view points helped inform us about the project in detail and we were able to use this as the basis for our pitch document. We translated all of this by breaking it down into things we wanted to improve and how we were going to do it.
Text sizes
too small
too small
Short URLs
Confusing reports
Accesible Infographics
Strip back pages
Narrow content
Increase dwell time
Anonymous likes
Distracting social
Hard to navigate
Focus on content
Device agnostic
Exploration & Inspiration
The research phase of this project transitioned between pitch and post-pitch. For the pitch itself, we wanted to go in with a substantial amount of work, so we continued to work on the project. It was certainly a gamble as the success rate at pitches can never be guaranteed, but we knew this was a project we wanted and one we were passionate about. We intended to go above and beyond what they expected, as is the case with any project we work on.
We began creating basic wireframes of the fundamental pages. We looked at user flows and even coded a small prototype displaying how we envisioned the site functioning. Not every client we see is fully aware of the term 'responsive', so we demonstrated this using their own content. This was a critical consideration for the project, which we'll talk about in more detail later on.
Post-pitch and on winning the project, we continued this exploration process. Due to Raconteur's reports being so sporadic, they were never guaranteed to post on a daily basis. Their previous site had become hung up on the word 'report' and they wanted to instil a 'curated mix' of content. This would give a far more active and fresher appearance, making content more discoverable. Inspiration came from a variety of different places. We looked at traditional news websites such as The Guardian, who's content originates from the printed newspaper. We looked at ways in which the likes of Monocle presented their content - who were a big inspiration for Raconteur. We also looked at different blog formats. One which we enjoy is Medium's approach, which focuses solely on content and that alone. You could say we were looking for a happy medium between all of these different sources of inspiration.
Designing in the browser
With all of the research, exploration and inspiration in hand, the design stage started. Traditionally, we like to start mocking things up in Photoshop. Most clients still insist that we present static visuals for sign off but we knew that this project would require a fair bit more. We worked tirelessly on the design of the main body of pages and sent them across to Raconteur for review. We always expect to iterate and we bounced back and forth with changes for a while. We were doing most of this over conference calls and within Basecamp - we needed that all important face to face, so we invited Raconteur down to our studio.
There's no substitute for meeting clients in person. We spent a solid day talking through the design stage, although progress was being made, we didn't feel we quite had them onboard with our ideas and ways of thinking. We needed a new approach.
We decided to move what we had straight into the browser, which would allow us to make more progress with the design. Rather than spending hours revising .PSD files, we setup Raconteur with access to our lab, where they could view the latest revisions. By moving the design to the browser earlier, Raconteur could fully understand our intentions. We worked alongside their digital marketing team to hone the design. Quite rightly, the browser became the place we made most of our responsive decisions.
We did make compromises, we took on board their ideas and as a result we iterated and produced something which we were happy with and in turn, Raconteur too. At times we did battle for and against decisions, but for the good of the project. Looking back this was critical to its success.
Taking inspiration from the original print publication was something which we were keen to do. To keep the connection and familiarity between the print and online content was important for the existing readership. We took inspiration from an array of visual cues, like block quote styles, headlines and article structures. This was all considered with the principles of online, so it didn't look like a print publication slapped on the internet.
A seamless experience
We touched on this earlier. Making the new Raconteur website responsive was fundamental. As most are aware, there's no longer one format. Users have come to expect a reading experience that spans across a multitude of devices, from desktops to laptops, through to tablets and mobiles. Content can be accessed anywhere and at any time and this was at the forefront of our thinking. Being so heavily focussed on content, it was critical for Raconteur to give their users a consistent experience, making it a sub conscious decision to read the latest report in a particular place or on a specific device.
Prioritising content first added a new dimension to Raconteur as a digital platform. From originating as a print based publication and approaching us with a website with flawed functionality, they now cater for 100% of their target market. No longer do they have a reading experience that's disjointed. Users could easily begin reading the printed report in The Times, then share an article online and later on, pick it up on the journey home using their mobile.
Infographics
Raconteur take a huge amount of pride in the infographics their design team create for the printed publications. This is a visual insight into a particular topic focus, making interesting stats easily digestible. They were struggling to communicate these online - with infographics usually being lost because they were too small. They definitely didn't work on mobile.
We took a new approach to these. Like the rest of the website, we wanted these infographics to be accessible everywhere. Size matters and we wanted to make sure these used as much of the site as possible without taking them completely out of context. By introducing a zoom tool, this allowed the user to inspect infographics in far more detail (essentially these are double the size). No detail can now be missed.
The mobile approach was similar and we utilised the power of pinch and zoom. Users have the ability to explore each infographic in its finest detail on device they wouldn't expect to be able to.
Smaller image sizes are also served specifically for mobile to keep loading times down to a minimum for those that might be travelling at 100mph on rails using 3G!
By making infographics fully accessible, this ticked a huge box for Raconteur, displaying these wonderful visualisations in their full glory has become effortless.
Focus on content
We all interact with articles on the web on a daily basis. On many news sites, it's become normal to be completely overwhelmed by content and adverts. Each of these flashing and screaming at you to click on or read them. The article page for Raconteur had all of these familiar requirements, but we didn't want to let these dominate and distract from the most important part, the content.
Originally, we didn't want to have a side bar. Why be taken away from an article half way through the reading experience? But this is something that we compromised on, in a minimal way.
Social integration can play a key role in a website, but some can be over bearing - following your every scroll. We decided to use social sharing options where they're most likely needed, at the beginning and the end of an article. We included Raconteur's desired networks and additionally devised a short url sharing link. This allowed the user to click and automatically copy the link to their clipboard - generated uniquely for each article in question.
Advertising
Advertising is a necessary evil for any content / news based publication, on or offline. This was a consideration from the original briefing and one which we wanted to do as tastefully as possible. Ads can be distracting and intrusive, we wanted to limit this as much as possible.
We removed the advert clutter from side bar and tried to integrate these amongst the content. Giving them a more even distribution. We didn't want ads to detract from the content, so we found that balance working closely with Raconteur to achieve this.
Managing adverts was critical for Raconteur. We integrated a system into the CMS that allowed them ultimate flexibility. They were able to specify what pages a particular advert would display on, for how long for, or for how many clicks - it was completely customisable. This system also provided helpful analytics to help further the growth of their ad network by reporting back integral KPIs.
An interesting side effect of handling adverts ourselves meant adblockers fail to recognise and block the adverts, resulting in a greater number of impressions. Of course we advised Raconteur on only accepting appropriate and non obtrusive campaigns.
Summary
We spent day and night producing this website for Raconteur. Passion is in our DNA and this project had plenty of it. Both parties understood the importance of working closely together to produce a site that provided a great experience for its users.
To take a site with a data structure of over 1,000 articles and realign its front and back end so smoothly is testament to the team we have in place at Si digital. Content exploration is now at the forefront, encouraging people to spend longer on the Raconteur site and to return more frequently.
Here's what Seema Aggarwal, Digital Media Manager at Raconteur had to say about the project.
"Si digital have been such a pleasurable team to work with. They have the ability to listen to, suggest and implement ideas and have consistently pushed the limits of what we thought was possible. They’re a team who are deeply passionate about the work they produce and it shows in the website they’ve created for Raconteur."
We thrive on shipping new projects and the reward we get from having a fantastic portfolio piece and associated traffic increases for the client, gives us total satisfaction. It doesn't stop there; we will continue to work closely with Raconteur to develop future ideas. This was just the beginning of a long lasting friendship.
