Redesigning City A.M. — March 2016

On 15th March 2016, we released a brand new look for cityam.com. In this post I’ll be digging into the what and why of the redesign.

About the project

Redesigning a news site is no small undertaking. However, we were able to pull it off in the space of two months.

We first talked about the project at the beginning of the year, and spent most of January planning, designing and confirming details.

Development started in late January, and testing began in mid to late February, when most of the work was ready for review.

In total, the build took five to six weeks for a team of four staff to complete. The new site was live at 9am on Tuesday 15th March.

Navigation

The previous navigation bar was very large, and lacked coherence: it felt disjointed.

We wanted to condense the navigation bar, but expand the number of channels on offer. Hiding the links inside a new hover menu (tap to open on mobile and tablet) allowed us the freedom to do this without needing to display everything at all times.

Homepage

In the previous design, the homepage felt very repetitive as you scrolled down. Apart from the one lead story at the top, nothing had the opportunity to truly jump out. The repetitive nature of the layout meant it was easy to lose track of where you were on the page.

We broke down the homepage into “stacks”. Each stack serves a different purpose and has a slightly different layout. The first stack shows headlines, with a mixture of images and text links. We also slotted a rotating promotional strip between the first and second stacks — in the below screenshot you’ll see our follow links; sometimes you’ll see an option to subscribe to our emails.

The second stack is our “In depth” stack. This displays three stories with a running theme. The stack title is customisable by editors; in this case, “It’s the weekend”. The stories that appear in the three slots can be changed manually. We also added an extra banner ad after the second stack.

The third stack is the “Most popular” stack. This displays the current top four stories by pageviews, and another four by shares. This also links to the new “Most popular” page, which I’ll cover later.

Finally on the homepage, we have links to the main City A.M. channels. Represented by the image from the most recent story in each channel, the frequent changes to these images makes this quite a fun feature to keep an eye on.

Article page

This is probably a good time to mention some of the site-wide changes we made. Removing the generic, non-contextual sidebar was something we’d wanted to do for a long time. Changing the fonts from Arial for everything (headers and body text) was another change we were keen to progress. And cleaning up the bottom of article pages was also a driving factor for us.

Here’s the old article page.

Three rows of promoted links was a lot. The “In other news” created a lot of scrolling for not much value; the content was simply repeated from the homepage. (The above screenshot omits most of this section for space reasons.)

We wanted to spruce things up a bit:

One other change that’s worth mentioning is the more prominent inclusion of author bios. Previously reserved for opinion pieces, we rolled out photos and bios for every story as part of the redesign.

The bottom of each article is now hugely simplified. Sponsored/promoted links are now stripped back to a single row of stories, which is on rotation. Related links use the same style.

However, we didn’t completely remove the sidebar. Here, it’s become a “rail” for ads. It can also be occupied by images that are set to be full-width. This has proved to be quite challenging to get right, and we’ll be working on this some more in the coming weeks.

Channel pages

In the previous design, all of the channel pages looked the same as the homepage. In the new design, while the general design is consistent, we chose to vary the layouts for some of the stacks. Here’s the Technology page:

There are links to the Technology page sections displayed to the right of the header. We then display two stacks with different designs. Currently these show the most recent stories, but in the future we’ll be allowing channel editors to control these.

Below the second stack is a “View archive” link, which allows you to drill down further and find older content. We did away with the original approach whereby we had thousands of pages to scroll through; now, you can use a date picker to find what you want.

As you scroll down the page, we provide some more ways to browse the channel:

We show popular content from the channel, followed by stories from a couple of specific sections. Finally, we show the sections once again, but this time with images.

Most popular page

One of the new pages we added is “Most popular”, which also features on the homepage and channel pages. The page gives an overview of popular content across the whole site.

Beneath that, we show the top 10 articles and authors for the last 24 hours.

Further reading

I’ve covered a lot in this post. There are a few other changes I haven’t mentioned above, and more still to come. But this is a pretty good summary.

If you’d like to read more, here are a couple of further links:

• Does Agile work for a website redesign? — an earlier blog post where I talk about the processes we went through on this project.
• City AM: Homepage/Category redesign — a look at the last major design changes we made back in March 2015. A good comparison to the redesign we launched a year later — and also a look back at the design prior to that.

Originally published at benbarden.wordpress.com on April 3, 2016.