Product Design: Login Page

The Company

From 2017 to 2021, I worked for a company, EM, which is a B2B web application for Special Education teachers and related staff. Their goal is to consolidate and organize student data that can be easily shared among staff while following research-based best practices.

The Challenge

EM is reached out to me in 2017 for help with the visual design of their fledging application. The co-founders showed me the web app's three main pages while we discussed its purpose and goals.

As we dug deeper into the pain points of the current user experience, it became clear that a deep dive was needed on multiple fronts: user research, information architecture, visual design & branding, prototyping and testing, and a concise goals statement for EM's overall product vision.

Login Page: Before (2017)

The shot below is the state of the login page in 2017. Redesigning the login page was one of my first tasks as a UX Designer at EM.

The 2017 version presented a number of challenges:

Teachers needed to identify and click on "login" in the top right of the screen in order to type in their username and password.

A large portion of the screen was taken up by a "Register for an account" box, which did not actually register a teacher for a new account.

The login page contained a lot of text explaining the purpose of the web application, which was not needed on the login page and could find a better home on EM's marketing website.

The founders were not satisfied with the overall visual style of the login page and wanted to update its typography, colors, and general branding.

Login Page: After (2021)

The shot below is the redesigned login page, which stayed consistent through 2021.

The redesigned version contained a number of changes:

The background utilized a beloved image from EM's marketing website, which was darkened with a blue filter to subdue the busy visual details.

All of the text was taken out and relocated to EM's marketing website.

The "Register for an Account" box was deleted due to the fact that EM's customer service team set up new accounts behind the scenes and then emailed sign-in information to new users.

The EM logo, which was not redesigned at the founder's request, was enlarged and centered on the page in order to show it off intentionally.

The login inputs showed the new and intentional font family, Roboto, and the "sign in" button was given a bold blue color, rounded corners, and subtle dark drop shadow. These little details became the foundation on which the rest of EM's visual design style was built, creating a beautiful, modern, and seamless visual experience that elevated the features and data within the web application.

More by Andrea Williamson

View profile