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 logging in to 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 is is part of the core app experience and should be in sync with the app's UI and UX. The log in page is unique, being shared between product and marketing. We split the page down the middle to give our partners in marketing a large slice of the screen to promote important messages, events or announcements.
Some users have a lot of accounts - they may have a developer org, a primary login, or they might be an admin, where it's not unusual to see greater than 10 usernames. The user switcher makes it easy for customers to quickly get into an org without needing to enter login credentials over and over.
The old login page wasn't accessible, it was often out of visual alignment with the core app and there was extra overhead making localized ads.
For users on smaller screens like small laptop or a tablet, the ad disappears giving the login form focus and creating a cleaner UI.
The login page can be customized by adding a background image, updating the logos and button colors.
The UI responds to user input, activating buttons when the user starts typing.
Small privacy affordances are used like blocking out the first six digits in the user's phone number. If for some reason the user can't get a verification code, they can choose to use Salesforce Authenticator or have a code emailed to them.