Giving London Student a new look
Since their funding was withdrawn in 2014, London Student have been hard at work converting what was a fairly conventional student newspaper into a sustainable, digital-first news collective.
To help them meet that mission, I looked at three aspects of their website: rebuilding the frontend, improving the content authoring experience for journalists, and performance.
Focus on user needs
My very earliest web design projects were for student media websites. Back then, I made the same mistake over and over — I focused on the needs of the journalists over the needs of the users.
In a student media setting, this is arguably forgivable, since student media organisations exist to train up new journalists just as much as to be popular.
Nonetheless, with this project, I wanted to experiment with placing user needs first.
Using data to drive design
I had access to seven months of Google Analytics data to help shape the design of the new site.
While that data can tell us a lot about what users do, it’s less good at telling us what users want to do.
For example, if we notice that users flock to our news articles, but opinion pieces receive much less traffic, is that an argument that we should stop publishing opinion pieces? Or that we need to work to make opinion much more prominent on the site?
We need to do a lot of interpretation on analytics data before we can use it to influence our design.
Normally, this is where user research sessions would fill the gaps. The qualitative insights from watching someone try to use the site would provide the “why” to the analytics data’s “what”.
One insight gained from analytics data was that users tend to hop from content to content, and spend very little time on category pages.
That makes sense — users go straight to what they find interesting. They don’t care if it’s classed as “news” or “feature”. These distinctions only matter to journalists. Accordingly, category pages are now simple chronological lists.
A new editor
Journalists love and hate WordPress in equal measure.
One of the things that inspires rage is the the WordPress post editor. Journalists don’t like writing raw HTML into an empty box, and having to click a “preview” button to get an idea of what their article will look like.
Luckily, the new Gutenberg editor is only a few months away from an official release. We’ve started using it early. Gutenberg breaks content up into modular blocks, and there’s one for everything you’d expect — headings, paragraphs, images, quotes, and so on.
It offers a much more convenient writing experience, but I’m more interested in the prospect of creating custom blocks.
London Student wants to take advantage of being online-only. That means data visualisations, interactives and other kinds of multimedia storytelling that would be impossible in print.
By creating custom Gutenberg blocks for this kind of content, we can produce diverse journalism that takes advantage of the online medium, without ever forcing journalists to learn to code. That’s an exciting prospect!
Need for speed
Bounce rate for the existing site was…not good. Page loads were sluggish, often taking more than five seconds for a page to fully load. The site haemorrhaged users during that time. I broke the problem down into several causes:
- Theme and plugin overhead. The existing site is built with and off-the-shelf theme. These themes are meant to be one-size-fits-all, with a lot of unnecessary code that is executed whether it’s needed or not.
- Large images. Most pages are image-heavy, adding megabytes to every page load.
- Slow server response time. The London Student site brings in a hefty amount of traffic to over 1000 posts and pages. Unfortunately, it’s currently built on low-cost commodity hosting, intended for little sites.
The new theme I built was stripped down — 2 MB versus 6MB. Just switching to it shaved several seconds off load time.
By adding a plugin to automatically downsize and compress newly uploaded image files, I started to tackle the problem of image bloat. The new theme also supports lazy-loading — where images are requested from the server right before they enter the user’s viewport (just like on Medium). This dramatically reduces the size of the initial page load, without impacting user experience.
Finally, activating a good caching plugin meant that for most users, there is no waiting for the web server to run PHP code at all. The user simply receives pre-built static HTML pages from the cache.
Caching helps the site deal with unexpected traffic spikes, which has happened in the past where major publications link to London Student exclusives.
We’ve now reduced load time to two seconds for an average page, and less than one second for some.
There’s a lot more to do, but this is a good start.
You can visit the new site at londonstudent.coop.
