With a phased UI change, how do you ensure the end result is uniform?

Question

Currently, we have 3 primary web apps all with their own look and feel and backend systems. In some places, the apps try to solve similar, if not the same, problems. A number of our customers subscribe to more than one of these apps and have to deal with the differences in the systems and the duplication of effort and data. We're working on a multi-year project to merge these apps into a single solution. Better for the users, and better for us. As each phase is completed we're releasing the improvements to our user base.

As we get deeper into this project I'm becoming more worried about the end result looking like it belongs together rather than something that was developed over an extended period of time. How do you prevent each phase of the redesign/conversion from having its own look and feel?

Answer 1

A pattern library may be what you're looking for. A good example for this is published by Patternry, who also sell this as a cloud hosted service (I'm not affiliated with them in any way). Essentially a pattern library contains visuals on what the result should look like, but also information on when and how to use it, as well as code snippets and more.

If you decide to go down that route, you should make sure that this pattern library becomes the definitive place for where this information is stored. All design documentation should refer to it where relevant, and it needs to be actively kept up to date.

Answer 2

There are probably many ways to achieve this, but here are some I've used in the past:

• Create a set of style guidelines and make sure that when every page/component is designed and implemented it's checked against these.
• Use a component toolkit, either one you buy in or one you create yourself. If you build your UI out of the same building blocks it will look consistent even if there are other differences between the pages/components. If you need to tweak the UI, or some new feature is implemented, by changing the component it will appear globally without any effort.
• Build in some time to the schedule to revisit previously completed areas to ensure that they still match the current standards etc.

Answer 3

As others have said, some established guidelines can help keep you on track.

Also consider using a design framework in the transition such as Bootstrap from Twitter. This ensures your designs' CSS is all based on the same stuff meaning you can easily make changes to all your different sites while maintaining a unique style on their own.

An advantage of a CSS framework is that they can be highly customized so you can create your own base styles and specific styles, however there's some overhead in converting your sites' designs over to the framework.

When you need to merge the web apps into a single app, the framework will be your best friend; you've already made a single design and your single app can simply shed the differentiated designs of your olds apps and create a fresh one.