And I think we can start. Can you hear me well?

Okay. Perfect. So welcome, everyone, to a journey through the interface language, and more specifically balancing universality and individuality. So I would like to kick things off, with a little bit of, interaction. And, so here, I've selected 3 screenshots, from 3 different applications. And I've concealed the images on purpose so you don't get too distracted. And just focusing on the user interface elements, I would like you to tell me in the chat and guess which brand or application name is behind, a, b, and c. So, yeah, don't be don't be shy. For for a white guess. Yeah. Okay. Alright. Nice. Yeah. I I see some good answers there. Perfect. So, yeah, this is the reveal. So, indeed, we have, Instagram, Reddit, and x.

And just, focusing on, on the user interface, distinguishing, between these apps is, not as clear cut, as you think, especially because they follow you see, they they have very similar tab bars, and they use, similar architecture, as well. And almost as if they were, made out of the same template. And this is a good thing, in a way, because as the user interface design practice matures, we tend to converge, towards similar patterns. But the other thing is, when it comes to what makes your application unique and, special, Well, we we also would like to to have a little bit a little something, that make, it's easy to identify. So so this is all about, finding this delicate balance between standardized, user interface, but also keeping, an individuality. So in this balance, on the one hand, we have so all the tried and tested interface standards.

So these are all the cues that, really, ensure that you understand straight away how to use it, how to navigate it. It also provides a good accessibility, so everyone for everyone to, properly access and interact with the interface, but seeking solely, to these may leave us with a very generic interface that blends into the crowd. On the other side of the spectrum, we have our brand identity, so that this is your logo, your colors, the tone you use, the shades, the icons. So definitely they bring a lot of personality, and recognition to your product. Yet you see, in this example, an overemphasis, on this could sacrifice usability for style. So what we are really, looking, for is finding this sweet spot and this balance between something that is distinctive yet user friendly. And this is our topic today. A little bit about myself.

So I'm Catherine Starosky, UI design director at Schneider Electric, and I am in charge of the team that defines and maintains the UI foundations and visual language across, to, like, 200, even more, applications and softwares. And before diving into the corporate world, I spent 7 years running my design practice in London and helping companies, defining their brand strategy and brand identity. I'm really I like to define myself as a puzzle, solver. I like piecing together a complex design challenges and create seamless user experiences. And I have quite the playground, at Schneider Electric. So for those who don't know, Schneider Electric is the leader in digital automation and energy management. And we address a lot of different sectors. So, it could be for residential. So, private housing, buildings like offices and hospitals, different factories, across various industries. We also have solutions for data centers and all the way up to, entire energy grids. So for for a district or even a country.

And today, I will talk to you more specifically about, color definition and shape coherence and overall the art of blending, interface, design, and brand integration at Schneider Electric. So let's talk about colors, first. So using your brand color in the user interface is an easy way to make it, recognizable straight away. And the green you see, here on the right is our primary brown color. Unfortunately, when it comes to standards, and especially accessibility standards, we run into some contrast issues with the screen. So it has a very low contrast against white background or light background. And you can see in this example here, the text is very difficult to read. And so we we can't really, allow that. So what do we do when our main brand color doesn't comply, with accessibility standards.

In our case, we found the answer in our logo history, and here you can see, the evolution of the Schneider Electric logo over the past decades. And more specifically, I would like to you to look at the 2,008 version, and you can see that this one, uses a darker green than our current, color. And the truth is that this color, darker color is still in use, and cohabitate, with with our lighter green. It's still, present in our signage, in our products, in our packaging. So in terms of defining, colors for digital interfaces, we now have options to use. And back to our contrast issues. So, okay, we have seen the light green has a very poor contrast against white, but our darker green has a good one. And conversely, the light green, has a very good contrast against a darker background.

So here's what we did, because we need, to provide, a light and a dark theme for all of our software and, applications. We used, the light green on the dark theme and the dark green on the light theme. So by really strategically employing, our 2 brand colors, we maintain accessibility without compromising the brand identity. And this way also we bridge, the gaps between the more modern communication of the company. And we also keep a common train, with our hardware that is using the darker green. This solution allows us to bridge the past and the future and harmonizing tradition and innovation. My next story is about shapes. And you might know, that shapes hold meaning.

And it's very true, at Schneider Electric because our interfaces usually look like this. So we have plenty of shapes, a whole tapestry, actually of symbols and signifiers over, hundreds of different softwares. And these shapes, can communicate a status alerts. They could be electrical symbols. They could be, safety measures. And on top of that, we should add more symbols, that represent our brands, to to to make it immediately recognizable. So so how do we maintain, this coherence and brand recognition amidst this technical complexity? And really here, the simplicity, is key. And this is this is we really wanted to to keep it simple. So we went back to our brand essence, and our brand essence is life is on.

And it's specifically represented with this on symbol. And if we look at it more more closely, we not only have a color, we have 2 shapes, a line and a circle. So a line that guides and a circle that signifies. So it's a simple yet very powerful narrative that can be woven into every interface. And if it were more complex than that, it would it would really overpower the message, and never be able to function. So we really decided to apply it selectively to only, the common, user interface components. So our tab bar, loader, buttons, to really enhance the functionality without overwhelming. And the good thing is that it creates a familiarity because the way we crafted those components, we make it we made it.

So the line, always tells the user where they are. And the circle always expresses how things are and their status. With this consistency, we ensure that our message resonates across different platforms and tying our digital presence together without, sacrificing the technical integrity. And here's the beauty. Because it's so simple, it allows adaptability. And for each product team, to turn it up if they want to, depending on their domain requirement, and explore more visual evolutions of this visual language. So really by blending, the standards with identity, we've crafted, sort of puzzle where each piece fortifies the whole for a unique digital presence. But now, the question is, how do we ensure that this puzzle is shared, across those different applications and is used, properly.

So what I've shown you, are 2 decisions, really in a whole, well, tapestry of decisions, design decisions that have been made to work altogether, like a puzzle and really like a system. And this is and this is the way, we can share, those decisions is through a design system. The design system is really a framework of design decisions, translated into libraries for both developers and designers to use. That is shared, across a product portfolio, allows to converge on a cohesive experience. And the benefits of a design system, are really not only to create, one run experience. It also allows to align between different, technologies and platforms, and ultimately to speed up the production process for product teams, and time to market because they don't have to reinvent the wheel, all of the time. And our design system is called quartz.

And, actually, I will I will have a lot more stories, to tell about how, while we share, make a design system, adopted by a wide variety of of products that these might be for another time. As now we conclude, this journey, I would like to invite you, to the conversation and asking questions in the chat. You can also reach, out on LinkedIn, and let me know how does your, puzzle look like. Thank you. Okay. Let me see if we have any questions. Oh, how does phone choice, come into it? Yeah. So phones, so it it depends. So in our case, we had already a defined font, that has been defined by our brand team. So, we actually use this one, But we do have, defined variations as well. Again, coming to standards, especially if we need to address, a lot of special characters.

So so, yeah, we we we had to to to pick, different phones to follow to follow requirements. So, yeah, it's it's always, you know, again, a balance and a discussion, to find the right solution. Okay. I see we have no more no more questions. So, happy happy to connect, and, thank you for your attention. And, hopefully, this was this was useful. Thank you. Have a nice day. Bye bye.