Salesforce UX — Medium | Anwesha Samanta

Behind-the-scenes view of building Analytic Apps for Customer Success

A few weeks ago, a couple of us from Salesforce Analytics UX team were at a customer site to chat with users about building Analytic Apps. After learning about their process and challenges, we realized one of the main struggles our customers face is designing information — more specifically, finding a task-oriented and actionable visual representation of their business goals. They have huge amounts of data mostly in the form of spreadsheets and they find it difficult to translate that into a simple interface. We spent the rest of the afternoon walking them through the design team’s process of designing and building Analytics Apps.

The UX team conducts design studios with stakeholders, product managers, and developers to answer business questions and produce and test those ideas. In this post, I am going to break it down into a three step iterative process.

1. Empathize — the Bedrock of Good Design

The first step is understanding your end user. One of the best ways to frame, structure, and align on information is to map the user’s path of inquiry, i.e. a structured outline of all the user’s needs to achieve their goal. You can map it out by identifying the user’s objectives and business questions.

Mapping out a path of inquiry for Sales Manager

While building our Sales Analytics App, we started with identifying our target persona. Then, we mapped out their journey to get answers to their goals. The target persona in this case was a Sales Manager who wanted to make their selling process more efficient.

• Identify Goals. Start by listing out the main business goals and questions needed to answer those goals. For the Sales app, some of the high level goals were to track business performance, review pipeline, and forecast to identify behaviors that drive sales.
• List Questions. List out all the questions that user might ask to answer these goals. Some of questions a Sales Manager might have are “How much quota is remaining close for this quarter?” or “Do I have enough pipeline to hit my quota?”. Once the questions are listed out, we find pattern in the questions and group them into categories such as Forecasting, Identifying New Opportunities, Team Performance and Benchmark, etc.
• Define Metrics. Choosing the right metrics to identify how your business is doing is critical as it helps you focus and take subsequent actions. In our case, a Sales Manager who tracks their team performance would want to compare reps reporting to them on various metrics such as their quota attainment, win rate, deal size, etc. Once they spot an outlier, they might take actions such as growing pipeline, assigning new opportunities to a rep, or coaching them.
• Prioritize. Finally, it’s important to prioritize these metrics. Prioritization helps create an architecture and hierarchy of your data and avoids overwhelming the user with too much information.

2. Ideate —Collaborate on Ideas

Ideation centers around sharing ideas with users, product managers, developers, and designers. We do a 60–90 minutes design studio where the team gets together to sketch and share. We did many rounds of design studios for our Sales App where the entire team sketched ideas to represent forecasting, measuring team performance, and similar metrics that a Sales Manager cares about.

Materials you need for sketching session are papers, markers, stickies and most importantly an open mind.

• Sketch. Multiple rounds of time boxed sketch sessions where each participant sketches one or more idea.
• Present. Each participant gives a 3 minute presentation of their sketch.
• Discuss and Sort. The group discusses, groups, and sorts the sketches.
• Prioritize. Each sketch is prioritized based on relevance to answering user goals and questions.

These collaborative workshop sessions are super helpful to kickstart a vision towards the final product. A diverse team can bring in different ideas and viewpoints to the table. You emerge from these sessions with the strongest concepts and visualizations to represent them.

3. Design — Create A Plan for Communicating

After the first two steps, we are left with a set of loosely organized ideas. Designing information starts with organization. A good design has a clear structure which is based on similarity and hierarchy, e.g. persona or task.

Pages in an app should be laid out so that they tell a story. The story should be focused and task-oriented to help users accomplish a goal.

We structured our Sales app based on personas such as sales leaders, managers, and reps. Each persona has a set of pages or dashboards that are structured based on tasks that they perform.

Persona based structure

To convey the right story, consider the following factors.

Layout

Pages can be laid out like a newspaper or article where they have a summary, content and conclusion.

• Summary. A page has a headline that is reserved at the top of the page to display the most important information and summarizes the rest of the dashboard.
• Content. The dashboard body provides more details about the headline with supporting visualizations.
• Conclusion. The concluding section of the page is a list of details and actions that are used to look up detailed information.

F, Z, and Side by Side page layout

F, Z, and Side by Side layout are the most common layout we use for pages. These patterns help get the user’s attention to the summary KPIs first, followed by supporting visualizations and a detailed actions list at the end.

• F pattern layout places summary KPI in the left pane. Subsequent detailed visualizations are positioned to the right of the pane and serve to provide more details.
• Z pattern layout involves a top down scan of the page. The summary information sits at the top of the page. Supporting visualizations are positioned below the summary and occupy the full width of the content area.
• Side by side layout works for comparing two things. This pattern allows user to scan left to right and vice versa to compare information.

Information Scent

At first glance, the user should be able to know whether a metric is good, bad, or neutral. Information scent provides user with just the right amount of visual information that provides valuable context to provoke further curiosity.

Information scent examples

In the example above, the number $534K doesn’t have a meaning by itself. Providing contexts such as comparison to last year and adding a benchmark adds more meaning to the KPI. The user now knows if something is good or bad and can drill in further to view more details.

Charts

Choosing the right chart that derives the most important insight is vital to telling a story. Using the incorrect chart creates confusion and misrepresents the underlying data. There are a lot of studies and books written around the topic of information visualization — one of my favorites is Dona Wong’s The Wall Street Journal Guide to Information Graphics: The Dos and Don’ts of Presenting Data, Facts, and Figures.

Choosing the right chart

Color

Using color in context helps users notice alerts and take desired actions. Keep in mind that using too many colors defeats the purpose of associating meaning with colors. Based on our experience and research sessions with customers, five is a chunk that humans can easily retain.

Use of colors in analytics

User Feedback

It’s important to get user feedback during this entire sprint and iterate.

• Ask users about their feelings when they first see the app/dashboard.
• Ask them to demo or talk through visualizations.
• Ask users questions that we listed out in our first step of mapping out the path of inquiry, and see if users can find answers to those questions in your app.
• Follow up by asking them how they would rate the app on a likert scale.

For the Sales App, we started with opportunities, activities, accounts, and users datasets. The main challenge was to figure out what the end user wants to know about their business so we can work with the raw data and find the right visual representation to answer those questions. Following the design studio process, we were able to ship an amazing Sales App that makes our users’ selling process more efficient. We are continuously getting feedback from users and keep iterating to deliver actionable insights to our customers.

Analytics should not be about tracking a bunch of metrics; rather, it should be about getting insights about your data. Following a user centered design process allows us to build a consumable interface that represents complex information, delivers insights, and ultimately brings about customer success.

Transforming dataset to a consumable app

Thank you Eddie for helping guide through the design studio process and being a great mentor. Thank you Raymon for reviewing and helping edit this blog, and Steve, JD and Kathy for your valuable feedback!

Follow us at @SalesforceUX.
Want to work with us? Contact [email protected]
Check out the Salesforce Lightning Design System

Transforming Data to Insights was originally published in Salesforce UX on Medium, where people are continuing the conversation by highlighting and responding to this story.