Salesforce Logo

Salesforce Login

Login sets the stage for the app experience and is an effective way to communicate important information to your users.

Role

Lead UX Designer

Contributions

UX Design, UI Design, Moderated Usability Testing, HTML, CSS

Project Overview

When the company kicked off the design of Lightning there was no designer on our Authentication & Identity teams, even though login is the most highly visited page in our product. I thought that this was a huge opportunity and I leveraged the relationships that I had on that team, and worked with their product managers to get a redesign of the login pages prioritized.

That team was resource constrained, and the engineers didn't have the bandwidth to get all of the work done, and the UI was one of the lower priorities. There were evenings where the VP of Product Management and I were in a room together writing the HTML and CSS for the login pages, and many other evenings where I stayed up late getting more markup completed.

I'm proud to be able to claim being one of the only designers to have contributed production code to the company!

Problem Statement

Login had problems with accessibility and localization, and the UI was inconsistent with the UI of both Salesforce Classic and Salesforce1.

Organizational structure was a challenge — the content for messaging and advertising is owned by our Marketing team, which traditionally doesn't interact with Product teams, and has their own priorities & the login form is owned by Product. I worked with both teams to revisit our login flows, redesign the UI and UX and create messaging guidelines for our new login page layout.

Salesforce Login Before Lightning

Goals

Personas & Use Cases

# # #

Salesforce Users

Sales Cloud Activities

Training reps, prepping for meetings, closing deals and answering inbound leads

Service Cloud Activities

Providing direct customer support, solving cases, creating and updating Knowledge articles

Admin Activities

Creating page layouts, custom fields, workflow rules and approval processes.

As a Salesforce user, I need to log in Salesforce as efficiently as possible so that I can access my data to win opportunities, close cases or customize my org.

Learn more about Salesforce personas on Trailhead.

#

Salesforce Admins

Activities

Managing users, customizing page layouts, creating custom fields & custom workflows

As a Salesforce Admin, I need to communicate to my users about events, training, or other important information in a highly visible and consistent location, so that important information that's valuable to our company has better chances of being discovered.

Learn more about Salesforce personas on Trailhead.

Product Designs & Interactions

Salesforce Login

When users visit the login page, their goal is to get passed the screen and start using the app as soon as they can. But oftentimes a company might need to communicate to their employees about training, free resources or other high priority information.

Our old login page had up to three different ads, all which weren’t accessible or localizable, competing for your attention. I viewed this as an opportunity to simplify the information that we show, and to increase the real estate for this messaging so that it can have greater flexibility to be more visual and align with the look and feel of your brand.

#

Choose a Username

For users with more than one username, when they visit the login form they’re shown list of their active and inactive Salesforce sessions.

#

Responsive Layout

The login page is optimized for visitors on all devices. When someone visits from a tablet or smaller screen, the ad is removed and the login form is the only thing on the page.

#

One Conceptual Model, Many Pages

Great authentication make it effortless to start using the app or website on the other side of the form or flow. But when you need to change a password, provide secondary verification or add a phone number, you quickly realize how big authentication really is.

#

CTA Hierarchy

The primary action on the page comes through prominently, while secondary and tertiary actions are reduced to make the flow clear and efficient.

#