Designing for Content Migration

Content migration is generally seen as a massive technical challenge, quite rightly so when you consider the complexities involved. You only need to read the mid-project body language across the office to appreciate the challenges it can pose, particularly when it involves replacing a CMS and migrating a lot of content which isn’t easily automated.

As designers, we play a crucial role in the process. Ultimately whatever we design will house the migrated information and set the path for a smooth transition. The process provides a number of challenges, all of which need careful consideration and understanding. So what's the right approach?

The right design approach to migration

Sites that have been live for a long duration often acquire a lot of pages and functionality. This can lead to inconsistency between components and varying ways of presenting the same content. Older sections might look and work completely different to newly created sections but display the same content. From a designer’s perspective, it’s important we identify most of these early on so we can flesh out the right approach to design and build.

Our proven approach is to design a series of modules instead of a series of pages, this is particularly effective if there is a lot of content to migrate. By grouping similar elements, we can design one solution or component that’s flexible to work in a variety of ways. This approach not only makes a large site easier to design and build but it's also easier to manage once it’s live. These modules act as building blocks which allow the content managers to build pages or even entire sections of a site easily whilst keeping in tone with the design guide. Here are just a few of the elements we have to consider:

Component design
Making a single module or component work in multiple ways, with different content and still look good is always a challenge. I always design for the worst and best case, so I might have two variations of a slice, one with a grid of images and text, and another with just a grid of logos. I’ll create a style that works with both, so logically every variation in-between should work as well.  

By designing modules that are flexible, there are fewer elements and more variation. Considering modules must also work on different devices, the number of variations becomes endless. 

Responsive design
Almost all web designs need to be responsive. If the existing content simply won’t integrate well into a smartphone or tablet, then it’s the role of the designer to make it fit. How do you get a table to work on mobile? This is a challenge that has broken many a designer… 

Image migration
Migrating images can be a common sticking point too. If they have been designed to fit into the preexisting design boundaries or need to be updating with higher resolution images, they might not adapt so well when travelling to a new website. This can be a challenge and leads me onto my next point.

Same content, different UX
One of the most obviously and common questions is: how do you design a more modern website with the same content and brand? Particularly as the end product will be largely judged on the way it looks and works.

We tend to approach a migration as an exercise in de-cluttering, as many years of ownership and styles can make a site feel very dated and busy; so by simply been consistent with typography, colour and space, a website can begin to feel a lot cleaner and modern.

A better structure
Consider creating a clear layout and grid, as this often improves the readability of content and provide visual hierarchy and structure. Something as simple as empty space between sections or components can help a page breathe and make content feel less constrained and forced. If the most important thing on a content page is the article, then why distract the eye with lots of promos and links tightly packed into a right-hand column?


These are just examples of the sort of thinking involved in designing for a migration. You’re never simply designing for what you can see on your screen, but always considering the different ways something could be used. You’ll never cover every possibility either, that’s why it’s important to keep your front-ender sweet… it doesn’t hurt to be prepared to make a lot of coffee!

A lot of these techniques are basic but fundamental to good web design. They shouldn’t get in the way of applying an existing brand but should help modernise and enhance that existing look and feel, and perhaps even introduce a different take or angle.

To leave you with one final and important thought; always be thinking of ways in which you can improve on the existing site and content.

As always, get in touch with us if you would like to discuss your design needs further.