What are some good concepts to be mindful of when integrating two separate websites?

Question

Background: I am working with a client that is not ready to let go of their archaic website. We are designing a new feature that will be hosted on separate domain under their branding with the intention of integrating the two sites in the future. The client wants the two sites to be as seamless as possible.

Of course, this is tricky because building a separate extension of their site is going to require updated design principles and technologies. Additionally, linking between both sites is a whole challenge in itself (where to link, how not to lose users between both sites). Any tips from you savvy UX designers out there?

Answer 1

It's a bit hard answering this as a general question without specifics, but I'll try.

I think the two main options you have to make the two sites seamless is either try to make them appear exactly the same, or make them "naturally" or "logically" different.

If you try to make them exactly the same, probably the main things you'll need to maintain are the page's outer layout - i.e. navigation bar, side column, etc. and the color scheme.

However, if you find a clever way to make a natural connection between the two sites, perhaps you could make them different "on purpose", but with some elements to clearly show they are linked. Two examples that come to mind would be "inverting" the color palette, or taking example from this site that's clearly connected to stack overflow.

Answer 2

You need your client to articulate what seamless means to them. It might just be the colour palette or basic representation of the brand. It might be that the user can move from old site to new and complete the task at hand with the least fuss, abandonment or error.

There reality is probably a mixture of the two. What I tend to do is focus on the new site first. Get it looking and working the best way possible. Then look at what needs to be retrofitted on the old site.

Used this approach for a recent project, which was just a homepage update. We created a completely new page (within the specifics of the brand) and then refreshed the colour palette on the rest of the site only using css updates.