In App Feature

Single Sign On Configuration

Setup SSO

Project Details

Background
SSO setup is on the admin side of the platform. Everything in the admin side hasn't been worked through the Design team, so this is the first project Design got to work on. The old design was a one page with multiple input text boxes. It was effective enough for internal users who know how to set up SSO for customers, but with this project we want the customers to configure themselves which helps make growth of the company.
Research Insights
This is the first project brought up from the Engineering team working with the Design team. Research was done by asking new hires to use the SSO setup and share their thoughts about it.
  • The missing information warnings were all over the place and it gets confusing for users to know what information is needed or missing
  • All the input text boxes made the page overwhelming and users were intimidated to use the form
  • There are a lot of abbreviations and acronyms the users don't understand
  • There is no indication if the SSO set up successful
  • Few times the customers try to sign in through SSO, it will fail
  • Setting up SSO is a one time setup. Users would only come to visit this page again if there were reports of failed attempts
Goal
Design a pleasing interface and experience for customer setting up SSO.
My Role
UX/UI Designer
User Research
Prototyping
User Testing

Concept and Prototype

How to make SSO easy to setup?
Process To Get There
Bring along the engineers in the design process to get feedback, bounce ideas together, and understand each other's thought process. This will help bring the two teams together and make it an enjoyable experience for future projects in the backend. Also, do testing with newcomers to help fight the bias battle.
Design Goals
  • Show indication of failed and successful connection
  • Split the existing form into sections for easy digestion
  • Find a way to integrate some components from the platform into the backend
Constraints
  • Be mindful of the use of color as an indication for accessibility
  • Not add too many steps since the original design was only on one page. The one page makes it feel like it's only one long step
Wireframe
Prototype
User Test
The prototype was tested with Rescale's Customer Service team and customer's admin.
  • Displaying the errors and a button to fix the error was helpful for our testers
  • Testing the SSO connection while setting up the feature helps users ensure all the data is input correctly
  • The drawer interaction made the experience more interesting
  • Testers feel the process was simple and straightforward
"I like how I have the ability to easily fix the SSO error myself"

Final Design

"The SSO setup process was straightforward"
Retrospective
Teaming up with the engineer team was an enjoyable experience. This project helped engineers understand the importance of research and design.
  • Although this feature was more on the admin side of the platform, testers appreciate the new design vs the original design
  • Users did not mind the additional steps since the new design helped educate the users and test the connection before completing the process
Henry Ho