( ☁️+)
Introduction
In 2021, Salesforce began producing popular live and on-demand content addressing evolving business challenges and the future of work. They approached Instrument to create a streaming platform. Through collaborative workshops and rapid prototyping, we designed this video content platform and have continued to work closely with the Salesforce team on adding new features to the platform.
Did
Product Design
UI System Library
UI Design
UX Design
Used
Figma
Principle
With
Design Director
Taliessin Schuszler
Junior Designer
Sidney Rhee
UX Designer
Jenny DeSouchet
Anthony Lamont
At
Senior Designer
Instrument
Netflix for Career Growth
Salesforce+ is a free streaming service that provides business-focused content, including original series and live events. (But you can also think it as the Netflix for career growth)
Adding a Feature
We gradually introduced new functionalities after launching the design above, below is an example of how we designed the 'search' feature. Typically, we launch an MVP, refine it or redesign it after A/B testing, and then integrate it into our design system.
Within Salesforce.com, the search function should focus exclusively on content within the Salesforce+, rather than other content.
User flow for the MVP launch
Search field design for the MVP Launch
Search result design for the MVP Launch
The problem with this approach
After launching our MVP design, A/B testing revealed that many users were confused by the dual search icons in the navigation. User behavior did not align with our expectations, as they struggled to distinguish between the Salesforce+ content search and the global search.
The new design replaces the global search with Salesforce+ search
Final solution for search field
Final solution for search result
Finalizing a Component
Once a design is finalized, we build it as a component composed of elements, gallery, and foundation. Our Figma component library follows this structure, organized into four distinct levels. Finally, each completed component is prototyped with animations and exported as Lottie files to hand off to the front-end team for accurate implementation.
Minimal approach for Figma library
To enhance collaboration and ensure easy maintenance with the Salesforce team, we created a user-friendly Figma library with clear organization and logic. Emphasizing minimalism, we kept the files lightweight to reduce loading time and ease the mental load for anyone opening them. When you see a light weighted Figma, that's a stress relief. ᕙ( •̀ ᗜ •́ )ᕗ
