• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Ben Barden

Products - Projects - Process

  • Ben Barden
  • Home
  • Music
  • Weekly blogging in 2021
  • About
You are here: Home / Product management / City AM: Homepage/Category redesign

30th March 2015 by Ben Barden

City AM: Homepage/Category redesign

Note: This is a backdated post, originally published in March 2015.

Since joining City AM in June 2014, we’ve introduced a series of gradual changes to the site layout.

The main changes can be grouped into a few areas:

  • a new header
  • a tiled layout
  • getting the homepage and category pages to match
  • mobile-first
  • a refreshed sidebar with compelling content and greater variety

Barring a few tweaks, the theme has stayed roughly the same.

What did we change, and why did we make those changes?

New header

The previous header was quite compact, but it felt quite claustrophobic – there wasn’t any space for additional categories.

The header used on City AM in 2014.

We wanted to incorporate the “Business with personality” tagline, make the subcategories accessible, and show the user their current position within the site. We also had an additional set of links to add to the top. Later, we introduced the “FTSE bar” and trending tags.

The new header on City AM, added in March 2015.

As part of the layout changes, we also refined the look and feel. The social icons, search box and the navigation bar were all updated to feel more unified.

Tiled layout

The previous homepage layout incorporated a wide first column containing a lead story with headline and image, followed by an image/headline stream of content. Alongside this was a narrow second column containing text-only headlines of opinion pieces.

The homepage layout on City AM prior to March 2015.

This didn’t maximise the available space, and it was quite text-heavy. There were also several design elements we wanted to clean up; namely, the abundance of grey lines, and the double red arrows.

We decided to introduce a tiled layout:

The homepage layout on City AM from March 2015

This took a while to get right. The increased emphasis on images brought the page to life, but it has required a greater focus on selecting good images for every story. The introduction of subtle “furniture” helped to differentiate between content pieces; coloured labels such as “New”, “Opinion” and “Shares: xx” draw attention to certain content, while dates and author names add a little more information and also break up the stream.

The lead story was the one place we felt that an intro paragraph and related links could be useful. Links aren’t always used, but the intro always appears. This gives greater focus to the lead story.

Positioning the headlines above or below the images took a few attempts. Having two columns means it’s possible for a long headline to create a lot of whitespace if its neighbour has a very short headline. We debated whether it was better to have space above the headline and keep the headline and image attached, or line up the top of every headline but potentially have space between the headline and image. The former worked better. The result is that there is a certain amount of tweaking that goes on to make the stream balanced – which means no four-line decks alongside one-line decks.

Homepage and category pages

The category pages originally had a different layout to the homepage. Take a look:

The City AM News category page, prior to March 2015

We didn’t feel the layout was particularly compelling. So we decided to reuse the tiled layout from the homepage:

The City AM News category page, revamped in March 2015

This was always the intention – the tiled layout was designed to suit any area. There are slight variations on a few special pages such as topic pages and company pages.

Mobile-first

A major focus throughout the work we did on the tiled layout was to put mobile first. We designed something that looks great on mobile, and scales up to tablet and desktop well.

Leaving out the lead story for space reasons, here’s how it looks on mobile:

The redesigned City AM news feed, viewed on mobile

I actually prefer it on mobile. This is perhaps my favourite part of the changes we made.

Sidebar

The sidebar is something we’ve changed a bit more than the rest of the layout:

  • redesigning the Newsletter signup box;
  • adding a “Data in Focus” box;
  • reworking the second homepage column into a new sidebar box – “The Forum”;
  • added images to “Most Read” and changed this to update more often;
  • when you reach the bottom of the sidebar, the ad and the Most Read box stick to the top.

Managing the changes

With so many changes to make, this would have been a big project if we tried to do everything at once. Instead, we took the approach of getting changes live as quickly as possible, so we could monitor any positive or negative effects on overall stats and conversions.

This gradual but steady cycle of changes allowed us to respond quickly when we wanted to make a change. This was essential due to the small development team. When resources are precious, you need to think carefully before jumping into a huge project – especially if it’s not clear if you will see benefits until you actually try it out.

As for the results, they’ve generally gone one of two ways:

  1. Fail, learn, adapt
  2. Succeed, learn, grow

Where we’ve seen no difference, we either gather more data or make a further change and monitor that instead.

