Yale Single Sign On

About the Project

Yale's Single Sign On (SSO) page hasn't been upgraded in 15 years. With an upgrade on the back-end of the system, the front-end user experience needed an overhaul. This page is used by everyone in the Yale community on a daily basis, so it was very important to improve the UX.

About the Team

I was one of two UX designers on this project. My main contribution was the visual identity and user experience of the SSO and account management page.

01. Discovery

The Problem

This is a web platform used by the Yale University community on a daily basis. The current experience had multiple usability issues including:

Outdated visual design
Poor error handling
Responsive troubles
Unclear and long copy
The single sign-on page looks different from the account management page

The scope of this effort includes updating the back-end of the system but also a full redesign of the front-end user experience.

No items found.

02. Research

UX Interviews

After conducting user and stakeholder interviews, I outlined a few pain points that I wanted to target in the updated experience.

Users were unaware that they entered the wrong password. The messaging was in a less than ideal spot and the wording was confusing.
The visual identity that Yale upholds does not match this system, making the users lose trust that this website is secure.
The switch in interfaces from the sign-on page to the account management page was jarring. This confused users and made them think they clicked on the wrong thing.
When creating and changing their passwords, users were overwhelmed with text and had to scroll far down the fold to finish their tasks.
Mobile responsiveness was okay, but had room for improvement.

‍

No items found.

03. Design

Prototyping

My first step to address the usability issues was to prototype out my initial ideas. I wanted to keep the site simple but allow the content to flow better with improved readability. The biggest use case of the site was a standard single sign-on, which means users will be on the site for less than 30 seconds and making this experience frictionless was vital. The most important concern was the accessibility issues when a user inputs an incorrect password. Having a symbol, color, and text indicator of an incorrect password was my main goal on the login page.

‍

Additionally, having the login section and account management section have the same visual identity was important. The overall goal was to make these two different applications seem identical stylistically.

‍

Since we are talking about the account management section, having a more intuitive account activation and password management experience was also at the top of our list. While the system did have something in place to let the user know where they were in the experience, the wall of text was replaced with clear and concise instructions.

‍

Finally, the UX team made the decision to keep the style of having the website be a floating rectangle with a background to keep a sense of familiarity with our users. We wanted to avoid having a harsh change in the structure causing confusion or lack of trust. We decided on stock photos of the Yale campus to be the background.

‍

Initial Mockups

No items found.

04. Iteration

User Feedback

The overall user feedback was positive, but impression tests with users and stakeholders gave us helpful feedback.

The background image was too distracting. Also, technical stakeholders expressed concern with performance on low-strength internet connections.
Most items did not align perfectly on the left of the screen.
Managerial stakeholders expressed the need for a footer on the screen to hold information for accessibility, privacy policy, Yale branding, and copyright.
User mentioned the login page had too much white space and wanted the screen to be more “balanced”.