Branding and User Experience: enabling a seamless customer journey through Design Systems

Since the spreading of Design systems standardised the digital experience in favour of usability, many digital products ended up looking the same. On the other hand, a relevant part of the relationship between the consumer and the brand today is established online, necessarily determining our perception of it: that’s why we can’t conceive branding and UX as separate departments.

How can designers make these two aspects coexist? How can branding choices affect and even improve the UX of a digital artefact? How can we better position a brand by how we use its platforms, not only by how it communicates with us?

Our special guests tried to answer these questions by witnessing the methodologies of a big digital consultancy firm and a renowned independent creative studio.

How to build consistency into the Brand Experience? — Giulia Di Gregorio & Camilla Zani

Brand experience is like a dialogue between the brand and the users and must be consistent with both the users and the brand’s goals. No one-size-fits-all structure nor a fixed way to do it; the most crucial moment during the design process is the discovery of the brand and the understanding of the people who work there to get to the perfect key. In fact, the alignment sessions consist of workshops and co-design plenaries to fully comprehend the company’s essence and how it wants to appear in users’ eyes. These sessions aim to bring together all the people involved in the project and the designers to discuss the brand’s ingredients, its vision and how it speaks to customers. In this phase, it is helpful to imagine the brand with a specific personality, as it was a person communicating with the user.

Innovation start from people, placing them at the centre. This, however, should not affect the other drivers of innovation: technological feasibility, business and social sustainability and coherence with the brand.

Not considering all four drivers of innovation is a mistake. What could happen if the brand or the people aren’t considered during the design process?

​​Therefore even if User Experience designers tend to focus on the user’s perspective, it is fundamental not to ignore the essence and role of the brand during the design process. If that was the case, all the brands’ services would look the same. Giulia Di Gregorio

Example of a brand’s mood board

How to analyse the brand? What are the first steps? Usually, brands already have a projection of themselves, so the analysis starts by looking at the brand’s advertisements and visual style. The mood board is a straightforward tool to build and effectively communicate the company’s core and coordinate all the characters involved in the project.

Taking a French company mood board as an example, it is clear that the enterprise’s style reinforces the “Made in France” concept by following a cheerful and elegant fashion. The style is evident and perceptible in the website, the client service, the newsletter and eventually in the packaging of their products when they are shipped to customers. The brand experience is solid and consistent across all company’s touchpoints, creating an omnichannel experience. So when the designers are asked to intervene in one of the company’s touchpoints, they must understand how to respect the brand’s essence, accommodating any changes and evolutions but remaining consistent with the whole brand experience.

User’s touchpoints

If we forget about the people we’re designing for, we risk putting the brand’s personality ahead of their needs and goals. Imagine the product as if it was a person with personality traits: it could be provocative, ironic, lively, serious, assertive. So you will have created or simply aligned your design with the personality of the brand. There are times to express the brand’s personality and times to avoid it, clearly without ever distorting it.

For example: why be brilliant when a users are trying to make a payment but fail? We risk irritating them even more.

The brand personality should always be appropriate according to the different phases of user interaction. For example, during the payment, users are obviously stressed; at that moment, they do not want to sense a mocking or humorous style because it does not reflect their mood and the brand may appear unempathetic. Therefore, the brand personality needs to be modulated depending on the level of tension users are experiencing and the level of concentration needed to complete a task.

Design System is one of the most powerful tools to give consistency to your design. A good Design System development process must be explicitly created for the brand to ensure originality and consistency and considers every touchpoint of the company and analyses each little detail of the experience in a schematic way. Following this method, the user will have a consistent experience with the brand, developing a sense of familiarity and fondness for the company.

Camilla Zani gave practical examples of the diverse ways the UX can be consistent with the brand, analysing the “add to cart” option of two online shops to buy the same new product: the two shopping experiences have two very different targets, two different purposes and reflect two different brands.

When designing an experience, don’t just think about current trends, but remember the target you are designing for, the objective and stay true to your brand.

