Empowering a huge Experience

Go deep into the design principles and with them, clean the face of a product

I was invited to collaborate with Salesforce's creative director to work closely with the UX team in order to create a better experience for both of their main products: Lightning and Trailhead. The need was to create a "bridge" between those experiences: sometimes combining different attributes, while other times, eliminating boundaries. In other words: using the same ingredients, the same design principles, but applying them in more strategic doses.

01 . What is Lightning?



Lightning makes it easier to build responsive applications for any device:

• Lightning components give the user a client-server framework that accelerates development, as well as app performance, and is ideal for use with the Salesforce mobile app and Salesforce Lightning Experience.

• The Lightning App Builder empowers the user to build apps visually, without code, quicker than ever before using off-the-shelf and custom-built Lightning components.

Using these technologies, you can seamlessly customize and easily deploy new apps to mobile devices running Salesforce. In fact, the Salesforce mobile app and Salesforce Lightning Experience are built with Lightning component

02 . What is Trailhead?

Trailhead is an interactive learning path through the basic building blocks of the Salesforce1 Platform. Test your knowledge of the platform while earning points and badges to celebrate your achievements.

The Gamification:

“Trailhead is basically a tutorials platform, it has exercises to test your knowledge so it's not just a reading type tutorial. The good thing here is how Trailhead hooks you because of its gamification :) As you finish modules you will receive points and badges that could be linked to your developer profile and show your knowledge. Recently they have added the possibility to add your badges to your linkedin profile. ”

03 . The goal

Create a bridging experience between both products (channels)


Trailhead

Take the gamification spirit, with its colorful visual design, the mascots, the attitude, and drop in the new user experience design. (fun, friendly, colorful).

Bridging experience

Create a new language through UX & UI & VD, maintaining the unique attributes from both sides of the bridge in order to transmit a robust branding experience.

Lightning

Keep the same amount of data on every screen, together with its clean visual design, while also maintaining its clear information architecture (serious, numeric, monochromatic).

We layed out our goals in order of importance to keep our project handy and editable by all of our team members.

04 . The Audit

First step: We spent a whole week dedicating ourselves to a conscious, deep analysis of the current interface.
The following is a series of screenshots highlighting our notes and suggestions for all the main pages of the interface.


Activity

Profile


Opportunities

App Launcher

SetUp

Unordered





Our analysis sparks a new conversation:
Once we were able to look at the specific issues that needed to be addressed, we were then able to focus our attention on the most important adjustments that the project required.

* I collaborated with F. Scott Krueger creating some of the animations and animated interactions you'll see on this Case Study.



05 . A basis for design

• Salesforce's Design Principles

The Lightning Design System reflects the patterns and components that underpin the Salesforce product.
These patterns and components provide a unified language and consistent look and feel when designing apps and products within the Salesforce ecosystem.

Eliminate ambiguity. Enable people to see, understand, and act with confidence.


Streamline and optimize workflows. Intelligently anticipate needs to help people work better, smarter, and faster.



Create familiarity and strengthen intuition by applying the same solution to the same problem.


Demonstrate respect for people’s time and attention through thoughtful and elegant craftsmanship.



• Salesforce's Lightning Design System

Enables to build rich enterprise experiences and custom applications with the patterns and established best practices that are native to Salesforce.


The Salesforce Lightning Design System includes the resources to create user interfaces consistent with the Salesforce Lightning principles, design language, and best practices. Rather than focusing on pixels, developers can focus on application logic, while designers can focus on user experience, interactions, and flows.

www.lightningdesignsystem.com

06 . The overhaul of the UX starts taking place

The first changes to be applied were on the header.
The navigation, the icons, and all the elements involved in the usability / branding as mascots and illustrations followed.

* The Header

Featured above is the existing header which needed to be redesigned.


First task: "Cleaning" the current header.

The main task was to reorganize the existing information while also establishing hierarchies.
The balance between content and white space was improved. New breathing room was added to the bar as well.



Gamification Accents

