Meet ServiceNow's new design system

Hello everyone, I'm Andy McDonald, I lead design for design systems and accessibility at ServiceNow and I work on a great deal of our platform experiences as well. And before we dig into stuff, this good old bad boy we'll show it one more time. Obviously the disclaimer around safe harbor and forward-facing statements. And so with that, let's talk design systems. There's a few things I'd love to speak with you all today about. First go over our design landscape at ServiceNow, talk about how a design system makes sense for ServiceNow within our environment. Talk a little bit about our application frameworks and what it means to design within those. I'm going to introduce you to our new design system and the site, do a bit of an overview, talk to you about our design principles, about how we operate within our design culture and how you can extend that and how you work within ServiceNow as well. And then I'd also like to speak a little bit to the brand intention of the new site and the new design system because it does stand out with the ServiceNow brand as many other design systems out on the market and in the public space do. And then love to give you a little preview of what's coming because we are only just getting started on our design system journey. So with that, let's dig in and talk about the design landscape of ServiceNow and relative to design systems. But first, it's important to level set. Not everyone nerds out on design systems as much as I do every day and our team does every day. But what is a design system? A design system is a complete set of standards intended to manage design at scale using reusable components, patterns, creating a shared language and visual consistency across different workflows and channels. And that's a mouthful, right? This is really what we need to create to ensure design at scale for efficiency, for consistency, for the economy of our design resources within a given environment. And this is not a unique to ServiceNow problem, obviously with design systems, there's definitely a tried and true approach to delivering design and scale and publishing that and that is to usually publish via a website, most commonly a comprehensive, organized and inspiring design system. And those of you that are familiar with design systems, here are some standouts within software industry. We've got Google's Material Design, Microsoft's Fluent Design System and IBM's Carbon Design System, all with a unique identity in and of themselves to showcase their design sensibilities when it comes to how they craft experiences within their frameworks. But I think what is most important to keep in mind, and it's something that's top of mind for us as we're collecting and publishing our design system, is that every design system really needs to acknowledge the design landscape within that environment and who's actually using it to build experiences with that, to be the most effective. And so here is our vision before we dig into the creative, our vision is to publish a comprehensive design system to empower customers, partners, and our internal teams at ServiceNow to operate at the speed and scale businesses require. And with that, we have to acknowledge the environment in which we're working in and our application frameworks that do need design guidance. And these are the heavy hitters at ServiceNow. We have our Workspaces, built upon the Next Experience UI framework, which are curated, opinionated workflows from a component library put together within our UI Builder application to create experiences. We also have a mobile platform which is native to iOS and Android. And we have of course our portal, with Angular portals and then we have Core UI, the bones and the foundation of the ServiceNow platform as well with lists and forms. Typically what happens when you have this type of environment is you will have a parent design system that services as the foundational design guidance and the foundational components and patterns that then propagate down the subsystems. Because the efficiency comes when you take that overall guidance and then you apply it to something like a Workspace and you start figuring out the flows and the patterns that work at scale within an environment like Workspace, that will be different than an environment like mobile, which might have different patterns for the users within those conditions. But they should all be kind of derived from that parent design system. And so the economy of work of being able to have a designer pick up and create an experience that's consistent product to product within a Workspace, comes within those subsystems, typically, within a design system. However, there's a little bit of a problem with that when you see a lot of published design systems externally, is that ServiceNow, we create outta the box products that then customers and partners need to modify and edit themselves, right? So that can't be gatekept and behind the wall within an environment like ServiceNow. So typically, this is what you'll see. You'll see this very lovely design system that feels neat and tidy, but then it doesn't unpack how the applications are designed screen to screen, consistently, So this model isn't optimal, typically, for us and what we are looking to achieve. Or you might see a design system out there that is just a design system for one specific environment like the Next Experience design system. If it was just limited to that, you could only create Workspaces. But what about the rest of the platform? And so that is oftentimes what you'll see people in the industry doing is cater to potentially their latest development environment only. So that doesn't work. And if we were to move in a model like that, what we would see in a future of that design system is customers and partners would take that parent design system. If they don't have exposure to those subsystems, they'd be creating their own, reverse design engineering within that environment as well and then creating their ServiceNow solutions. And this wouldn't get us to the level of success that we want to achieve. So we're not gonna do that, we need to provide way more than that, and that is the plan and that's what we've been going after. And so I just want to come back to this vision one more time because when we talk about empowering our customers, partners, and our internal ServiceNow teams, I want to reinforce that this resource and this design system, including all the design files that we'll be publishing publicly, these are what we internally will be working with to develop our own products and design. So we are sharing and designing our own resources out in the open and exposing all of that to our customers because why keep that a secret? And with that, I'd love to introduce you to our new design system. For those that haven't visited our booth over here quite yet, definitely invite you to come visit afterwards. But our new design system is called Horizon. And Horizon is a site that provides centralized design guidance and resources to create exceptional experiences for all of ServiceNow's application frameworks. So if you're a designer and you need to dig into designing your first Workspace and you need to understand what is a Workspace, how do I think about Workspaces, what's the best way to take advantage of the Workspace framework for my specific space? What are the page templates and patterns that I should be trusting and leveraging that are already vetted by research within ServiceNow? What are the components I have to use? What about all the working files to mock up all of my experiences, all in one place. And same for mobile and portal and Core UI and to increasing depth over time. And so with that, I'll look to show you a little bit about site. It is available now, you can go to horizon.servicenow.com and pull this up and please check it out. It's got all the foundational guidance and I'll walk through the different sections of the site and what's being offered there and just a bit about what's coming. And this will expand over time and not even that far out, we'll be expanding very soon to go into greater depth in the different application frameworks. Jumping in, there is a get started section that speaks to the vision of Horizon and where the site and the project will be going. We talk about our design principles, I'm gonna review that in a little bit here with all of you. And then also getting started sections. So both designers and developers looking to dig in and utilize the design system, documentation and resources and files all have sections that are custom for them. And then also an area, it gives an overview of at a high level and those are the areas that we'll be expanding into greater depth in time as this design system is growing. This is a very robust section of the site at launch. These are the foundations for our design standards and these are overarching platform-wide design standards. So this is regardless of if you're designing a Workspace and designing for mobile, this is our stance and capabilities for accessibility, these are how to design for AI, this is we choose the words that we use in our products, the content design and the language patterns that we use. Data visualization standards, best practices, what visualizations to use for what outcomes, specifically, dashboard, design templates and more. And then all of the expected visual design standards for consistency across products on the platform, color, illustrations, iconography, how we create our colorful custom iconography and illustrations if you choose to do so as well. And more. So this is a very robust section of the site and this is agnostic of wanting one specific application framework. One thing I want to note in this section too is it's not only how we handle accessibility at ServiceNow as an example, but things that you need to take into account when designing products to maintain that standard for accessibility. How forced colors work on the platform. How we document these things when we create new components as well, and here are the templates for you to do so just as we have done. We've also got a beautiful new component library and with Component Playgrounds published here, we have all of our base components that are currently leveraged by the Next Experience UI Framework on here. If you're familiar with the developer's site and the Component Library within there, this is the new version of that, that will be a great compliment to the developer site. And in the future, all components for both web and the Next Experience UI framework as well as mobile will live in Horizon here. So it's beautiful new playgrounds, updated guidance, do's and don'ts, and illustrations for designers to dig into, find development documentation, and get right to the Figma file to start designing with that component. We've also started incorporating product-wide patterns within here as well. So this will be relative to specific application frameworks over time. These are some examples that we've got up here of the Workspace patterns we're launching with. So when it comes to messaging to the users, when to use specific alerts for what purposes, when to use intra-page messaging, when to use modal messaging, what are the patterns for these different messaging frameworks, and then of course design templates to just grab and go, to quickly design workflows. So being able to collect those patterns and a lot of those decisions that we've got through our products, founded by research over these years, trying to collect them and communicate them in context of all the design resources available. Speaking of resources, we have a resources section too. So of course, we've got our Figma community, all public with all of the templates, standards, libraries available to download for anyone to go check out. Also got links to our UX special interest group and some curated learning tracks that are relative to someone looking to design in ServiceNow. So again, being that one stop shop for people looking to do design work, whether you're a designer, frontend developer, looking to compliment your expertise, this will be all housed within the resources section. With that, I'd love to touch about our design principles. These help guide us not only to define the Horizon brand but are really just a collection of, our north star of how we design at ServiceNow and how we operate and how we make decisions. And with that, our first principle is fluid. And I will read these. Effortless engagement, everywhere. Our design ethos embraces intuition, creating a natural path between experiences that guides people on an effortless and satisfying journey. By providing clarity, every user should find themselves in a familiar, yet singularly distinct design environment. So when we talk about these different application frameworks, they are not one and the same, we don't want to pretend that they are, we want to make sure that the seams between them feel fluid. And so people are moving across our platform, feel both at home but they understand where they are and they understand the value of the environment that they are working in. Our second principle is symphonic. We want to harmonize diverse voices. Our experiences offer seamless connections across the platform, complete with the unique capabilities and innovative solutions that make workflows and workdays easier. By recognizing user diversity while valuing universal process, we construct elegant and intelligent products that anticipate and adjust to individual needs. So this is to acknowledge not only the broad capabilities across the platform all harmonizing together, but as well as the individual needs of the users on our platform, making sure that everyone can be a player within that symphony. And our third principle is resonant. Our well-loved digital experiences empower individuals in profoundly memorable ways. We create opportunities for ServiceNow and our customers' brands to stand out and captivate when it matters most. With passion and precision, our designs aspire to go beyond aesthetics to make an emotional mark and a deep connection in the world. I particularly love this one too, having worked on theme building capabilities here at ServiceNow, we want to make sure that not only are our experiences and our platform impactful, but it feels impactful when it's branded as yours and personalized as yours with your brand on our platform experiences. And then also to acknowledge the resonate, not only when it comes to satisfying aesthetics of a product that is designed, but how it makes you feel when it helps you accomplish the tasks at hand. Because that is the most impactful thing when it helps people do their work and help the work get out of the way so that they can focus on what's really important in their workday. So in summary, fluid, symphonic and resonant, and these are the the guiding principles in which we make decisions and path our own design teams. So fluid, symphonic and resonant. With that, I'd love to share a little bit about the brand intentions too, because you're seeing the new Horizon brand and it's something that's new, it doesn't look like ServiceNow corporate as much as you might anticipate. But as you see on the market, a lot of design systems have a unique identity that captures the design sensibility of what they're looking to accomplish. And that's what we've done with the Horizon brand. And you can see some of the aesthetics, both in the creative that we've got over there, what I'm showing you today. And if some of you're already pulling up the website as well, you'll see it as well there. As we were refining our principles, readying them to share them with the world, there was something that kind of stood out to all of us as we were talking about what was important to us in our design culture. And it was the statement of never done. And it's not that designers like to fiddle in perpetuity and it's not that things were incomplete, it was just that the longer that we were here and the more that we would learn about ServiceNow, the more that you started to see the potential. Regardless of your function and designers are no different, they saw the potential of the platform and then that's what started to inspire them, is that with all the technology advancements that we are working on and that the industry at large is moving along, that's what that potential is, it was awe-inspiring and that's what gets us waking up every day with a fire in our belly to do our job. And so we wanted an aesthetic that captures that, that captures the ever shifting spectrum of our customers implementing our platform, but also that yearning and that feeling that resonates with us when you see what's possible out on Horizon. That, and it's also a nod to our home in San Diego, which has that emotional resonant when you see the sun hit the water and you see that shifting spectrum there. So it's deeply personal for me, hailing from San Diego myself. You see this show up in a lot of the aesthetics too from the site and the creative that you'll see, that shifting spectrum. We're very proud of the beautiful work that we've put into this and the teams have put into this. And you'll see it show up as well in some of the more practical implementations for some of these identifying componentry within our component library. As we share more beyond this event and start introducing Horizon at large to the industry, you'll see a lot of creative pieces. Here's some examples, some video stills that we've got running from a video piece over there, as well as some of, these are the Figma cover sheets on the library file. So when you go to the Figma community and you download all these design assets, you'll see the Horizon name overarching there. So we're really excited to be a player in this space, put our name against all these other amazing design systems out there. Design systems are a community in and of themselves and we all love to nerd out and inspire one another. So we're excited to be part of the conversation, officially. I just wanna note that we are just getting started What you see on the website is just the tip of the iceberg and that's kinda wanted to share with you next and I would love to have conversations with you after this as well about that. We're gonna share a little bit about what's coming. So here we are, everyone loves a roadmap, here we are. We're just at phase one and we've launched the site with all that foundational content, I've walked you through just a high level overview of what that is today, and that is all up now. And the next thing that we are looking to tackle is we want full Workspace coverage. We want all of the fundamentals, Workspace 101, how to think about Workspace, how to take advantage of it, how to speak to your teams when you're ideating through designs, what are a lot of the patterns and templates for specific workflows that have already been vetted? And here are the design resources to start. And then of course all of the UIB components with the gorgeous new formatting, for our usage guidelines, playgrounds, et cetera. And all of the links to the Figma to get started. Phase three is more of that for our other application frameworks. So phase three, what we've done for Workspace, we're gonna do for native mobile as well. The full library on the site in context with all the foundational guidance, fundamentals, supporting Figmas, et cetera. And then for our service portal and Core UI, we'll make sure that we'll have all of the templates there, foundations, when to use it, when to decide, how to piece these together into overall solutions, and so that is where we're ending up on phase three. And with that, I would love to invite everyone that hasn't had a chance to come visit us here at our booth, it's just across the aisle. We would love to hear what types of design resources and guidance are important to you and your teams for us to achieve that goal of helping scale design at ServiceNow with our customers and partners. There's a little survey if you wanna take a snap at it. If you do have another obligation to get to too, feel free to scan it and and run along and come back and visit us over at our booths. And with that, just want to thank you all so much. Alright, take care. (audience applauds) (upbeat music)