UX Design Workshop - Tableau CRM Edition

UX Design Workshop
Tableau CRM Edition
Presented by:
Elena Migunova | Principal Product Designer

Forward-Looking Statement
Statement under the Private Securities Litigation Reform Act of 1995
This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any
of the assumptions proved incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the
forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections
of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of
management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments
and customer contracts or use of our services.
The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our
service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth,
interruptions or delays in our Web hosting, breach of our security measures, the outcome of any litigation, risks associated with completed and any
possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and
motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling
non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the
financial results of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal year and in our quarterly report on Form
10-Q for the most recent fiscal quarter. These documents and others containing important disclosures are available on the SEC Filings section of the
Investor Information section of our Website.
Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not
be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently
available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.

Let’s all become
Design Heroes.

Why invest in
Design Thinking and
Best Practices?

Reduce Dev Costs
Code defects are 30 times more
expensive to correct than using
the right information in the ﬁrst
place. These defects will not
occur if you follow the Design
Thinking process.
*data from IBM study on UX
Boost team motivation
Involving employees in the design
process will let them see that the
product they’re helping to make
meets company needs. Which will
help with your product adoption!
Improve Productivity
Good design allows for better
implementation of ideas, while
simultaneously making sure that
desirable actions are performed
eﬃciently, making the team more
productive.

First, let’s
Picture a
Dashboard

Static
Document
Dense
Grid
Information
Overload
Dropped
into Folders
Inactionable
Forgotten

Dynamic &
Layered
Focused &
Task-Oriented
Device-
Appropriate
Designed,
not
Authored
Actionable
Updated
Regularly

Think
Analytic Apps,
not
Dashboards.
Dynamic &
Layered
Device-
Appropriate
Designed,
not
Authored
Actionable
Updated
Regularly
Focused &
Task-Oriented

We’re ready to begin our design journey
But, where does inspiration come from?
?

“Art makes questions.”
“Design makes solutions.”
-John Maeda

But, often design starts with
a simple question…

“What if? The Architecture
and Design of David
Rockwell”

What if…
You put an entire bar in a
chandelier?

Asking what if…
frees you to think bigger from the start.

Start each day with a new
“What if…?”

“What if...my sales team was only allowed
to use one app?”

“What if...my company ran on one KPI?”

“What if...we hid insights in our
boss’s breakfast cereal?”

We’re inspired
But, we need principles to guide us.

When you put
Consistency over clarity
@jdvogt

Breathe life and responsiveness into every interaction.
Fluidity

We’re inspired.
We have our guiding principles.

“Design is not just what it looks like and feels like.
Design is how it works.”
-Steve Jobs

Surface
Colors, fonts, branding...
How deep is your design
thinking?
Structure
Scope, Layout, Flow...
Purpose
User Intention, Goals...

Designing
Information
An iterative three step approach to
designing analytical apps and
dashboards
Empathize
Ideate
Design + Test

Empathy is the
bedrock of good
design
In order to frame our understanding, we
start gathering information about our
user’s intentions, goals, and desired
actions.

Who is it for?
Understanding who we are designing
for begins by identifying the user’s
goals and what success looks like for
them.

Astro Sales Manager
Media
● No mobile access to reports and
calendars
● No single source of truth
10 years
● Leverage analytics to focus on
right areas
● Adjust and reﬁne sales process
● Simple targeted view of sales
performance
● Easy to identify right
opportunities
● Meet or exceed sales goal
● Eﬃcient collaboration with the team and customers

Now that we have a deeper context of our users,
We can start to gather their
information needs...

Path of Inquiry
A path of inquiry is a structured
outline of all of the user’s
information needs in order to
achieve their goal.
Deﬁne User’s
Goals
List all questions
needed to answer
the goal

Deﬁne User’s
Goals
Path of Inquiry
A path of inquiry is a structured
outline of all of the user’s
information needs in order to
achieve their goal.
List all questions
needed to answer
the goal

Group similar
questions
under a theme
Identify the
best metrics to
answer each
question
Prioritize each
question

Identify relevant
business actions
End

Identify relevant
business actions
End
Outcome
● A clear understanding of who
will be consuming the
information
● A list of goals the user is trying
to achieve
● A list of business actions the
user might take from the
information
● Alignment with stakeholders on
critical business questions

We understand our user
But what functionality does our
product need to provide?

What job is it hired to do?
True design-led (as opposed to technology-led)
innovation comes from ﬁnding better ways for
people to complete their ‘jobs’ – cheaper, faster,
easier, safer, or whatever other measures of
success they attach.