One idea was to add fun ingredients that
would mirror those on the experience.



Trailhead

Points + badges shown next to user's avatar help
them get more involved and improve their interaction with the product.


Iconography

A new set of outlined icons was created
to balance contrast and legibility.

Hierarchy of information

Divided navigation. Two clearly delineated levels of information (which were eliminated in future rounds).

Dark & animated exploration focused on gamification accents (eliminated in future rounds).

FINAL HEADER

Icons + microanimations + improved alignment + better optical balance and a better architecture. All of these were applied to the final design.

07 . Microinteractions are fun

The universe of login forms became an additional field of exploration. The way in which the interface would react to the user’s behavior was key in improving the level of intelligence and fun offered by the product.

Iteration 1

Following the Lightning Design System:
Offers the ability to more effectively communicate content hierarchy and spatial relationships than static interfaces alone.

* Animation and kinetic interfaces have cognitive benefits for your users by reducing mental loads, and reducing change blindness.


Iteration 2

Motion behaviors:
Motion and animation improve navigation, draw attention to feedback, enhance the brand, and bring delight to the user experience.

* Animation can reinforce your corporate brand and provide a steel thread experience across your platforms, devices, and form factors. Used responsibly, performant animation also provides accessibility benefits to those with reduced cognitive abilities.



08. Login Page

In our first round, we used Trailhead illustrations. Setting a color palette from each illo, so that the upcoming screens of the ux journey would feature a cohesive style.

Old Version (on the left) vs. Redesigned (on the right)



RESULTING REDESIGN:
a better balance was introduced between all the interactions and features on this page.
All of them aligned and integrated in one single login page, even when used by a variety of clients for different purposes.

09 . Meanwhile, on other devices...

Adapting the experience to additional devices such as cell phones or tablets became a whole new challenge, due to the fact that the primary platform was indeed the desktop. Below, you'll see some solutions that I was able to come up with.

· The mascots, which came from the Trailhead world, add the voice, the tone and the life over the more formal Lightning platform.


Astro

Your guide to Salesforce:
Astro is your friendly guide to everything Salesforce and aids you in becoming the best at anything you want to do. Warm and welcoming, he encourages the Salesforce community to achieve their goals by inviting you to try new things, asking questions, and having fun.


Codey

Inspiring builders and makers everywhere:
Codey is a maker and a builder. Whether it’s coding an app on Salesforce, or pouring lattes as a ‘Bearista’, Codey isn’t afraid to get noticed or dive in to get things done. While he may be fearless in the face of challenges (and helps you be fearless too!), Codey isn’t a ferocious bear, and likes giving out bear hugs.





Main Login

Trailhead flavored Login
The illustrations and mascots are the main attractions. They help the user start a "long journey" or a long session using Salesforce's products.


Microinteractions / Animations

Promotional banners. An assortment of banners that were designed to promote the different aspects of the site.

Interactions + Branding = interactive branding

As part of my duties as Branding Consultant, adding these elements into the platform was a key decision in order to achieve the goals originally planned for the redesign of both platforms (Trailhead & Lightning).

Badges

Motivate the user to go even further with Trailblazer Ranks. User unlocks new ranks for its profile by challenging himself to earn more points and badges.

Gamification

Empower learners with an on-demand, gamified platform, customized with their brand and content. Learning is way more engaging and more exciting, when a healthy dose of competition and gamification are thrown into the mix.

Microanimations

Bringing motion into design systems. Family of subtle functional animations, that has a clear and logical purpose: brings the user interface to life.

10 . Let's get into it!

As a good example of all the power of the bridging experience between two worlds, let's view deeply one of those key pages we explore to open the discussion at Salesforce.

PROFILE PAGE:
BEFORE THE DESIGN INTERVENTION

PROFILE PAGE:
AFTER THE DESIGN INTERVENTION

CUSTOMIZABLE PAGE:
here's a good example of how a heavy user of the platform could customize the page. In conclusion, the user makes the platform of his own.

SetUp Page

