6 focus areas for UX and branding

The more your business performance depends on your online presence, the riskier a redesign becomes; there is no denying that. But the same holds when your site or mobile app has less influence on sales, is built for a different kind of interaction, or simply provides information. All the more reason to approach the process of rebranding online with care. Obvious, of course – that is how you handle every change, but normally in manageable chunks. A user story along the lines of ‘a complete online rebranding’, however, does not feel particularly manageable. A nice challenge, then, to work out a scenario and an approach that minimise the risks. And there are always risks. Below are six topics that deserve extra attention.

“The more your business performance depends on your online presence, the riskier a redesign becomes.”

1. The pace: big bang or phased

I will leave the pros and cons of a big bang rebranding scenario aside for now, but in practice the website transition almost always happens step by step. Certainly when the site:

• has been optimised for conversion,

• is complex, and

• consists of several systems.

The big advantage of this phased delivery per backlog item is that you can monitor and adjust continuously. That limits any negative side effects. But – and this is worth realising too – you also temporarily miss the visual power of the whole.

Trust in the design and in the designer plays a major role. Far too often, graphically oriented designers extend their offline designs into online channels and assets. I understand all too well why that makes a UX specialist nervous. And it results in a questionable implementation (read: a long lead time). If you can influence the choice of designer, be very sharp about their online skills and experience!

“Far too often, graphically oriented designers extend their offline designs into online channels and assets.”

If you ask me for my preference: I am not in favour of (temporarily) changing parts of pages. Just the logo, for instance, or a call-to-action button. It is better to phase things by tackling one section of the site at a time. All product pages in one go, for example. Otherwise you simply cannot measure the whole as an integrated experience. People do not judge elements and components in isolation, so if you do measure an effect, that measurement is irrelevant by definition.

A completely different aspect of pacing is staffing. A full rebranding – and by that I do not mean a logo swap and a bit of recolouring – requires substantially more development capacity. That is never simply available, and with a tight labour market it is rarely easy to arrange flexibly. Do make sure there is enough visible progress for customers to see that you are in a transition phase; otherwise the brand experience stays muddled for too long.

2. The interaction design: change it or not?

Even though you cannot see visual design in isolation from interaction design, the rebranding can take place without changing the interaction design. Latent needs for change do tend to surface during a rebranding, though – the momentum is there, after all. It is therefore more efficient to tackle everything at the same time; for the brand experience that may well be better too. But the impact is then even greater, the whole is harder to oversee and the effect can only be measured as a whole. From a project control perspective, not recommended. It is a choice. Make it deliberately.

Visualising content with videos and infographics has a strong impact on the brand experience, but also on the interactive wireframe and therefore on the amount of work. Add to that the fact that the group of participants in your project becomes remarkably larger. Another difficult choice, although this is something you can implement very well per section of content.

Incidentally, you need not fear that changing the interaction model later will require yet another adjustment to the brand identity. If it has been developed well, there is enough flexibility in it to follow changes to the site. It is wise, though, to analyse user stories and the roadmap. Where possible, you can allow for them in the visual design.

3. The foundation: connecting offline and online

In a rebranding you start with the generic design of the basic elements (called Atoms in the Atomic Design method© shown below) for all online and offline brand carriers. It is vital to take online/digital as your starting point and reference. At least, if you run – or intend to run – your business mainly online. In that case you do not want to define colours in PMS and CMYK and derive the RGB versions from them, as we did for years. No, the other way around. And typefaces, especially if they are characteristic of your brand, have to perform well online (in legibility and load time). Do not accept doing something different online instead.

For many traditional corporate designers that still feels uncomfortable. If such a design agency is a given, intensive collaboration with your UX specialists and visual designers is a must. That goes without saying, of course, but then genuinely from the very start. After all, you only get one chance to lay the foundation properly. The image below shows a design system we use to connect offline and online at the base. From that shared base, the specialists can then design the brand assets for the various channels; centrally guided by the Art Director.

The Atomic Design model by Brad Frost

4. Collaboration

