Simple signature complex interfaces
One brand language for Schneider Electric interfaces
From an intention to bridge the gap between digital and physical products, B2B and B2C, a new visual language was defined in 2021. Part of this endeavor was to revisit and design the brand signature elements on digital interfaces to better fit the new intentions while matching product constraints.
Why branding is important?
Let’s make one thing clear: branding is extremely important.
Suppose a product interface design follows all the best standards and practices. If the hierarchy is clear, the color contrasts are good, and the ergonomics are applied, there are chances that it looks like any other companies’ interfaces that follow the same standards and practices.
Then how do you differentiate from all your competitors? The answer is by offering a unique experience conveyed by the brand design.
Branding comes on top of the standards and allows a company to communicate its values and personality to its users through immediately recognizable products.
It is all about creating meaning
Here are the different brand identity elements: logos, colors, icons, and font.
While using these elements freely across different applications and software might result in a sense of visual resemblance, this is not enough.
In other words, one can’t just slap a logo onto a header and call that branding. Digital interfaces are a coded world where each layout choice communicates clear information that supports the user experience.
For communication, there is the need for a language, and for a language to exist, each visual element must have a consistent and explicit meaning.
Little room for creativity
So the challenge is clear: How do we create a visual language specific to Schneider Electric that integrates and supports interface best standards?
Well, there are a set of additional challenges to consider:
How do we create a visual language that conveys Schneider Electric values?
This one seems obvious but is worth reminding. The visual signature should express the brand’s personality.
How do we create a visual language across several domains where each has a defined set of symbols?
When industries already use their codes and conventions, especially to represent alarms and data visualization, the brand language must coexist and integrate within a busy and voluble interface.
How do we create a visual language that scales across multiple devices?
Not only spans multiple domains but also devices: mobile, desktop, and tablet, also any size of embedded screen. We have counted 300+ digital applications to date.
How do we create a visual language that maintains its meaning across multiple cultures? An additional variable to consider is how a certain shape or color can be perceived by users from different backgrounds, countries, and cultures.
How do we create a visual language that aligns with analog interfaces and physical products? Finally, to bridge the gap between physical and digital by reusing codes already in place on hardware to create a coherent product experience.
In light of these constraints, let’s rephrase the challenge:
How to create a transversal brand signature across hundreds of software and applications?
Keeping it simple
With all the constraints listed above, the solution is determining the common denominator acceptable across any app or software. We aim for the minimum constant language that scales to adapt to every context.
The starting point is the brand essence that represents the core of our brand values. Its “on” symbol is made of 3 elements that we reused to create a universal visual language.
This simple yet effective language can be used consistently in all interface components to create familiarity and guide user decisions on all Schneider Electric products.
The green is interactive.
Because “life is On” is our tagline and we are all about energy, the signature color is seldom static. It reacts to the user’s interactions and attracts their attention to interactive parts of the screen.
The line is the guide.
It indicates a connection or a transition.
Users can follow the line to know where they are.
The circle is the indicator.
The circle is a status indicator.
Users can rely on it to tell them how things are.
The logo is part of the story.
As interface elements using the signature color are interactive, so is the logo.
Inspired by website practices, the logo becomes useful and plays an active part in the interface. On software and apps, it doesn’t lead back to the home page, but it contains information about the application, allows to provide feedback, and integrates into the application toolbar feature.
A branding that makes sense
Thinking the branding as an element that supports the user experience instead of competing with it guarantees a sustainable and scalable symbiosis.
The journey doesn’t end here. Brand identities are living systems that constantly expand and evolve.
This first step aims to create a consistent signature that coexists with the applications’ content and creates familiarity through a simple and universal language while keeping the door open for further explorations and means of expression through interactions, visualizations, and animations based on a simple set of visual codes.