Sometimes, you have to fail to succeed. As long as you learn, it’s all good.

Further reading

Following these changes, we did a full website redesign in March 2016. You can read about it here: Redesigning City A.M. – March 2016

Filed Under: Product management, Project management Tagged With: city am, redesign

About the author

Web dev, bug finder, writer of niche music
Founder/coder at switchscores.com
Product Manager at Octopus Energy / Kraken Technologies Read More…

Reader Interactions

Trackbacks

  1. Redesigning City A.M. – March 2016 says:
    2nd September 2018 at 12:09 pm

    […] 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. […]

Primary Sidebar

benbarden

This was good! Nothing clever but 😁👍 This was good! Nothing clever but 😁👍
Watching Sophie Ellis Bextor on Graham Norton with Watching Sophie Ellis Bextor on Graham Norton with a band wearing animal masks/heads. A very 2020 way to round out a very surreal year. Great music, too! #HappyNewYear2021
Lunch was good today! Lunch was good today!
Guildford Castle, 25th Dec 2020. Merry Christmas. Guildford Castle, 25th Dec 2020. Merry Christmas. 

#loveguildford #guildford #guildfordcastle #christmas
Winter sun. Winter sun.
Sunday walk. Sunday walk.
Sunday afternoon walk. Sunday afternoon walk.
This year's #topnine ... This year's #topnine ...
#glutenfree beers 😁🕺 Oh hey, my latest musi #glutenfree beers 😁🕺

Oh hey, my latest music is now up on Spotify! Link in my profile!
New music coming soon to #spotify and most other o New music coming soon to #spotify and most other online stores. Release date tbc.

This is my 3rd release, containing 2 tracks: November Dawn, and Legacy Layers.

The tracks originally featured as part of my self-produced albums, Symmetry 1 and 2. Each track on Symmetry 1 has a companion track on Symmetry 2. These two are cut from the same cloth and are a kind of "trance guitar" style.

Newly-mastered for 2020, I think the music sounds nice and fresh. Maybe you'll like them!

Slowly building up my discography... you can find me under the name "GFD".
4pm. Must be November. 4pm. Must be November.
The #glutenfree way to have beer and Pringles. 🕺
Just arrive: Thirty years of #thedivinecomedy boxs Just arrive: Thirty years of #thedivinecomedy boxset 😁 this should be good. I've been a fan since 1996, and know the albums well. But I've missed loads of B-sides - and I know there are plenty. This set is a huge collection of music and will take some time to get through fully!!
Coffee time! Coffee time!
Anyone fancy a #glutenfree mince pie? And iced, no Anyone fancy a #glutenfree mince pie? And iced, no less! They're great!
My next music release is coming soon! My next music release is coming soon!
A 25 year epic journey: Way, way back in Septemb A 25 year epic journey:
 
Way, way back in September 1995… I wrote my first proper song, called “Waiting for the Sun”. It’s a bit basic.

Fast-forward to 2005. I had a pile of about 100 unfinished tracks. Tired of never finishing anything, I wanted enough tracks for an album. Over the next few years, I put together five albums, before taking a break in 2009.

In 2016, I decided to start music again under a new artist name – “GFD”. I did three more albums, a remix album, before writing two more albums under my own name. Eleven in total. (Album 10 was called “Ten”, in case anyone lost count.)

So, what now? Well, I’ve had a go at mastering one of my tracks, added some basic artwork, and uploaded it to stores.
The track has been approved, and will hit streaming services in a couple of weeks. It only took 25 years!

A truly epic journey… and the track is quite aptly titled Epic Journey.

Epic Journey by GFD hits Spotify, Apple Music, Amazon Music, Google Play, Tidal, Shazam, and Deezer on September 18th, 2020.

#music #spotify #epicjourney #gfd #instrumentalmusic
New glasses! New glasses!
When Mini Metro gets a bit chaotic. #nintendoswitc When Mini Metro gets a bit chaotic. #nintendoswitch
Gastly, Gastly, everywhere! #pokemongo Gastly, Gastly, everywhere! #pokemongo
Load More… Follow on Instagram

Recent Posts

  • Why personal projects are worth pursuing
  • How recurring calendar reminders help me to get things done
  • Looking back at 2020
  • A 25-year Epic Journey
  • A poor comms strategy – and a plea to do better

Archives

Categories

Handcrafted with on the Genesis Framework