Salesforce

Customer Health Score Card app, interactive prototype, and demo design challenge

How to create a customer-facing app that can give customers insights into their Salesforce product usage in less than 3 weeks.

The Salesforce Customer Success Marketing team needed a promotional demo, a functional interactive prototype, and video of a customer-facing application using an internal beta version of the Customer Health Score Card application that had had no prior design input.

My role was to design a new customer-facing user experience that was more intuitive, easy to use, and could be used to market the upcoming tool to executives and customers in less than 3 weeks. The current experience was internal-facing only and built by the data team using Tableau software.

View Salesforce Customer Health Scorecard video
showcasing vision to customers

View presentation by EVP at Company Kick-off (internal Salesforce employees only VPN required for access) New experience shown from 2:51 seconds

View project impact and outcomes

View my role, approach and methodology

Design problem analysis
‍

Salesforce Customer Health Score Card app home screen showing health scores and signal breakdown for adoption shown on a laptop screen

Project impact and outcomes

  • The EVP showcased the solution at the Company kick-off, presenting to C-level Executives and internal stakeholders.
  • The final demo and prototype were leveraged to create a compelling promotional customer video, strategically positioning the upcoming application solution in the market.
  • Within a short timeframe of less than three weeks, I led the design efforts to craft a new user experience characterized by intuitiveness, ease of use, and organizational efficiency.
  • The redesigned UX/UI was seamlessly integrated into subsequent iterations of the Customer Health Score Card application, ensuring a consistent and improved user journey.
Salesforce Customer Health Score Card app screen on laptop showing enlarged sidebar and expanded accordian with signals screens

Account profile design

Incorporated the redesigned account information seamlessly into the left panel, enhancing user accessibility to assess the overall health score, products and service plan tier, as well as the assigned account team.

Customer Health Scorecard tab design

Introduced a new tab seamlessly incorporating the Customer Health Scorecard application into the existing prototype. This strategic addition ensures a consistent and aligned user experience with the project's overarching goals and desired outcomes.

Health Score signal breakdown accordians

Crafted a newly reorganized interface featuring collapsible accordions to enhance the breakdown of scores associated with key health indicators.

“The time you put into the mock definitely shows. I know we were mandated on this one to move fast, but thank you for translating all of the draft-y vision into a great mock that also gives us some wiggle room and doesn’t lock us into some new look or feel to the Help Overview experience.” Eric Marshall, Senior Manager, Help Experience

My role, approach and methodology

Led a cross-functional collaboration aimed at elevating the user experience and shaping the application's vision through the following steps:
‍

  1. Engaged with stakeholders and subject matter experts to comprehend the requirements and define the problem.
  2. Organized gathered information, creating a hierarchical structure of features/functions prioritized from most to least important.
  3. Conducted brainstorming sessions, sketched ideas, and quickly conceptualized potential solutions on paper to seamlessly integrate functionality, user experience, and interface into the existing application.

Reviewed existing internal-facing experience and determined approach:
‍

  1. Eliminated non-essential content and functionality, including icons and pop-ups, from the interface. This refinement focused on removing elements that lacked purpose, did not contribute value to the user experience, or were not inherently intuitive.
  2. Introduced collapsible accordions to display only one expanded section of content at a time, providing a more focused and organized user experience.
  3. Harmonized colors by minimizing the color palette, incorporating a consistent and cohesive scheme based on Tableau design system guidelines.
  4. Designed a new user experience, presented it to key stakeholders, engaged in constructive feedback discussions, and iteratively refined designs as necessary.
Salesforce Customer Health Score Card app showing health scores expanded accordian and health signal detailspop-up and signal breakdown and resources enlarged screens

Customer Problem

“I require a means to access comprehensive account health information related to my Salesforce products, covering aspects such as adoption, engagement, and performance. This is essential for identifying gaps and optimizing my investment effectively.”

Business Problem

Design a user-friendly interface that effectively communicates insights on Salesforce product adoption, engagement, and performance to customers. The aim is to deliver a health score derived from usage data, providing clear and accessible product metrics representation. This optimization will enhance customer engagement and understanding.

Stakeholders

EVP, VPs, Product Managers, Directors, Designers, Art Directors, Customer Success data team, video team, demo team, C-Suite level Executives, and customers.

Initial sketches and brainstorming
‍

Salesforce Customer Health Score Card app showing initial sketches and brainstorming images

Design problem analysis

The existing solution, constructed in Tableau without adherence to UX strategy, guidance, or visual design practices, was intended solely for internal beta use. Addressing the following issues helped improve both the design and functionality before proceeding with the demo:
‍

  • The user experience was confusing, lacking a clear hierarchy in how the interface was designed and content presented.
  • User experience design principles were not applied, leading to an absence of cohesive and intuitive design.
  • Excessive content was presented in an unorganized manner, lacking a systematic approach or hierarchy.
  • Inconsistent use of icons, deviating from brand compliance and lacking alignment, resulted in a non-intuitive experience.
  • Excessive pop-ups during interactions, causing overlap and content concealment, compromised the user experience and impeded usability.
  • The color scheme was confusing and diverged from the Tableau design system and brand guidelines, creating a visual inconsistency.
  • Lack of clarity in understanding app functionality, usability, and purpose.
  • Absence of a content strategy or adherence to copy guidelines.
  • The apps purpose and its value proposition to enhance the customer experience were unclear.

Original experience
‍

Salesforce Customer Health Score Card app internal beta experience screenshots

Ravinder Basra

AboutPortfolioContact
© Copyright 2023 Ravinder Basra