Login Screen
Challenge: How might we create a new login experience, while continuing to support user customization?
Background: The SchoolTool SMS login experience varied widely from device to device. Whether the user was logging in on a tablet, desktop browser, or cell phone, their experience would be different from one to the next. Updating the application to be Oauth2 compliant proved to be the perfect opportunity to rethink and redesign the login experience across all platforms. Security during the login process was of upmost importance, as was maintaining the ability to post a customized message.
Process: While the engineering and architecture teams looked into options for Single Sign On (SSO) and Multi-factor Authentication Support (MFA), I worked with the Product team to gather user input. While many school districts were utilizing the custom message area on the existing login screen, we discovered that the critical piece was a to visually differentiate between their training, live, and summer school sites.
Implementation: Using Figma, I designed a login experience that would not only emphasize the SchoolTool brand, but also maintain the customization districts were currently utilizing. The design needed to accommodate the SchoolTool logo, custom school logos, login form, SSO button(s), forgot password flow, and custom system message (shown below to the left). I build a functional prototype using the Bootstrap framework to demonstrate the look and responsive functionality of the new screen. The HTML and CSS files were then handed off to the engineering team to implement in SchoolTool.
Mobile App Login Before and After
Tablet / Mobile Site Login
Outcome: Users are now presented with one consistent login experience for SchoolTool on desktops and mobile devices. Soon, this login screen will also replace the existing login experience on the SchoolTool iOS and Android mobile applications. While being more secure, the new login also enables quicker support of SSO and MFA options, including IdP initiated SSO.