Jobs to be Done is a framework popularized by Clayton
Christensen in his book ‘Competing Against Luck’ that helps
companies maintain a customer/user focus by asking a simple
question:
What jobs are customers hiring
Your Product to do for them?

Customer
Centric
Jobs are identified through
conversations with our
customers and users...not
with you and a coffee and
some time in Quip.
Stable Over Time
Customers’ objectives and
needs are relatively stable over
time. If you find yourself
frequently changing the jobs,
something's wrong.
Measurable
Outcomes
If the way you’ve captured a
job leaves you wondering how
you’ll know we’ve delivered it
for your customer/user - revisit
the job!
Solution Agnostic
When you describe a job as
intrinsically tied to an existing
solution, you miss the chance
to innovate on behalf of our
customers.
Jobs To Be Done has four common traits
Making a
coffee

DEFINING JOBS : THE job stories METHOD
Job Performer Situation Motivation Expected Outcome
When... I want ... So I can...
Astro I collaborate with the team to understand uncovered
opportunities across the
territory
add opportunities or build
new business
I am working on an opportunity to quickly identify the best
available solution
close the deal and meet or
exceed my quota
The job stories approach focuses on a triggering event or situation, the need or motivation, and the desired outcome.
This approach is helpful to understand why someone hired a particular product to get a job done, and how to get the job
done better.

Follow your user
It’s critical to understand when and
where your users are likely to access
data, and for what purpose, so that you
can provide analytics where it makes the
most sense for the speciﬁc point in time.

Ask yourself:
“Will my users utilize this dashboard to
examine every single chart & table, or will
they simply need to monitor a few key
metrics?”

Be Responsive
Do you know which device your
dashboard will be opened on?
Create speciﬁc layouts for various
device types to make sure your users
get the best experience.

User Journey Mapping
● Think of a scenario when user do their job
● What insights they will need to be looking at
before, during and after their journey?
● What actions will they take?
● What Salesforce pages will they be looking at?

Salesforce
Design
Schedule a
meeting
Home Page Mobile Device
Check my KPIs
Identify focus
area
Record Page

Check out some embedded dashboards:
https://sfdc.co/EmbeddedDashboards

...and some mobile inspiration!
https://vimeo.com/367892178

IDEATE
Collaborate together on ideas

Ideation centers
around sharing
ideas
Once we have a good understanding
of the user’s path of inquiry, we can
start to sketch proposals for how to
answer key moments along the path.

Open Mind
Paper
Stickies
Markers
Materials

Design Studio
60-90 minutes
1
Sketch
multiple rounds of timeboxed sketch
sessions where each participant
sketches one or more idea
2
Present
each participant gives a 3 minute
presentation of their sketch
4
Prioritize
each sketch is prioritized based on
relevance to answering user goals and
questions
3
Sort
as a group sketches are discussed,
grouped and sorted

Design Studio
Artists not required
Iterative and
generative
Inspire each other

DESIGN
Create the plan for communication

Designing information
starts with organization
Form and Function are predicated by the
organization and hierarchy of information as
part of an app and its pages.

PERFORMANCE FOCUS TEAM
HOME
How are things looking?
Where should I go?
How much have I closed this
quarter?
Which opportunities should I
focus on?
How many uncovered
opportunities each sale rep has?

Page
Layout
Headline
Reserve the top of the page to display
information that is most important and
summarizes the rest of the dashboard.
Body
After the headline, supporting
visualizations should be used to provide
more details about the headline.
Details
As the last part of the page, a list view of
details and actions can be displayed for
detailed information lookup.

Navigation &
Branding
The top of the page provides an
anchor point to the content. It
clearly states where the user is and
where they can navigate to.

Filters
Below the primary navigation,
ﬁlters are clearly visible. They
occupy a global position at the top
of the page to control the scope of
the content.

Headline
Summary
The headline summary provides a
quick synopsis of the key
information the page is
representing.

Hero
Visualization
The hero visualization provides
support and further context to the
headline summary.

Supporting
Visualization
The supporting visualization add
extra layer of detail and context to
the top hero visualization.

Details
The details section provides a
transaction detail view of the
data and shows the results or any
ﬁltering that occurs in other parts
of the dashboard.

Scale information
density through
interactions
Rather than exposing all information at
once, we can design “cabinets” around
information, allowing users to open and
close them based on their information
needs.

Zoom
When to use:
Allow users to drill down from a summarized
section into a detailed view.
How to use:
Make sure the information represented in the
drilled down detail view relates back to the
summary state. Re-use the same visuals from
summary state in the drill down state so that
users get a sense of continuity.