Watch the video to find out more

Should Online and Offline Brand Experiences be tied? It depends — Andrea Pavan

As is known to many, Don Norman is the inventor of the word ‘User Experience’. He applied and brought UX into large companies, starting by Apple, where he analysed the whole brand’s user experience, not merely when the user interacted directly with the technological device. Instead, he considered every aspect of the user interaction with the product, even before the customers knew about the device.

“User Experience is how the brand communicates with its clients at every step of the interaction, including any touchpoint. UX is not only a user in front of a screen; it is how a person interacts with a brand. It includes any customer’s contact: services, the atmosphere in the shops, the design of the products, the smell of the packaging etc.. User Experience and Customer Experience coexist in a reciprocal relationship.” Andrea Pavan

To grasp the importance of brand experience and the possible differences, we analysed two of the projects by Leftloft, an independent creative studio working on commercial and cultural projects from beginning to end.

Fiera Milano’s digital signs on site

The first project is Fiera Milano, an enterprise that organises, hosts and manages world-class events in its halls and around the world since 1920.

The main aim for Fiera Milano was to simplify the overall brand user experience and unify it according to a single style in each touchpoint, also considering all the subbrands. Layouts, colours, and typography had to be consistent, from signage from the offline experience to the online experience.

Fiera Milano Design System by Leftloft

Using the Design System is essential to make changes consistent with the rest of the context within the brand. Additionally, the Design System helps establish an order and brand rules, guiding future projects and ensuring a continuous brand experience for the user.

The original Design System of Fiera Milano included many sub-brands, information and directions. The first step was simplifying the directions to make navigating and structuring the attractions easier. Leftloft started by creating insightful content. They photographed the spaces for sales proposals, designed icons to represent the different sectors and services and then tried to give a sense of unity to the sub-brands, updating the Design System. So even though the Milano Fiera experience is complicated and full of inputs when users are physically in the halls, their digital experience and search for information had to be as simple and coherent as possible.

Fiera Milano Sub-brand digital user interface

The second example is Pirelli Hangar Bicocca, a non-profit foundation established in Milan in 2004 by converting an industrial plant into an institution dedicated to producing and promoting contemporary art.

In 2014 Leftloft redesigned the entire Hangar Design System, the idea was to keep the design off the stage. The protagonist was the art, its spaces and its artist. So the style had to be minimal, clean and precise to let artists speak for themselves and not risk the style of the catalogues and advertisements overpowering that of the artist.

The website was also initially designed very simply, following the concept of ‘simple design’. But soon, the designers realised that the digital experience of the exhibition had to represent the style of the contemporary art space, where everything is cutting edge. Indeed, to adequately represent the art space, the online design has to mirror Hangar’s style even when the user is off-site. In fact, the website has minimal colours alternating with blurred areas and bubbles that contain information about the exhibition and the artists, giving it a glassformist, innovative and contemporary style that adequately reflects the brand's soul.

Pavan ends the keynote by giving three suggestions for designers who want to properly develop a consistent experience:

  • Usage: Users spend most of their time on the sites. This means that users prefer your site to work the same way as all the other sites they already know. (Jakob's Law)
  • Simplicity: The time it takes to make a decision increases with the number and complexity of choices. (Hick’s Law)
  • Design: Users often perceive aesthetically pleasing design as design that's more usable. (Aestetichs-Usability effect)

Watch the stream of the even to find out more

These lectures were held during the 28th UX Talk organised for the students of the Master in User Experience Psychology by Politecnico di Milano & Università Cattolica del Sacro Cuore and of the Higher Education Course in User Experience Design by POLI.design. Follow us on LinkedIn and Instagram to be updated about the upcoming UX Talks, always open to the public.

Curated by Alice Paracolli

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Experience Design Academy

Experience Design Academy

118 Followers

A polytechnic centre of excellence dedicated to User Experience - by POLIdesign.