Oktane18: How to Make your Okta Org Really Ridiculously Good Looking
Jade Feng: Good day there. Thanks all for coming. I know some of us were a bit occupied last night, so being here is a big step. Today we're going to talk about customization with Okta. How you can make your Okta Org really, really, ridiculously good looking. My name is Jade and I'm the product manager for user experience and customization with Okta, and also from Okta I'm joined with ...
Santhosh: Santhosh Kumar Bala Krishnan, Okta.
Jade Feng: Awesome. Over the next 40 minutes we're going to talk about how you can customize with Okta today. We're also going to bring on stage Athena Health, who had done some amazing things with the Okta sign-in widget. We're going to go through a fun hands-on demo on how you can do some really advanced customizations from new features going to EA this Oktane and also talk about what's coming up, what's on the product roadmap going forward. So, all of us here know that identify and access management is really, really hard. But the thing is, Okta we want to make that easy for you. Make that accessible. But not only that, we want to go the next step to provide delightful and secure experiences for your users. Not just our users, but IT, admins, and developers in this room today, but also the users that you care about, the users that you design for and you invest in. We want to make their experience delightful too. So, why does user experience matter, right? Why are we here? There's a few reasons. We can all remember the time when we've come to a very frustrating enterprise application and don't know how it works, and like 'screw this, I'm not going to do it.' But the thing is, better UX means that there's higher productivity. SAP found that for every dollar invested in user experience, it's a ROI of $2 to $100 return. Not only that, better UX means there's higher adoption, right? And the inverse is true. If there's a bad UX you're probably less likely to turn and we want to stop that from happening. And when there's a bad experience, you're probably not likely to do the thing you want to do. So a good user experience can actually educate and help the user to do the right thing, to protect your data and also their data. And finally, branding and consistency is core to building trust between your brand and the end-users that work with you on a regular basis. And customization is a huge part of telling that story. So, how can you customize with Okta today?
Adam: Thank you. Good morning everybody, glad to be here. So, I'm going to talk a little bit about how Athena Health has used Okta, customized Okta to our millions of users. So first off, who is Athena Health? So, Athena Health provides software and services for doctors, patients, and across the entire healthcare industry. And our vision is to be the information backbone that helps healthcare work as it should. To help explain this a little bit more, I'm going to talk about an experience when I was growing up.
My mother was an ophthalmologist and so she had an office that ran in the last century mode of operating a medical office, so it was chaotic. And I would help her out sometimes and she would give me a list of patients and patient charts that she needed to find. And so, I would go into her giant room of manila folders and I'd go look alphabetically and some of the patient charts would be missing, I'd say 'thanks a lot Mom, this is a great job, why did I agree to do this.' But that was the healthcare industry of the last century, and Athena Health is trying to bring that and create an experience that is in the cloud, easy to use, and most of all, so easy to use that even my mother could use it, which is a challenge for our UX and Jackie over here.
So I'm going to talk a little bit about our journey with identity and access management. One of athenahealth's products is a Patient Portal, and the Patient Portal allows patients to log-in and see their health information online. We have thousands of them. Each of our medical practices gets its own Patient Portal, and each of those portals has a separate identity holder, so if I belong to two Patient Portals I'll get two usernames, two passwords, we recognized that this was not the healthcare of the future, this was the healthcare of the past we set out to unify all of those identity holders and do a single identity, so that as a patient, I could use single log-in to access any number of applications’.
How did we do this? Well we used Okta's APIs and we built our own custom front-end. We thought that our use case was sufficiently unique that we really needed to leverage a custom front-end that would be easy for patients to use and we thought in order to do that we had to build custom code. So we had some success with this, we built an integration with Apple Health, which allowed somebody to go to an Apple Health app and download their healthcare record into Apple Health using the open ID connect log-in screen that we created on top of Okta's APIs but with a custom UI.
In mid-2017 our CTO threw us a curve-ball. He said, "Great work you guys are doing, but you're solving the problem only for patients. We're not just a patient company, we have providers, we have partners, we have developers who want to code against our platform and all of them need to be able to log-in. So you need to solve all those use cases as well." And we said "Great, sounds good. How many more people do we get with this additional scope?" And you probably know the answer, and the answer was zero. So, we had to take another look at our approach. Our scope had increased, our team size hadn't, and so we started taking a look at some more options. Should we take a second look at the Okta sign-in widget. And we did ... if the slide would come up, let's see here ...
So we did. And we realized in taking a look at the new features we had to add, we realized that in order to add those features we'd be adding even more custom code to our front-end. Doing that we would add risk, it'd be harder to upgrade as Okta added new features, we'd have to add more and more custom code to our custom front-end, and as a result we'd end up with less functionality. So we decided to go with the Okta sign-in widget. And so why did we do this?
For one, in taking a second look, it was much more customizable than we initially had thought. It's possible to customize the Okta sign-in widget with configuration, without writing a single line of code, and a lot of our use cases were solved with pure configuration. Secondly, there were cases where we wanted to change the behavior of the Okta sign-in widget, we had total control of the code because it was open-source, so we were able to do that, and as we did that, we were able to have the confidence that we weren't breaking anything because Okta ... the sign-in widget had a bunch of unit tests and a bunch of automated front-end tests. Secondly, and most importantly, the worst thing we could do is create a log-in mechanism that didn't work. Across our millions of users, if they weren't able to log-in that would be the worst thing we could do. So Okta sign-in widget was already used by millions of people across all of its features, so it gave us a good degree of confidence to go with it and allow our users to log-in in a secure and safe way, that would work with enterprise-grade reliability.
Lastly, it was open-source. So, open-source allowed us to ... we knew we wanted to make changes to the sign-in widget, and those changes, in a lot of cases, would be useful to the general community, we could contribute those back to the open-source project, in addition we thought we could get the benefit of the open-source community. So one of the issues we had with our integration with Apple was related to Safari issues, so we went on to the GitHub repository, typed in Safari, sure enough, thousands of issues that had already been solved by the Okta sign-in widget community, and did we really want to relive all of those battle scars that Okta sign-in widget had already solved? So, as a result, we decided to go with the sign-in widget. And it allows us to release way more functionality with much less custom code and a faster time to market. And to talk about exactly what the user experience is that we're trying to create, I'm going to hand it over to Jackie.
Jackie: Thank you Adam. Hi everybody, my name is Jackie, I've been working in experience design for about eight years and I've been at athena for almost four. I joined Adam and the athena identity team back in October of 2017, and as mentioned, I'm going to walk through our customized Okta sign-in widget for our patient and users. And I highlighted a few key themes of our experience and design approach. So the goal of our patient experience is to create a simple and secure mobile first log-in application. That can be consumed by any of our internal teams or applications we partner with. Behind the scenes we all know identity management is complicated, but we didn't want our end-users to feel any of that. We have four core design principles at athena: be radically simple, refreshingly candid, powerfully relevant, and to push boundaries. And that's exactly what these work-flows represent. It's a simple, yet powerful set of log-in credentials that allow our patients to access any Patient Portal account or any partnering application that they use. It embodies how athena as a platform can push the boundaries of how health information is shared. By using the Okta sign-in widget we were able to leverage many more of Okta's tools than we originally thought. This was a major win for the experience. It saved a ton of design time and we were able to get more desirable features faster. Creating a more complete work-flow for our patients and for the business. We spent less time running usability and resonance tests simply because the sign-in widget has been tested in the wild by you guys at Okta and by the clients and partners. We knew it was best in class and we knew people were using it. The patient experience has two primary end-users. New patients, meaning an athena patient that has never ... there you go. So, an athena patient who's never used our Patient Portal before, and then existing portal users. So, an athena patient who already uses our Patient Portal. Our demo today is going to walk you through our new patient Elizabeth's experience. She's going to set-up her Athena Health log-in using the Okta sign-in widget, and in the future if she sees another doctor that partners with athena or visits a partnering app like Apple Health, she'll be able to use the same password to log-in. So, I'm going to go ahead and play the demo. Let's hope we hear it.
Speaker 1: She opens her email on her phone and sees that she has an invitation from her doctor to create an Athena Health account and to sign up for her Patient Portal. She selects 'Create your Account' and is redirected to our log-in app. First step is to simply set up her password from her account.
First step is to simply set up a password for her account. We added a custom password requirements module that walks her through creating a secure password. It tells her when she's missing a requirement or if the password she entered doesn't meet security standards. Once you create a password, she confirms, and continues to enter. MFA was an important feature added to Okta sign-in widget It would've been pretty expensive to design and build on our own, so being able to use it was as a great option. For Alpha, we're using standard SMS and voice call verification, and hope to add additional options like Google Authenticator and biometrics, like fingerprint ID, in the future. Elizabeth elects to set up her SMS after, and is asked to enter her phone number. It's worth noting that we updated the interaction design and layout of this form from Okta’s out-of-the-box design. We thought that creating separate steps for entering your phone number and verification code guided and created a positive flow in the user setup. Elizabeth enters her phone number, and then she can send ... She gets a text with her code on her phone and she enters it into the verification form. Once her number is verified, we let her know that her number is good to go and she can either set up an additional factor or continue with her registration. So Elizabeth will either set up voice call verification, but we'll have her continue.
This next step is somewhat custom for the healthcare use case and only shows up if the number you use to set up NFA does not match the number on Elizabeth's patient record. In this step, we're making sure it's actually Elizabeth creating the account, because by creating her Athena health login, she'll get access to personal healthcare information. She chooses to either get a text or a phone call to the phone number we pull from her patient record. If for some reason she doesn't have access to the phone number anymore, we'll have our support team ready to help her get the information securely updated and she can call the directly. She chooses her method receives her code, and verifies.
This last step is very straightforward. We ask Elizabeth to confirm her demographic information, like name and date of birth, and that's it. Her Athena health login is created and she has a new patient portal account. And the next time she logs in, all she has to do is enter her email and password and she's good to go.
Jackie:I know that looked really great, but this is the UI that we've come up with. And you know as a designer for me, it's been really great working with Okta. It has personally saved me a ton of design time and it's made our login application better for our patients and a better way for them to login to their health apps. I'm really excited for Alpha to go out in the next few weeks and for patients to start using this. So I'm going to hand it back to Jade.
Jade Feng: Thanks so much, Adam and Jackie, for going through that, how they've used the Okta sign-in widget. Let's say you're a IT admin or developer who also wants to build some unique customizations for your end users, but you don't want to bother with scaling it, building it, downloading it, or hosting it yourself. So, we are really excited to talk to you today about the Okta-hosted sign-in widget where you can do really advanced customizations, or within the admin dashboard, where all of the hosting and scaling is all done for you by Okta. So when we look at the sign-in experience, there is kind of four components. You've got the URL that you go and visit when you go visit the sign-in page. You've got the look and the feel of the sign-in page as well and what it tells you to do and how you can do it. You've also got the emails and notifications that you receive, which help you to get set up or register or sign in when you get locked out. And you've also got the error pages that tell you how you can get back to the happy part when things aren't going to plan. And we're so excited to say that right now, we have made custom URL domains, Okta-hosted custom sign-in page, and Okta-hosted custom error pages into EA for Oktane. Let's get to the fun of it and start the demo. So, let's say that I'm a stormtrooper and I built a stormtrooper Internet for me and my stormtrooper mates to be able to figure out how to get into my applications and do what I need to do. So before, I would have to go stormtrooperHQ.okta.com, which was great. This is the Okta sign-in page. You go to the Okta sign-in page, which you're all probably familiar with. Any day now. We thought about this ahead of time. So you have the Okta sign-in page you may be familiar with, where you've got the sign-in widget that you probably have seen before. But now, with custom URL domains, you can go to sign in dot stormtrooperHQ dot com, where we have a completely new look and feel of this page, which has been all done for you within the admin dashboard. So, I'm a stormtrooper, I'm going to sign in, and bam, go into the Internet and the application which I've built as a stormtrooper, where all the federation has been done for you by Okta. So, signing out ... We've got coffee on level two, guys, you should join after ... Logging out. Now let's say I sign in as Darth Vader. Right? The great Sith Lord. Mind you, we have only provision to a county. And he is routed to his own private Myspace, (if that’s still cool these days) diary where he can keep track of all his secret inner insecurities and whatnot. So, logging back out. Let's say I'm a Wookie, right? I've got fat fingers, I'm trying to type, I'm moving really quickly. Then in that case, we go to our Okta-hosted error page, right? And what you have seen going back is that all the fun experience from the URL to the sign-in page to the unhappy flows has been all managed and hosted by Okta. To me as a stormtrooper developer, all I had to do is worry about my own applications and the flow that my end users to make them successful, and Okta does all the work for you. So, Adam you will show how the magic happens.
Adam: Alright, so all the customization that you saw was done on stormtrooper HQ's Org. So let's try to make a new Org and apply the same settings that we had for the demo from scratch. So I have access to Jade's Okta Org. So this is how Org looks currently. She has her own custom logo, she has her own custom background, and she has already changed her labels to her custom labels. So let me log in. And since I'm an admin, I have admin access to her account and I should be taken to the admin dashboard. All the three parts are played here, the custom URL domain, the custom sign-in, and custom error pages. Although, you can find all these under settings, customization. You can see the custom sign-in and custom error pages have their own tabs, and custom URL domain is right under general.
And very similar to custom sign-in, we also have custom error pages. You can see that there is a very similar correlator here, and you see different macros over here. For example, the HTTP status code macro will tell you whether the error is a 404 or a 500. And you can choose to use these values to customize error page to your needs. Let's take a look at how the default error page looks like. So if you have a generic error, you have a generic description. And you see that we've already pulled it over the background and old logo already for you. So let me make a quick change and see how this works. So I am going to let Jade know every time she hits an error on her Org that "I am the best" and let me preview that once. You can see that text appears on the top left corner. So once I click save and publish, any error page that Jade hits on her Org, you can see that the macros are automatically loaded to reflect the actual value of 404 and page not found, more accurate descriptions, and you can also see my customization also made it here. Again, I have my very tiny HTML for the other page. I'm going to paste it in the correlator, preview it once to make sure everything goes fine. Everything is good. So once I save and publish, her new 404 experience is the custom error page. So this is how you can get custom URL domain, custom sign-in, and custom error pages, and you can brand these pages all within the admin dashboard. Back to you, Jade.
Jade Feng: Awesome. Yeah dude, clap, that was awesome. A lot of hard work went into that. So these features are coming to early access here at Oktane, so if you guys are interested in playing around with it, talk to your CSM or your support team to get these feature flags turned on for you. So, what's coming up next, right? What's coming up on our user experience roadmap. Before we start, I want to talk about how at Okta we think about the end user journey in identity access management. We've got the emails and the notifications that the end users see on how they get into the identity access management flow. We have the registration onboarding experience. How do these end users sign up for an account and how do they learn how to use your product? From there, we've got the sign-in authentication flows. You may be familiar with the interstitial loading page as you go into applications, and a lot of other things we just described earlier. We've also got the application flows and the user dashboard.
Jade Feng: We've also got the application flows and the user dashboard. What do they do after they sign in? Do they go to your custom application, or do they go to the dashboard where and how can you customize that experience? And finally, you have the user's settings. How do the users manage their own information, manage their own accounts within your platform and your flow. The levels of customization does vary between different stages of the access management flow. But we have invested a lot into emails and notifications, registrations onboarding and the silent authentication experience. So some of the things that you may have seen, custom email, domains and templates, they have the ability to be able to customize the copy and the look and feel of the emails you send to your end users, and also localize in different languages. We've got admin manage tabs, the ability for admins to be able to customize the dashboard and say what the end user able to play around with and where the apps are arranged. We've got custom URL domains an Okta hosted custom HTML which Santos just demoed. And finally we know self-service registration, the ability for your end users to be able sign up themselves without needing much work from your end. So coming forward there is kind of three things that we are really excited to talk about. First of all is the redesign of the end user experience. Okta is one of those really interested products where our success is actually getting our users off the platform as quickly as we can. We want to make that experience better and more delightful and we are thing about how we can design around that. Also as I've said, we've invested a lot into the registration and sudden error page experience. There's a lot of other parts of the access management flow that have opportunities for you to design around. We want to design more advanced modular components where you can do some of the more similar things with the other parts like the user dashboard, profiles and settings, and the onboarding experience. Finally, we want to help encourage secure behavior from our end users. We believe that with educating them and making that effortless kind of helps them fall into the pit of success. Putting the power in their hands and telling them why and how they can protect your daughter and their daughter and do the right thing. We'd really love to hear from you. What else would you like to see customizable for your users? I have a survey link up bitly/custom/Okta where you can kind of add your thoughts and I promise I'll read every single one. You can leave your name and email if you'd like to start a conversation. With that I'd like to invite my other panelists up here and we can open the floor for Q&A.
Speaker 2: Yep, I've got a microphone right here. I'll come to this gentleman right here.
Jade Feng: I think John is coming around.
Speaker 3: Hi, thank you guys. The question was around on the custom URL. How you guys are dealing with SSL certificates and if that is managed by us or how that's ...
Adam: that will take you through the custom URL setup and as a part of it you can upload your setting and certificate and priority and it's up to you. You can use your own certificates.
Speaker 4: Is there any chance you guys will move to a space where either free the way other institutions are doing SSL certificates?
Adam: The question is are we going to enter the space of free CA. There's Let's Encrypt which already lets you do all this stuff for free and the reason wildcard support as well.
Jade Feng: Yeah, we do have a blog around how you can set that up and with Let's encrypt it is free and it's like a 5 minute process to set that up.
Speaker 4: But you are not going to move to take that on and register the content ...
Jade Feng: We can talk about that later and to the case around why, but currently that is not on the road map.
Speaker 2: So Let's encrypt certificates are only good for 90 days. Is there an API or a new method that you provide that can automatically renew them?
Jade Feng: Currently not.
Speaker 2: Another question, the application access error pages, are they customizable at this point?
Jade Feng: So application-
Adam: Is the app not the same page as the...
Speaker 2: Yes.
Adam: Yes they are.
Speaker 2: They are. Okay thanks.
Adam: Most of the history would be error pages and the app and the error pages are customizable.
Speaker 2: For the custom sign in URL, is it only one URL that you can set up? Or let's say you've got 50 applications and you want to have a custom URL for each one of them, can you do that today in this early access feature?
Speaker 5: No at this point, there is just one custom URL domain.
Speaker 6: Hi, does the hosted widget have some limitations over the own prime version?
Jade Feng: As the host it would have had some limitations of the own prime version?
Adam: By own prime version, is it like customer hosted?
Speaker 5: Yeah.
Adam: No, the division is already open. So, it's like whatever the open-source user can do, we can do it as well.
Jade Feng: Yes, but there are some limitations in terms of how we can't support OKTA mobile and the active AD agent and a few other things, but for most of the part the customizations which Santos showed on the get here pages, you can do the same things.
Speaker 7: Yeah hi, sorry. We have a requirement for pre authentication banners, is there something you guys can do for that?
Jade Feng: Pre authentication banners, could you?
Speaker 7: Yes, so we are required to display the log in banner to the users actually pre authentication.
Jade Feng: Log in banner?
Adam: So you want to customize your log in base to show a banner before?
Speaker 7: Yeah a banner and the acknowledgement.
Adam: Yeah that is totally possible. The hedge table is all yours and however you choose to customize it. You can add a banner and you can add your acknowledgement. Yes.
Speaker 3: This might be a messy question, but how do you enroll in EA.
Jade Feng: You can talk to your support at OKTA.com or you can talk to your customer support manager.
Speaker 3: Thanks.
Speaker 8: I have two questions. The first one is for custom URL, then what happened to the bookmark or hard code URL that we use with the OKTA.com, will you do the redirect for us?
Jade Feng: No, that one will still exist. As you can see on the demo we had j.customorg.com which came to the customized HTML and CMS that you saw, but j.okta.preview.com is still existing and the old version that you've with other box customizations, so both will exist. You just send your end users to whichever direction you'd prefer.
Speaker 8: So if the users has bookmarked the old URL they see the older screens?
Jade Feng: That's right.
Speaker 8: You don't have any roadmap to say, yes because we have the custom URL configured then you would redirect to the new URL.
Jade Feng: There is currently no redirect between those two, but I think it kind of all come down to the messaging on your rollout. The functionality will be... they will still go to the same direction, it's just whether or not they see the customized pages versus the non-customized page and whether or not they know the old URL.
Speaker 8: The second question is regarding the customization for the policy. If you had the policy and the user, I guess fit into the policy, then they will see the standard Okta policy violation. Is there a way to customize that page?
Jade Feng: Policy violation?
Speaker 8: Like the side arm policy, so if you have the side arm policy and the user doesn't fit that policy, then currently the user will see the Okta policy standard.
Jade Feng: Could you give us an example of a policy?
Speaker 8: Let's say for example we say the user has to use the client and can only get in if you are using Windows for example.
Jade Feng: Ah. I'm not entirely sure right now, but I can follow up with you right after this.
Speaker 8: Thank you.
Jade Feng: Yeah.
Speaker 9: Hi, really great demo. Is CAPTCHA on your roadmap as part of registration to kind of, to prevent denial of service or basically people getting runaway registrations and using up your license.
Jade Feng: We currently can't have that under consideration, but if it is on the sign in page there are some java things you can embed yourself pretty easily to essentially achieve the same thing.
Speaker 4: Are we able to customize the OTP pages after the initial log in with the HTML?
Jade Feng: OTP? The security image?
Speaker 4: Or OTP with SMS or voice.
Adam: All the MFA verification and setting up all the URLs second factor is a part of the budget. The budget just takes care of showing you the second page without any issues.
Speaker 4: Okay, so even if you are using the Okta hosted widget it is the same?
Adam: Yeah, it's all a part of this quiet box that you see. You can add your customizations and you can add your own users on top of your sign-in as well and based on the policy they will just automatically show up.
Speaker 4: Thank you.
Speaker 10: Thank you for the demo, you showed us that we can pre populate the user name on log in screen, but can that be done dynamically?
Adam: Yes, dynamically as in based on?
Speaker 10: Like for example we have a custom log in screen and in the background, we check whether the user already exists in Okta. If the user already exists in Okta we are currently directing the user to the Okta sign in widget page but if we would like to dynamically populate that instead of asking the user to do that?
Adam: Oh yes, that is totally possible. Part of an example is how we do the sign in page. When I click on daughter, you saw that the user name changes automatically. Sign in wizard has multiple hooks that it can leverage. You have processed clicks like you can get the user name before you actually sign in with Okta and you can process those claims.
Speaker 10: Okay cool thanks.
Jade Feng: You can also use it with the API's in addition so you can do some really complicated custom stuff on top of it if you really want to.
Speaker 2: Well let's thank your panel again thank you very much.
Jade Feng: Thank you. Again if you guys have feedback or other ideas please visit me, visit us on this URL. Bitly/custom/Okta and please also fill in the surveys for this sessions. Other sessions moving forward also Okta net may be interesting for you. After this we have managing multiple brand experiences with torology and then identity, the key to user centric security with Flynders University. If anyone else wants to talk about anything else I'll also be in the back of the hallway for the next half hour if you want to come talk to me and suggest some ideas. Thank you.
Speaker 2: Thank you. The survey is in the back. Thank you.
The Okta Platform is undoubtedly a powerful identity access management system that allows for secure experiences for you and your customers. However, Okta also aims at providing a seamless customer experience by giving you the flexibility to adapt the platform to your company's brand! Watch as Product Manager Jade Feng and Software Engineer Santhosh Krishnan show you how to make Okta really ridiculously good looking.
Jade Feng, Product Manager, Okta
Santhosh Krishnan, Staff Software Engineer, Okta