Summary
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.
project management
How I prioritise small requests alongside project work
Recently, I changed the way I prioritise new work requests and projects. Here’s what I’ve started doing.
Prioritising the product backlog
JIRA is our central system for development requests. There’s one project for smaller requests: the “BAU” as I call it, which is anything that takes 2 days dev time or less. Except for urgent requests, which we will drop other work to look at, anything in JIRA is allocated a business area via a custom field.
Each week, I export a list of all open tickets, filtered by area. One or two people in each area indicate their Priority 1 and Priority 2 tasks, and those go into the queue. We also prioritise our internal work, such as changes to the core product, and improvements to our technical stack.
We won’t complete all of the prioritised tasks every week – but it allows us to see what the priorities are.
I believe it’s important for all areas of the business to be included in the prioritisation process. Nobody should feel that their area is being ignored. Allowing each business owner to define their priorities can prevent this issue.
Prioritising the projects
Instead of starting yet another spreadsheet, for projects I decided to use pen and paper. I ordered a stack of 1000 plain white 5×3 record cards and a pack of Sharpies.
I started by writing one project on each card, and laying it all out on the table (literally). Staff involved in the meeting can see all the known projects, ask what they are, and identify anything that may be missing.
Once all projects are defined, we agree what’s the next priority. This makes it very clear which project will be worked on next – and also what won’t be. Showing the number of projects can make it very clear if there’s a capacity issue. There’s only so much resource, so we can’t work on every project simultaneously.
Does it work?
As this is a very new process I’m trialling, it’s too early to say how effective it is. I’ll write a follow-up post on this.
Does Agile work for a website redesign?
On Tuesday 15th March, we launched a redesigned cityam.com. I’ll cover the various parts of the redesign in a future post. Right now, I want to talk about our use of Agile.
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.
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.
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.
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:
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:
We didn’t feel the layout was particularly compelling. So we decided to reuse the tiled layout from the homepage:
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:
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:
- Fail, learn, adapt
- 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