Accordion
When to use:
Discrete groups or sections of information
that have a consistent high level summary
and details.
How to use:
Keep the summary and detail state of each
section consistent. Think of this as a table
with expandable rows.

Inspector
When to use:
Show and hide a section containing details
about one or more data points from the main
content area.
How to use:
By default, show the details section and
provide a clear aﬀordance for how to open
and close the section. Use an accent color for
the panel background color.

Curtain
When to use:
Reveal secondary information in the user’s
current ﬁeld of view.
How to use:
Keep the summary and detail state of each
section consistent. Think of this as a table
with expandable rows.

Cards (Mobile)
When to use:
To represent a summary of multiple
dashboard pages for a quick lookup.
How to use:
Show high-level KPIs and summary data.
Keep the main layout consistent, so that it’s
easy to scan. Expand the card full screen for a
detailed view.

Check out the WOW Demo
https://vimeo.com/260670731

CRAP is the
foundation of good
web design
First impressions count and research shows
that attractive interfaces are perceived as
easier to use.

Visualizations
create clear
information scent
Information scent provides the user with
just the right amount of visual
information that guides them towards
important information and context…

Can you count the
number of circles?

Let’s put theory
into practice
Market Share Performance
Company 1
Company 2
Company 3
Company 4
Company 5
My Company
Company 6
Company 7
Company 8
Company 9

Color for drawing
attention
Company 1
Company 2
Company 3
Company 4
Company 5
My Company
Company 6
Company 7
Company 8
Company 9

Spatial
Positioning for
ranking
Company 1
Company 2
Company 3
Company 4
Company 5
My Company
Company 6
Company 7
Company 8
Company 9

Added Mark for
benchmarking
Company 1
Company 2
Company 3
Company 4
Company 5
My Company
Company 6
Company 7
Company 8
Company 9
Average

Design
Systems
Design system is a set of reusable
components and visual rules that are
used consistently across products.

Design Best Practices
Ready to Use
Business Use Cases
Preview:
https://sfdc.co/AppDesignToolkit

108
Identify deals at risk
Understand team performance
View case volume
Prioritize leads & referrals
Ready to Use
Business Use Cases
Preview:

Identify deals at risk
Understand team performance
View case volume
Prioritize leads & referrals
Ready to Use
Business Use Cases
Preview:

Available as a dashboard template in Winter’22!

Testing ensures
user goals can be
achieved
Gathering feedback from real users
performing realistic tasks validates
needs and designs. It also surfaces
opportunities for improvement.

Critical
Incident
Questions
Shed light on your
user’s goals and
needs.
Overall Description
“Describe the most recent time you
needed to review your sales data.”
Actions Taken
“What steps did you take?”
Feelings
“How did you feel during the process?”
Outcomes & Future Actions
“What was the outcome and what
would you change in the future?”

Expectation
Test
Shed light on your
user’s goals and
needs.
Identify Task
Review company sales performance
Create Scenario
You are a regional sales manager, and
you want to use the new Sales
Dashboard to review your sales data.
“First Step” questions for each task
Where would you expect to ﬁnd
functionality that would allow you to
see your sales data from last year?
Ask for categories and names
How would you categorize and name
this functionality?

Rapid
Iterative
Testing
Helps you identify
and ﬁx usability
issues.
Schedule
Schedule time with a real user
Tasks
Ask user to perform tasks using your
design
Expectations
Don’t oﬀer any help - just ask where
things are expected
Feedback
Consider changing the design when
feedback indicates a critical problem

To become a design
hero, remember to:
Understand your audience
Align on critical business questions
Ideate quickly and often
Design for structure and organization

Design thinking process
beneﬁts
Reduced development costs
Productivity boost
Excited team = great adoption

Get the Einstein Analytics
Design Book
Get Inspired Even More!
sfdc.co/analyticslookbook

Continue your Learning Adventure
● Trailhead Module
Analytics Apps Design
● Einstein Analytics Learning Map
http://www.einsteinanalyticslearningmap.com
● Learning Adventure App
https://sfdc.co/zOqdS
● UX Design Certiﬁcation
https://trailhead.salesforce.com/credentials/use
rexperiencedesigner

User Research Program
You have the power to impact the design of our products.
Sign Up Today!
https://sfdc.co/4RuxL

UX Design Workshop - Tableau CRM Edition

More Related Content

What's hot (20)

Similar to UX Design Workshop - Tableau CRM Edition (20)

More from rikkehovgaard (18)

Recently uploaded (20)

UX Design Workshop - Tableau CRM Edition