← Back to Projects

Canvas Login & Rage Clicks

Our Canvas login was in desperate need of a redesign. A redesign was implemented but a new problem arose a few months later. This project outlines the simple solution to that problem that proved to be extremely effective.

Live Page: Canvas Login

01 of 8

Our Old Canvas Login

The Canvas login is our most highly trafficked webpage at Instructure. It is the place where students, educators, free canvas account users, community members, and Canvas network members all visit to log into their accounts. Previous iterations of the page (before my time) simply had 4 forms listed on the page. This is far from ideal since 2 of the forms where not above the fold. I was tasked with creating a new login that could handle multiple logins in a clear and effective way.

02

Research and Gathering Info

While the design flaws and pain points seem pretty obvious, I wanted to have some data that supported and justified the need to update this login experience. After some review with Google Analytics, Lucky Orange, and stake holder collaboration I was able to obtain some valuable information that would help me start the new design. This information included:

Users still attempted to select the blue login button in the nav even while on this page. Indicating that users would question if this was the correct page.
Target audience persona: Student and Teachers/Educators who log in to Canvas.
The main form that should show by default is the "Students and Educators" form since that is engaged with the most.
To reduce confusion, only one form should be present at a time.
Everything should be above the fold.

03

Wire-framing Different Options

I began outlining some potential layouts that would try to solve the issues above. With all my projects, I like to run these early iterations by a dev to ensure that what I am suggesting is actually possible and fits within the scope of the project. After some light user testing with Useberry and collaboration with the stake holders we narrowed it down to 2 designs.

04

Testing To Find a Data Driven Winner

Since I had 2 layouts ready to test, I built them out as functioning high fidelity prototypes that users could interact with. I created a user test with our target audience of students and educators that would shed some light on which design we should use. The test was designed to measure which design was easier to use, overall satisfaction with engaging with the login, and the amount of time taken to find and select different logins. Both designs performed quite well, but what gave us our winner was the amount of time taken to find different logins was on average 50% less for the toggle button design due to all the options being visible.

05

Over To Development

After testing was all complete, I had a design to send over to development. Because I had already looped them in with what I was doing they were fully versed on what was expected. This updated was made live and my work on this was done. Or so I thought...

06

A New Problem Arises

After looking at this page through one of our analytics tools, Microsoft Clarity, we noticed a large amount of "Rage Clicks" were being reported a few months after its deployment. What is a rage click? It is a series of consecutive clicks on a webpage that indicates a user was rapidly clicking an element, expecting it to do something, and it seemingly did nothing. So what exactly was causing all this frustration?

After reviewing heat maps and screen recordings, the culprit was the "Students and Educators" button being the preselected default option when the page first loads. Even though it was already selected, users thought they had to click that button again to see the correct form. This problem was even more apparent for users on phone sized devices. The options would be presented to them which when selected would display the correct login below the options. In many cases, the form would only be half visible on phone size and the user would rage click the "Student and Educator" in hopes that it would take them to the correct form. Needless to say, it became my task to find a solution.

07

The Solution

With this being our most trafficked page, it was determined that the solution had use the existing design and could be easily implemented within a short period of time. We did not want to do anything drastic since any small bug would likely be seen by thousands of users.

After some brainstorming and user testing with Useberry, I was able to come up with a simple solution that could potentially solve our problem. The problem was there were no visual indicators to let you know what you were actually supposed to fill out. According to my research and testing, adding a visual indicator when a button was selected would let the user know the next steps. Here are the changes that were implemented.

Desktop: When a user visits the login the only thing that is visible are the login options. The user then has to select which one they want and the associated form will become visible on the right of the options through a sliding animation. On top of that, if a user continues to press the button after the animation, a red box will appear around the form input fields indicating that is where they need to be.

Mobile: When a user visits the page the form options will be visible in the usual way at the top. When the select and option the screen will then auto scroll down to display the form they are intended to fill out. The red box indicator around the form fields will also still be present for added awareness.

08

The Results: Did it work?

This fix was implemented the first week of June 2024. Before the fix, roughly .82% of all users engaged in some form or rage clicks. At the time of writing this, Aug 2024, our rage clicks have dropped to just .22%! After reviewing these results with the team we celebrated this as a huge win.

*Our VP (Jevan Woolley) at the time also gave me a nice shout out about this win to the larger marketing org, which I will be honest felt pretty good.