The most important thing to the user about the login page is the ability to quickly get into the app so they can start working. It also serves a roll for administrators in communicating important information in a highly visible place. We leveraged the Salesforce Lightning Design System to create a consistent and seamless experience when entering the app.
My role as the Lead UX designer was to work with PMs, engineers and writers on the Authentication and Identity teams to redesign our login pages and flows. I collaborated with our marketing teams to create a messaging framework that's flexible, accessible and localizable in a highly branded experience.
As a Salesforce user, I need to quickly log in to Salesforce so that I can maintain relationships with my Accounts, Contacts and Leads so that I can nurture business, win Opportunities, and help customers solve problems.
As an Admin, I need to communicate important information about trainings, events and special messages to my users in a highly visible and branded experience.
When designing the login page, I prototyped the page in HTML & CSS in order to show responsive behavior and explore how we could make our advertising more dynamic. The team then took and extended my markup for the production login experience.
The login page uses the Salesforce Lightning Design System, which promotes usability, accessibility and brand-alignment. The left side of the page is reserved for the login form, visually separated from the ad. The right side can be used by our marketing team to communicate news about product launches, Salesforce events and other important information.
Some users have many accounts they traverse throughout the day. We remember the usernames and preserve session state so that when a user visits the login page they can have easy access to accounts recently used.
The old login page suffered from accessibility concerns, the layout created a busy UI, and each page came with the burden of needing to maintain four separate versions.
As the browser responds down below 1024px width, the ad disappears and the login form is front and center.
The login page can be customized by customers that use our Communities product. Background images can be added, logos can be changed, titles added and colors altered.
The UI responded to user input, activating buttons when valid entries were inputted into forms. This helps reduce errors by serving as a form of feedback about the state of a form.
When a valid entry is added to the input, the button activates, allowing the user to complete submit the form.
I sought to make each form clear and easy to use. Every flow was tested with users to make sure they knew what they were doing, why they were doing it and what to do next.