[Music] everyone welcome to you glass on air I'm Janet mash I'm the VP of Marketing here at Davos consulting and I'll be moderating today's webinar make it pop designing elegant service portals your users will appreciate and I'm very excited to introduce you to our presenter Sarah Wilson she's portal developer at Gough s consulting hello awesome so before we get started we'd like to give you some background information on guy fast so fast consulting is a consulting firm that is dedicated exclusively to service now as an elite ServiceNow partner our expert team of developers and architects have worked on both sides of the table so on the customer side and on the consulting side our company was founded by ServiceNow architects and we're proud to have a team of over a hundred experienced consultants and a range of accolades that you can see here on the screen in addition to the presentation please definitely submit your questions will be monitoring the Q&A throughout today's session so definitely send over any questions for Sarah to answer at the end of her presentation and as another perk of attending the webinar today we'll be giving away a $50 Visa gift card so definitely stay until the end we'll be announcing the winner after the Q&A and now I'd like to hand things over to Sarah to take it away and share her expertise practices on ServiceNow portal design go for it Sarah all right hey everybody like Janet said I'm Sarah Tolson today we're going to discuss a few ways you can improve your sort of service portal design to ensure your users have a portal that not only solves their business problems but provides an experience that your users will enjoy so why discuss design service portals been out for a few years now and increasingly our clients want custom portals that reflect their branding culture as well as supporting that functionality their users need with little to no design guidance we often end up with what I'm gonna refer to as millennium falcon portals i've seen some real Jedi Masters on the platform customized service portals to do some amazing things for our clients some of these masters have come to me and noted that color fonts and other design elements just aren't their forte and just aren't something they're comfortable tackling they're busy making it go point-five pass light speed why bother with a new coat of paint well let's consider Luke Skywalker's first impression of Millennium Falcon it took stormtroopers to encourage him to get on board I'm not thinking we want to send stormtroopers after our users to get them on board with using service portal which brings me to my first point regarding the importance of a good design this year's Nelson Frank's salary survey revealed that user adoption challenges are the number one problem you can expect to face during a ServiceNow implementation a slick UI UX experience that is easy on the eyes and brains of our users can help alleviate this challenge by building user trust and also by encouraging user adoption if the user if the UI looks like it can be trusted to get them where they need to go they're more likely to get onboard this UX law is known as the aesthetic usability effect second good design communicates more than just presenting pretty pixels good design presents information in a way that can be easily understood if your users can't find their way around your portal and achieve what they've come to do even the most beautiful you are in the world will have failed as a design we're going to explore some design concepts that help foster good intuitive communication with your users such as the use of white space color and typography and last good design solves organizational problems the ultimate purpose of a service portal is to get your users to the solutions they need whether that's fixing a broken computer looking up benefits information or requesting a service good design ensures that not only the big problems are solved like getting your users to schedule time with IT instead of calling in but the little ones are solved as well such as having that password reset function set up but nobody's using it before we even get started with fonts and colors and all the fun things I want to discuss two principles that create a framework within which we're going to consider style and flourish one of these principles one that has a tendency to get left behind in Portal design is to keep your design user centric as developers we have a tendency to view the portal the way we see it as tech savvy people who know the platform and are comfortable with its quirks and Naumann clay Chur don't design for you designed for the people that are going to be using the portal in doing so I want to especially focus on two particular types of users non-technical users and those with accessibility concerns so I joke with my colleagues here at Glide fest that I design portals for my mom and in truth I've shown her a prototype or two just to see how she interprets what I've built truly though one of the best things I've found for ensuring my service portal designs are gonna serve their purpose is by defining an imaginary user for myself give this person a name a life quirks the things that hold them back from using service portal and then ensure your service portal is as friendly a place as it can be for them sometimes we even have to help our clients remember who their user is my favorite person to use is Becky Becky is the now retired city clerk for Daphne Alabama the city where I live and once worked as an assistant clerk she is central to the community at City Hall she is wonderful for helping the citizens that come into the office she does have great hair and she makes corn breads so good that fights have broken out for the last piece however Becky's gonna readily admit that she doesn't do computers so well she prefers the file and triplicate analog approach and would rather call the city's one IT guy and try to navigate a ticketing system what she needs is a clear friendly path that's just as intuitive for her as browsing any of her favorite web sites so who is your user maybe your users Ben Kenobi you know that guy that's been around since before the company was founded the one that drops sick wisdom on the new hires and probably won't give two weeks notice when he suddenly decides to retire design for Becky designed for been designed for the people that will actually be clicking that order now button ultimately those people are why we do what we do there are three particular things we can do to keep and we can keep in mind to ensure our portals are friendly for everyday non-technical users first mind the nomenclature you use maybe your company culture is a little less perhaps instead of a list of top viewed knowledgebase articles you present the user with a list of frequently asked questions or how-to guides in stead of internal employment opportunities how about just jobs look for places that a user has to stop even for a millisecond and consider whether or not something is going to take them where they want to go as much as possible within the given restraints of company culture and politics defaults the most obvious naming conventions you can achieve here we worked with a client to turn the out of box widget for top viewed knowledge articles into an easier to digest most viewed articles coupled with a catch-all button they could click if they didn't find what they were looking for second look for ways to minimize the number of choices you're giving your user at one given time this is going to help them make decisions about where to go and what they need more quickly in short you're saving them from the analysis paralysis of choosing among 50 different catalogue items or four different similarly styled lists categories and limits on the number of Records shown are some of the ways we control the number of choices our users have to make but one of the places that tends to overload users in a portal is right on the home page I've seen many portal examples that have three different lists across the page in one row with announcements and system status all right they're together like you see here in the out of box service portal it's a bit much to take in all at once especially when all the panels have same or similar styling and are set right on top of each other one way to combat this is by spacing the elements out give the introduction to the service catalog knowledge base and other priority sections your users need their own space on the home page we've achieved this with a few of our clients allowing them to consider one type of content at a time here you can see three of the five sections I put on the home page I've used bright color blocks that correspond with their branding to divide up different sections by purpose at the top users can easily search for content or click click one of those venerable awarded catch-all solutions second I've put the styled announcements widget in a row all by itself with a later added option to hide if there were no announcements last you see independent sections where the user can take action on different types of content because I've clearly labeled each section of the website in addition to providing separation with alternating background colors a user can quickly scan and determine which sections they can ignore reducing what they have to actively consider at one time last we can help our users by providing multiple paths to where they want to go take a bit of the Amazon approach from their homepage you can easily search for what you want or browse multiple buttons on the home page may lead users to the same service catalog but might be worded differently early to different catalog views or category views rather going back to our prior example I actually have multiple places where the user can end up in the service catalog just presented in different ways this is really going to depend on what your users prioritize maybe one user will respond to the submit a ticket while another would rather seek out a more specific solution alongside taking non-technical users into consideration I want us to pay special attention to ensuring our portals are set up for accessibility we want to make sure that all of our users regardless of the challenges they face can easily come to the service portal and get what they need the most common disabilities I've seen consider for portal design are those with visual impairments such as blind low vision or color blind users there are many other types of differently abled users that accessibility guidelines cover as well such as those with fine motor skill impairments while there are many many resources and principles we can go into to ensure that our sites are readily accessible I want to focus on three particular things the first of which is contrast here we are looking to assist our visually impaired users with clear color contrast ratios contrast is achieved by a certain degree of difference between the background color and the texture content that's displayed on it typically we use white background with black text which has a very high contrast ratio and is easy to see I see this issue pop up in a number of places but one of the top trouble spots I tend to see is the use of photography especially behind that search bar at the top of the homepage let's take a look at an example without any other elements to hide to help that text stand out it can be difficult to distinguish amid the myriad of colors in the background photo with a few changes though we can improve the legibility we can remedy this by use of color overlays what I've used here in some text shadowing to really help that tagline stand out be very cautious of the contrast ratios you create for buttons icon links and other pieces of content in your portal and do your best to ensure the contrast is high enough to meet the accessibility standards and be easy to read the second thing we can do to ensure the accessibility of our portals is create and maintain visual hierarchy ensure the most important information stands out an essential navigational elements such as links and buttons are easy to locate on the page but the most important items first such as the something's broken button and ensure related items are grouped together to help users who have vision challenges or trouble focusing on the screen additionally placing hierarchy into your code can help users with screen readers negative navigate the site last way we can ensure our portal is properly set up for accessibility is by use of the Aria controls alternative image text element roles and other tools in the HTML of our widgets this enables screen readers to properly navigate the site and communicate with the users interacting with overall you want to ask your stakeholders about specific accessibility concerns and ensure your user testing phases include a diverse set of users in terms of product familiarity computer literacy and disability some organizations will put their most familiar people on testing the new portal but I encourage you to remember to ask users outside the core Department to help test additionally you encourage testing beyond errors and functionality to include just assurance that the portal you've built is as intuitive as the stakeholders and developers believe it to be now we've discussed the importance of considering our user let's take a minute to talk about another framework we need to consider when designing our portals the many devices we use to access them I want to encourage you to begin your custom portal design from the ground up by designing mobile first when you are considering how your portal will present to a user begin with considering how it's going to look on mobile devices begin your code this way as well I found it's much much easier to start small and scale up than it is to go back and fish fix the issues that come up due to forgotten smaller screens let's take a look at some of the tips that are going to make your UI shine on smaller screens and set the stage for a sleek experience on larger screens as well on smaller screens on smaller touchscreens rather we don't have the precision of a mouse so one of the best things you can do to help your users navigate on their mobile devices is ensure links buttons and other elements that they're going to interact with are large enough to tap without a problem big space stations not small moons give ample spacing around buttons and links to make it easy to select one especially if there are multiple selectable options in close proximity to each other in the example on the right these two buttons stack on top of each other taking up the full width of the column a larger devices these buttons responsibly moved to be next to each other underneath the search bar as a bonus and increased size of at a pible and clickable element will assist users with fine motor skill impairment next when setting up the UI for a smaller screen we need to remember that the real estate is at an absolute premium so we should attempt to cut out any padding borders etc that may be rendered extraneous because of how the content flows on small or screen sizes using the same example you can see that the smaller screen only shows one panel at a time in this case are my items panel because of this there's no real need for the margins you see on either side that shows the gray background if needed we could take back that margin to give more room for our content on either side to do this we can utilize media queries and our CSS to dictate when and how the margins and box shadows behave another benefit to designing mobile first is that it is much easier to keep the experience consistent as screen sizes change from the bottom up we're adding features that being said if we're showcasing content via panels or especially tabs things like that we want the experience to carry over to mobile so our users have a consistent experience ultimately we want to use the same tactics to get our user from point A to point B so the transition from mobile to desktop and back again is fairly seamless tab content like I mentioned should still be tab content on mobile as a special note be sure to ensure your content presents very well on large monitors there's a there's a tendency to assume which is my tendency to assume that the content displays while laptop it's going to display well on those 4k monitors I've made this mistake of a not ensuring this was the case and ended up with content that was much more difficult to navigate because it was so insanely stretched out across the strength the screen max wit is definitely your friend here okay last I have to make a special note about flex box flex box is absolutely a part of my service portal gospel truth if there is such a thing while service portal comes with this great bootstrap based grid that's easy to manipulate using flexbox within this grid has proved absolutely invaluable for me to ensure the elements are behaving well as your screen flows for different sizes justifying justifying and aligning the content is especially much easier when you set up the Flex box framework for your content okay now that we've discussed a few points that provide a framework for building a custom portal I want to get into a few things that you can do to really make your portal shine in a more general sense I want you to look for ways to ensure that you have a cohesive unified design one of the easiest things you can do to help yourself is first find and use a brand or style guide this is an example of a part of a style guide that glide fest has developed for our product fast-track a good style guide will lay out all the colors and fonts and local use guidelines for a brand a great style guide will also include web design standards such as button styles restrictions on image use etc etc with a style guide you have one source of truth which prevents guessing or asking for hex codes or font files I get buried in email chains I am a victim of this now there are two situations where this does not help you at all one is where the organization in question doesn't want the portal to entirely emulate the brand and the other there's no style guide what I'm presented with either one of these situations I go into severe fact-finding mode I'll ask questions for preferences do they want to use the same styles as on their other sites if so which ones color fonts are there specific parts of their branding that they don't want to use for example with one recent client I found the only real change to their branding they wanted to see was to use a secondary brand color as the primary for their portal it changed the primary color in the portal from an orange to a more friendly shade of blue other questions to ask can they provide examples of sites that show the look and feel they're going for and can they explain to you what exactly it is about those sites that they find so attractive I'll initially get answers like oh we like apple or we like this brainer we like that brand but then okay what is it about it because apple for instance is a very Photography heavy site and how is that going to work with the list and this and that and the other for a service portal is it the way the informations laid out is it the hover fix the color scheme I find that this tactic of asking for examples or having them point out other sites that they want to emulate extremely helpful it what it does is it's forcing your stakeholders to more concretely define what they will see is a successfully implemented design now use your questions to dig deep some stakeholders may not care about the specifics and give you more creative freedom others may know what they want but you have to help them quantify it by asking lots of questions once you've gathered as much feedback as you can I highly recommend going through a process of creating wireframes and even some fully mocked up designs if necessary especially if there's a lot of custom layout and stuff - how their portal is put together I found a client a seasoned mock-up and agrees - it has a better sense of what they're going to get as an end product you can clarify any style changes at the beginning of the process instead of having to go back after everything is built all right these next two points are some of the best weapons in your arsenal for achieving a cohesive design the first of these is to utilize the CSS includes on the theme record here you can set up the Styles you're going to repeatedly use throughout the portal such as buttons or links or headings and what-have-you on many of the portals I built I'll have at least two CSS includes if not more if I'm using custom fonts for example I'll have a CSS include linking to the font files such as from google fonts and the second one is where i layout headings body type and other font specific styles then I'll have a separate one for other styles like the buttons and things like that let's take a look at an example the panel you see on the right is a panel style I've used in many of the portals I've built I've used it as a container for list buttons reports service catalog items search bars and menus and that one in fact is a menu the code you see on the left is taken from a CSS include from the same portal on any of my widgets I can just add this one class and achieve this look with the code set in the CSS include instead of the widget I only have to change that code in one place and it's going to ensure that all the widgets that use that class change in a uniform manner I end up spending less time to make tweaks and changes and I don't have to worry about missing that one widget that has a blue border and all the rest have a green one if I need to override the style or change it for a specific case or even add to it I can do that on the widget level the other tool in your arsenal is the ability to use cest variables in our CSS includes ServiceNow gave us this immense blessing in the Madrid release and there was much rejoicing throughout the land at least for me anyway it made me very happy SAS variables can be used to set colors or any other CSS property I use them for colors mostly but ServiceNow uses them for a host of things such as border radius margin padding etc use these variables to store any information you want to reuse throughout the site you're gonna set it in one place one time and then you don't have to go digging around to in your widget to make sure that you're getting the right color value or margin or whatever I want to take a look at now how I use this in the past this is a demo portal I put together for glide paths earlier this year if we take a look at the portal record you can see where I've set up a number of SAS variables that control the colors for this portal here you can see that not only the brand primary color is set but I've also included shades of the primary color as well as an established secondary color with shades and I know you can do this by calculating but I'm really picky about my shade values so I just set them manually but essentially by changing these very I think 10 variables right here I can rebrand this entire portal by changing one record okay remember last point style consistently the Styles you create speak to your user defining links setting up your visual hierarchy for the information you present or grouping like items together applying these Styles consistently Garner's the user trust and again increases the odds that they're going to get on board with using the portal buttons links and headings should be applied consistently across the portal if links are green with an underline on the homepage and sure they're not blue and bold somewhere else ultimately ask yourself whether or not your user would be able to trust that a style you've put in place indicates the same thing across the site okay now that we've spent some time we've considered our users needs giving them a consistent experience across all the devices with a cohesive design they can trust let's get into some of the tools you have at your disposal to help point your users in the direction you want them to go there have been books articles and entire websites dedicated to web design in its myriad components I have a whole shelf full of books and just on typography for now we're going to focus on four big areas I've seen can really assist with specific use cases we see in service portal light space typography images and icons and the use of interactive elements we're going to start with white space I around the developer sphere that white spaces wasted space and I'm till they're here to tell you that no it is not wasted space I promise I'll admit though I even have to remind myself that no matter how much all that space around the searchbar annoys me because couldn't we do something else with it it's there for a purpose so what is white space exactly it is the space some pits sometimes refer to as negative space in between elements it's not necessarily white it can be it can look like whatever but it's that space in between your elements it's your margin and padding it's the breathing room you give to your buttons your lists and your other elements from the largest panels all the way down to this space in between the individual letter forms and your content so if it's not wasted space no what does this emptiness do well using my previous example of the search bar it draws attention in the case of the out of box portal with all that space around it and the other elements relatively far away the user is drawn to consider the search as their first way to find what they're looking for as another example I mean really what else are you gonna do on this page there are items in the footer of Google's homepage but the big focus here is use that search bar a second benefit whitespace provides to your users is that it prevents choice paralysis what we talked about earlier we talked about spacing out the elements so our users can more easily make decisions about their where they want to go whitespace is a marvelous vehicle for doing that spread out your elements with enough space so that they only have to have a few options to consider additionally providing the white space around a group of elements like a group of buttons for instance that gives the impression that they're together for a reason so your users will take - considering that group next while we do want to help our user find their way quickly we still need to give them a chance to rest for a moment these small mental breaks the the space that's created in what they have to consider it keeps them from getting overwhelmed it increases their willingness to stay and browse the site for longer if need be for instance look at the space in between the main points on this slide your eyes are actually resting before considering each point last proper use of white space can greatly assist in the legibility of your content a huge wall of text can be a strain to read increasing the line height the space between each line of content it can keep your eyes from crossing especially on those longer knowledgebase articles alright next many of you have probably seen this as the basic argument for why font choices matter and while this conveys a lot of truth typographical choices have so much to offer by way of enhancing the portal experience one of the most obvious things your fonts can help you do is establish that visual hierarchy we've been talking about we see this most often in our portals by use of the heading tags but you can have other font styles for buttons or footer links or other items if you think it's warranted you can see here a type system that I created for an internal project here at godfest I've used three fonts here headings one through three are variations of the typeface railway you can use one font for an entire system if you want which I believe is what the out of box does here I've used the font way the style using italics and all caps to create very three very distinct headings using the one font also let me point out that I am very limited in my use of an all caps heading and I have added a substantial amount of letter spacing the spacing there in between each actual character to keep that legibility high the fourth heading body text and navigation are two different fonts sometimes I'll set a different font for longer text content like the knowledgebase articles to ensure I'm using a font built for that purpose I personally I I personally for example would not use railway for everything in a portal as it can be a bit overwhelming and a little harder to read than some of the other typefaces that are meant for long form writing small links such as the navigation text there on the bottom are optimized in a font that is made with simple letter forms for the express purpose of clarity at smaller font sizes off that note your font choices can do much to enhance the legibility of your site which can be especially useful to our users with vision impairment choosing fonts with distinguishable letter forms can help users with dyslexia for example tremendously here's an example of that here I've got three different fonts showing the numeral one the lowercase L and the capital I you can easily see that where some might where some might struggle with the letters and numbers that look indistinguishable on certain fonts spacing as I mentioned earlier increases the legibility if you decide to use all caps in this example here you can see where I've chosen the all caps approach on the button at the top there's plenty of room for the larger letters this message is short and so the capitalization does not diminish the legit legibility below in that bottom section all caps is used in a similar method but only for the secondary information again in little short pieces on this example we can also see the effect font weight has on legibility font weights such as very thin and very heavy weight fonts can present legibility issues if we're not careful especially if they are doubled with other visual inhibitors such as being used for inverted text black background white text or dark background light text or with poor color contrast the secondary text on the bottom section is in a lighter color and would be illegible if not for the larger size of the text as a final note I want to encourage you to avoid red and green text if at all possible to assist colorblind users and as noted earlier to ensure that all text whether inverted or not has the appropriate contrast ratios for the font size chosen our third consideration for typography is the content we're pairing with the font ultimately typography exists who honor the content even down to the wanted ads in the paper it should draw just enough attention to your content that the user notices it and reads it if and only when necessary and as we saw in one of my previous examples of a type system the navigation and body text do not share the same more flashy typeface of the heading tags they serve a different purpose as does their content type ultimately choices can breathe life into a portal design whether you're looking to create something friendly and focused or modern and sophisticated use your type for an easy way to give a custom look to your portals without customizing a single widget if you so desire okay next I'd like to point out that yes I know service portals are by and large utilitarian websites but that doesn't mean we can't make it look a little less utilitarian truth be told I love adding images to our sites for that friendly welcoming vibe that they put off beyond that images and icons do enhance the usability of your portal first way they do that is by drawing attention images can do many things welcome user to the portal point to an announcement they shouldn't ignore studies have actually shown that an image of a human looking at something will actually cause the user to follow the gaze of the person in the image if you really want to push your users to a knowledge base maybe a signpost with a friendly face will help point them in the right direction as an example in this portal homepage I showed earlier I use images to give the user a sense of what they can expect from the page section another directional indicator that let's then you the user know whether or not this is their stop on the journey second images create atmosphere remember that friendly vibe I mentioned you can use background images or patterns and even solid colors just to add a sense of place or inject color into an otherwise neutral background you can use the sense of atmosphere to incorporate and reinforce your brand or the mood you're setting for the site notice the background in that bottom section that's actually an SVG pattern I've placed directly into the CSS placing a Content block around it along with a judicious white space has created a focus point where the users can find additional resources if they're not finding what they need a special note on icons icons can help shortcut a users thought process when they're making decisions about where they need to go a few guidelines when using them to make sure you're making best use of them first of all ensure the icon you've chosen clearly depicts the concept you're trying convey one thing I do is I will do a web search for my concept with a word icons such as fix computer icon and then see what comes up and compare what I'm thinking to what everyone else in the in on the interwebs has decided is a good interpretation for the concept another thing I'll do is I'll actually show a icon to my ten-year-old son and be like what is that and if he gets it anywhere in the ballparked and I know I'm in the right direction um ii remember that service now does not use the latest version of font awesome it does incorporate fun awesome icons into service portal but it's not using the latest version unless that's changed recently and i missed it in which case i will be very sad font awesome is about to release version 6 service portal has version 4.7 available out of box and font awesome still has the documentation showing what icons are available under 4.7 that you can find on them online and lastly not everything needs an icon i caution you to remember if you use icons on everything nothing is going to stand out okay and last less a reason to use images and more a caution on appropriate use while images can really enhance your site be careful with how much real estate you give them on smaller screens I have a tendency to set large images to hide completely to make room for more important content like you see here notice the image on the right appears on the sites tablet view but is hidden from view on smaller devices to allow that functional content to fill the initial home screen without the need to scroll the last piece I'm going to encourage you to use to dazzle your users as they go along their merry way to order that new mouse or ask the IT department about that blue screen of death they saw that one time is interactive elements why because they are so cool but also because they help create focus a small animation similar to what an image can do can call attention to a part of the page where you want to draw the users focus and I'm going to show you all an example of this this is the web page for stripe stripe comm and if you see here they've got these little animations that go with the headings for each of their different content sections this developer one really grabs my attention but you'll go from this icon and heading that will lead you to read this content and as you scroll down the page your I automatically gravitates towards the emotion here in here and it keeps you moving along that content next your interactions can be used to reward your users when they submit a request you can let that submit button show an animated checkmark to confirm that their submission was successful did they take care of all their approvals let that widget show a one time animated happy face including that their work is complete yay now convey change this next point tends to be the reason in place I use interactive elements the most this is where hover effects can really come into play in addition to providing focus you can animate hover effects to signal action to the user like to show you the button they're about to click is going to take them somewhere I'm going to show you all an example of this too this is a site I've been working on for glide fest but these Service Catalog items right here as you can see I've got this set up so that on hover a little bounce effect is there and it kind of shows hey yes this is the one you're about to click on and it's a really cute little effect so it it has the the tendency to delight your users and it is okay to delight your users even in a even in something as utilitarian as service portal and again with the browse all services catch-all button there's a big indicator with that background color change to show them hey this is what you're getting ready to do is kind of a confirmation ultimately your interactive elements give character and life to your portal they give the user a greater sense that they are truly interacting with something and a well X and those well executed animations really delight your users it can make the experience of ordering a new Mouse a memorable one they want to repeat the next time they have a request to make and that about does it in closing I'd like to encourage you to dig further into some of these concepts in this short time that we have here my goal has been merely to raise your awareness of some of these concepts so you can keep them in mind when putting together a custom design ui/ux is a very big world and you can get lost researching any one of these concepts keep in mind though that design is an ever-changing world and only a Sith deals in absolutes and I will hand it back to you Janet yeah amazing Thanks thanks Sara excellent so let's see if any questions come in and we can answer a couple of them before we announce the giveaway winner oh it looks somebody actually got one so the first question here and of course anyone that's still on please sender ends if you have for Sara we'll keep them coming so the question is where do you get different ideas for custom design so where do you get your inspiration questionnaire on the interwebs there are a lot of sites that will show different US UX concepts whether it's navigation you are concepts whether it's like a navigation bar and different ways to do that or what have you I am fond of two sites where does hangout one is dribble spelled with three B's DRI BBB le comm or design it's a Show and Tell for designers and I like this this helps me keep up with design trends and see the latest of what people way more than know with me are doing and then the other place that's similar to that is behance is another place where you'll see a lot of web designers show off their work that in and of itself helps me keep up with whatever's trending in the design industry but then there are a lot of other sites honestly I do a lot of google searching for different elements and then look at different ideas and kind of cobble together what I think is the best approach excellent ah this isn't a question but a comment from John Bradford he's another question I want to point out that this was a great presentation well done Sarah yeah thanks thank you man all right in Greenfield us a question thanks Annie so she has any recommendations on where to learn coding UI UX elements I got my start now first of all I am NOT a trained developer or a designer I would just call for political science let's see the code Academy is one site that I learned to pick up HTML CSS a great site to play around if you're testing out CSS concepts and what they do there's a site called CSS Zen garden and I found that as a great place to just have some basic content and just play around with what different CSS tools do other places that I've learned Smashing Magazine is also a great place they have a lot of tutorials and things like that but it's it's been and the place I go for most of my CSS how do I do this is CSS tricks calm they actually have a guide to flexbox that is like the top of my bookmarks because I'm always going back to it it's it's the most simply laid out explanation for how to use flexbox I absolutely love it good UI UX there exactly great all right several questions actually Sara so Janice is wondering what your thoughts are experience are with defining xle its user experience service levels which may include measuring user satisfaction of the portal I have seen the surveys used some in a generic sense but I've not seen anyone use the you use the survey tools and service now even on the portal side much to explore like is the design something that they like that they like or could go with and everything and I I think and I'm gonna go back to the point I made earlier about testing I think that our testing practices center mostly around the function of the site do all the stories work does all the functionality work blah blah blah but one thing I really want to encourage is for that user testing stage to move further into getting you know Joe Schmo Catelli from marketing that has never worked on service portal would be just your normal everyday user to come in and sit down and just watch him navigate the site give him some things he's supposed to do no instruction on how to do it and just watch him navigate the site and see what he does he may totally miss over the fact that you've got a big you've got a button that tells him right work that takes him right where he needs to go cuz it's the wrong color or something like that so I think that even more so than surveys can do a lot to help you but I that that is one thing I've not seen a lot is use of the surveys to get feedback on the design awesome hope that answered your question yeah hopefully now they can reach out to you again who are old friends old and good friend hi Lee and thanks for your question so he's asking if what's one thing that you see over and over again that would be considered a mistake when trying to build a UI UX on a portal I would say the fear going custom e you see so many people that are afraid of custom widgets or going out out of they want to keep it out of box and you can do some design changes while staying using the out of box but I mean even if you want out of box functionality one of my favorite methods to do so is to clone the out of box and widgets and then just styling those clone widgets and one thing I've loved we had a client we had to go through a double upgrade with and because I had convinced this client to let me clone the widgets that they needed for their portal after that double upgrade I had to change like one line of code I had one little heading that didn't work the rest of it carried through perfectly and that one little heading was something that was not in a cloned widget so I like using that method and it takes some convincing sometime sometimes to get people to be okay with that idea know your code is safe your changes are safe and if you have any problems we can just revert back to the out of box and it's cool but so I see and then in doing so you get into well we're gonna put the CSS on the page or here or there and it really makes it harder to maintain over time and highly also hopefully answer that one great we have a couple of more Seraph gonna keep going for a few minutes bye so thanks to Katherine for her very kind feedback here really enjoy the presentation and her question is when designing widgets what are some good examples and tips on how to use them widgets are just I I look at them from maybe a little bit of a different perspective they're just content blocks for me and that you may have content that does one thing or another I heard a start from scratch I find it a lot less confusing to start my own widgets from scratch then to try and go in and edit and figure out somebody else's cookies you know different developers they put their commentary in everything different ways but I don't feel like I'm answering the question some examples of how to use widgets it was the question yeah when you're designing or some good examples and tips to use designing some fun functionality there I I like to encourage people to remember service portal can do of course the other tolson kind of ruined me when he brought me into this industry with service portal can do anything and so I take that as gospel truth service portal can do anything I have created an entire blog I've built WordPress on top of service portal I have built content pages out where I had this one client that it was beyond a service pool but they wanted an informational page it talked about one of their internal programs and so I was building out widgets that just had just content blocks that showed videos and this that and the other so they can be used in that way but one specific tip I would give is to keep your widgets modular I it's much easier if you have a bunch of widgets that talk to each other on a page rather than having one big widget that does like the whole pages worth of content it's easier to maintain it's easier to change and that would be one thing I would suggest I hope that helped great yeah I imagine awesome um so Alex from our team who's been listening to the presentation and he had a comment I just wanted to share with everyone on the Leichhardt learn service portal so he just he just wanted us to share that you can also take service portal fundamentals and service portal advanced classes from ServiceNow so if anyone's interested in that of course you can reach out to our team until them have a little bit more so thanks Alex for that reminder always great content education out there all right I'm gonna well do two more there's two more questions and then we'll we'll announce the winner I know that everyone's anxious to find out so this is an interesting question here and it is an opinion if you think ServiceNow will move away from service portal technology so just like angular or go to a different technology anytime soon so that's the question right now especially with the new UX framework what I'm I haven't got to play around with a new framework a lot but from what I've seen the new UX framework thus far does some really cool things but it does not offer the ability to customize and style the way service portal does right now so I don't think service portal personally is in danger of going anywhere just yet because I think I'm seeing more people want custom they want to move away from the out of box look and I think until the UX framework can offer that I think you're gonna see some clients that want a number of organizations that want to stay on service portal right cool Wow see what the future holds all right a final one and the QA how often should the branding and design of a portal be updated I would say this comes down to user testing and watching the reports and are your users using it are they happy with it probably don't want to change too much refreshing a design can happen as often or is not often as you want when I'm putting together a design I try to find a balance between what's trendy and what is going to like work on going I don't stand it most of my portals don't sit at the very edge of design because you don't want something that looks out of style within six months so I would say try to strike that balance between what's trendy and what your users are going to be okay with and as long as they're using it and they're happy with using it you may not want to move away from that because maybe they get really attached to that that picture of the dog on the home page or something you know so I love the dogs hey Wow thanks Sara so much for answering everyone's questions and thank you everyone for sticking around and asking them let's shift over and we can't announce the winner of the giveaway today all right so congratulations to John Haeger you're the winner of the Visa gift card so thank you for joining us congratulations will email your prize directly so just look out for the email and if you didn't win today don't be discouraged every on-air webinar you attend for both gly fast Anderson coming ferret code counts doesn't enter into honor grand prize giveaway so you could win this really cool mirror here we'll be selecting the grand prize giveaway winner at the end of June we are actually extending our series and through July so stay tuned for more information on that they're a bunch of our new sessions are on our website and new prizes will be coming out as well so keeping the fun going through the summertime and finally just thank you everyone for attending we hope you enjoyed Starr's presentation thank you Sarah feel free if you have any more questions feel free to reach out to us on social media we'll be sending some follow-up information via email so if you wanted to get in contact with Sarah directly you can reach her and either of those channels so sorry have any final words for the audience um not really thank you all for coming I really appreciate it and if you have any questions please reach out thank you everyone [Music]