Rather stating the obvious that collaboration is called for. If your organisation is set up along agile lines, plenty of useful connections between disciplines already exist. A rebranding, however, calls for a temporary but enormous intensification of visual design. Organising capacity and updating the backlog is no small feat.

Bottom line: you cannot create visual design without close collaboration with:

• UX specialists/interaction designers (who know what the intended interaction/flow per page is)

• developers/front-enders/back-enders (who know what your platform can do)

So schedule (bi-)weekly sessions in which the visual designer can talk the team through newly developed components and pages. Allow plenty of time for feedback and, where needed, research. And while you are at it, if you want a result everyone supports, involve the professionals from Proposition/Product Management and Marketing & Communications. They will undoubtedly have long-cherished wishes and ideas for improvements; go and collect them!

“If your organisation is set up along agile lines, plenty of useful connections between disciplines already exist.”

5. Data analysis: before, during and after

Data analysts are rarely involved in the design process, and that is a shame. Even before the design is made, they can provide input on behaviour on the website. And, just as important, help formulate a hypothesis about why the new design will perform better. That is how you connect the KPIs of the online strategy. Quite hard to do, because hard science is lacking, as far as I have seen. But it obviously creates confidence and therefore the support you need.

Flipping the switch is a hugely exciting moment, whether you take a phased approach or do it all at once. Web analyst Rob Esenkbrink – who has given me a lot of insight on this point – has a clear preference for using a beta site during a rebranding. That way you immediately test how the design is interpreted and appreciated. The best feedback is, after all, how your visitors use it. With or without iteration, you then implement the new design once it has proved to work well. A form of A/B testing, but in bigger steps.

After that comes the aftercare of fine-tuning. The business comes up with comments and questions, and online analyses produce experiences. A data analyst unravels these and translates them into input for optimising the design. Not letting data analysts participate in the design process leads to more trial and error. If you do not have them in house, at least have your site properly reviewed over a period of time or, if need be, just once. There are plenty of analysis tools, but you also have to be able to translate the data. That is a skill.

“There are plenty of analysis tools, but you also have to be able to translate the data.”

6. Sharing: brand portal or UI library

In practically every rebranding I guide, I find (sometimes considerably) more websites than the client thought possible. Regardless of whether that is sensible (a question we have never yet been able to answer with ‘yes’), it means you are dealing with several developers; inside and outside the organisation. On top of that, more complex websites usually have multiple development teams. So it is important to share what has been developed. This improves efficiency and ultimately delivers a consistent brand experience.

Brand portals facilitate this for you. That is to say, they share the basic elements, basic designs and applied designs of the brand style. Good brand portals can do this for non-static designs too, but unfortunately those are in the minority. With elements used online, such as buttons, input fields, notifications and so on, you want to be able to see how they behave. Think of a mouse-over, animations, and so forth.

So brand portals, provided they are feature-rich, are perfectly suited to sharing visual design. For a developer, however, that is not enough. For sharing built components/patterns (headers, footers, tiles, menus, etc.) and possibly generic pages, brand portals are not considered suitable. That is a pity, but understandable from a developer’s point of view. They use their own UI libraries in which developments are shared, including experiments, tweaks and work in progress. Developed centrally, cross browser, and tested for usability and performance. Version control then matters. This approach to collaboration differs from that of brand portals, which are more geared towards making end results available. The bridge between the two worlds can certainly be built, but in practice I have not yet seen it work successfully.

Sharing is often not relevant, by the way, for components that are developed platform-dependently. Diverging interaction models of sites or parts of sites can also limit how useful sharing is. The ‘main site’, the careers site and ‘About us’, for example, usually already differ so much that many components cannot be shared.

In closing

Unfortunately, uncertainty tends to dominate many online rebranding projects. In other words, the emphasis is on preventing misery. Not that strange, of course, because many people have never had to realise a complete rebranding online. But that fear is counterproductive. And yet it can be organised so well that you can get the job done together with confidence. What is more – and I would like to stress this – a redesign can also offer plenty of opportunities. That perspective often gets buried under the emotion. Must offer them, in fact, provided the principles and the execution are sound.