BEFORE
Create familiarity and strengthen intuition by applying the same solution to the same problem.



AFTER
Demonstrate respect for people’s time and attention through thoughtful and elegant craftsmanship.



Log In Page

Listing Page

As part of the update to the visual design pixel and lines of code were wisely subtracted to gain space above the fold. Now the user can visualize more content. The usage or hierarchies and accents was also introduced so that the information on each page became easier to process.

BEFORE

AFTER

App Launcher Page

BEFORE

AFTER

Pixel vs system / micro scope vs big scope:Constantly zooming in (pixel perfect management) and out (evolving the design system) is an essential part of the process . Here's an example of some key pages placed side by side. Keep in mind that there should be a similar balance between the elements of on any given page. The same goes for a whole group of pages on the same system.

Homepage final UI design.
Each section has its specific purpose: some areas focus on branding, other sections feature ads and sponsors. Additional areas stress the ability to search and navigate the site.

• Here's an example of another key page redesigned using this concept.

08 . User Interface Design

Developing new and original ways for users to find content was an effective tool in allowing them to remain on the site for longer periods of time, increasing page views, remembering it later, and returning.

Navigation system
The entire content featured on the site was divided into 20 categories. Such a challenge proved to be helpful to writers who were able to focus on specific issues. It also allowed users to find content much faster.

The Content Modules. They are the essential, basic units of information of the site.

05 . The Results

Based on my experience, the best way to measure results is always through numbers. It could be by having better timings, better page views, better performances, etc. No matter the nature of the goals we set out to accomplish for a project, I always measure the results by contrasting the numbers, before and after.

More than 150,000 customers and millions of users. The idea (to make the UI adaptable to the client’s brand) became an instrumental concept to bring brand identification into the platform.

Clients platform customization:
an important goal by many stakeholders involved was the customization of the platform by the use of the visual elements created for the design system. (Seen above) Here are a couple of good examples of how The Home Depot and Coca-Cola adapted Lightning Design into their own branding.

Constant Feedback / Agile design

Print and place on the wall
It's always important to create distance between the created design and your eyes, as well as to move the design away from the four corners of the screen. It is thanks to this process that the whole team can contribute with their feedback and ideas into each of the key screens, by catching a glimpse of the entire design system before them.

Who's the boss? The product & the user ;-)

Salesforce is a global cloud computing company that provides business software on a subscription basis. It is best known for its on-demand customer relationship management (CRM) solutions. It offers users a customer community, partner community, developer community, and an app exchange marketplace. Salesforce provides its products and services to various industries, including: healthcare, finance, life sciences, automotive, media, retail, manufacturing, and communications.


Here's a quick view of the resulting branding experience

Some conclusions

Companies with powerful, complex products have a strong visual language based on a set of rules and codes applied to a living design system. One of the things I’ve learned from this project was how to understand rules of systems and add new elements and particules later on which would perfectly fit into it. The secret behind a good design system is to create it in a solid yet flexible manner. This way, the different departments dedicated to developing it can accelerate their work and make sure that there is visual consistency every time new features are added to the UI.
“Adding more tools to the toolbox” defines the good use of a Branding User Experience.

The opportunity to design by following a well-crafted design system was a valuable experience for a seasoned designer such as myself.
Keeping out of the design process from that initial "blank paper moment", sped up the entire process.

It was relevant to the process (as well as essential to the project) to use the existing guidelines and design systems. In order to develop new utilities and elements for the current products, it was necessary to add more flavor or retune others. Therefore, creating new modules and particules; understanding and reinterpreting design rules assured a perfect fit into the entire system. Designing by basing it on an already well-crafted system was a great experience for a seasoned designer like me. Keeping out of the design process the initial "blank paper moment", speed up the entire product demandings.

It was all about designing better choices for users

Salesforce.com

Salesforce has been named #1 CRM, and is a global cloud computing company that develops CRM solutions and provides business soware on a subscription basis

Role + Location

UX + Branding Experience Consultant
San Francisco

Skills

 

Previous Case Study / Next Case Study