Structure Your App

Learning Objectives

After completing this unit, you’ll be able to:

  • Understand the importance of structuring your app’s content.
  • Explain the process for structuring your app.
  • Determine the structure of The Motivator app and start to fix it.

Criteria for Structuring Your Ideas

You’ve got a great set of feature ideas that expresses the purpose of My Motivator and can give sales managers what they need. Now you need to structure them according to several criteria.

  • Priority. What’s most important to the audience and purpose?
  • Logic. What needs to be understood first?
  • Level of granularity. What’s most general, what’s more specific?
  • Similarity. Content should be organized together with other similar content. Distinct content should be separated.

With that in mind, you have another look at the list of ideas from the pizza lunch meeting. You’ve already prioritized the list, so you’re partway there. Let’s see it in abbreviated form.

  1. Leaderboard and activity totals, along with completed and overdue activities.
  2. Type of activity week by week.
  3. View activities as they roll up to each level of management, from sales manager, to regional manager, to sales VP.
  4. Activities for each rep and each account.
  5. Separate sections for emails, calls, and so on.
  6. View activities on a weekly basis.
  7. Average activity levels benchmark.
  8. Details for each activity type.
    • Inbound and outbound calls.
    • Email priority.
    • Complete and open events.
    • Complete and open tasks.

Seems like a thorough, well-ordered list, so it shouldn’t be too much work to figure out how to organize it in a dashboard.

App Structure Concepts

To help come up with a structure for your ideas, first let’s take a look at some structuring concepts, using some of the Tableau CRM apps as examples.

At the highest level, apps are structured around the people who are going to be using them and what they want to learn from the apps. Sales Analytics uses that kind of persona-driven approach and provides broad content to serve several types of users—sales leaders, managers, and reps.

A person-driven structure, showing Sales Leader, SAles Manager, and Sales Rep dashboards

Whether an app serves one or more types of users, it can use a task-driven structure, organized around what those users want to do. Service Analytics provides deep content to address the service manager. Its content is organized according to tasks: reviewing cases, measuring team performance, and analyzing channels and accounts.

A task driven structure, from the Service Analytics app.

With The Motivator, you’ve determined that there’s only one type of user, one persona, to support. Its sales manager audience wants to perform tasks like measuring top performers, and reviewing activities in sum (calls, emails, task, events) and by account. You can use a simple task-driven structure for its one dashboard, like this.

Motivator Structure
Measure top performers Review activity summaries Review activities by account
Leaderboard showing each rep’s activities Each type of activity—emails, calls, tasks, events—week by week Account details
Average activities as benchmark Activities rolled up under management level

Details for each activity
  • Inbound/outbound calls
  • Email priority
  • Complete/open events
  • Complete/open tasks

The chart shows a logical organization of the activity metrics according to the priorities you and the team determined. It can be used in the next phase of your work, that is, determining how to lay out the metrics in a dashboard.

From Structure to Layout

Once you know what kind of structure to use, you need to start thinking about how to lay out the features. You’ve got a lot of ideas about the features that can meet your audience’s needs. Now you need a concrete plan to express those ideas in a logical hierarchy. You need to organize the features into a smooth flow from general and/or most important to specific and/or of secondary importance.

At this stage, determine if you need one or many dashboards. Some apps require many, such as the default Sales and Service Analytics apps. Others call for only one or a few, such as Adoption and Financial Services Analytics. As we’ve seen, an app is defined by its purpose, not some quantity of assets.

As an example, have a look at the original plan for the hierarchy and flow of Sales Analytics.

The flow of the Sales Analytics app

It starts with the most general audience need: to see the big picture of sales performance. Then, it presents detailed views of that big picture according to a logical flow, starting with progress against quota—the sales team’s most important KPI. Clearly, the app needs multiple dashboards to express that flow.

You- make your own decisions about how many dashboards you need based on whatever best helps you tell your app’s story. Whatever you decide, you then need to determine the specifics of dashboard layout, whether it’s one or many dashboards. We look at doing that next.

Design Patterns for Dashboard Layout

Lots of others before you have had to think about how to express a content structure like the one you just came up with. Because of that, there are a few well-wrought page patterns you can think about to shortcut the process of coming up with a page layout for your dashboard. If your app involved more than one dashboard, each one of them can follow one of these patterns.

Many dashboards follow what’s called an F pattern, because it resembles the letter F. Using this layout, you can place a summary or highest-priority KPI in the left pane (the left side of the F). More granular metric visualizations are positioned to its right (the two horizontal strokes of the letter). More details appear further right and below. Typically, any changes the user makes to the summary, or the more granular visualizations, such as changing a filter selection, also filter the details (labeled Details and Actionable List in the image). In Tableau CRM, we call that faceting; changing a filter selection in one dashboard widget also changes the filter for any faceted widget in the dashboard.

An f layout design pattern showing components laid out in the shape of the letter f.

A Z pattern layout involves a top-down scan of the page. The summary information sits at the top of the page centered. Supporting visualizations are positioned below the summary and occupy the full width of the content area. Any faceting on the summary and visualization will filter the more detailed panes (in the image, Visualization, Details, and Actionable List).

A z layout design pattern showing components laid out in the shape of the letter z.

Another common layout: The side-by-side pattern, especially useful if you compare two metrics, since you can place them right next to each other. The user scans left to right and vice versa to compare metrics. Any faceting done separately on either visualization would filter the other visualization in the same way.

Side-by-side pattern, with components laid out  next to eachother.

What works best for The Motivator’s dashboard? You can rule out the side-by-side pattern, since you’re not comparing things. Maybe the Z pattern, but given everything you have to present, it can end up being a pretty long Z and force the user to scroll to get to important information.

Seems like the F can be the best pattern for you, albeit with some modification. You can put the leaderboard over to the left, and the top part of the F can show activity sums with activity-by-activity breakdowns just below that. Even further below can be the account detail list.

So you decide to give it a try. You’re not much of an artist, but you can draw boxes in the shape of an F and label them with your feature ideas. Here’s what you come up with.

A sketch of the structure of the Motivator dashboard

Great! You’ve structured your app. Now, it’s time to keep fixing The Motivator.

My Motivator Makeover, Step 2: Found in Space

When you last touched the dashboard, you fixed an obvious problem related to purpose. Next, fix an equally obvious one in its structure. Again, you’re not going to do everything to get its structure exactly right. You take a few steps in the right direction so you know what to do when it’s time to develop your own app.

You move the activity summary metrics from the bottom of the dashboard to the top, where it’s clear they belong. Once you do that, the top horizontal bar of the F layout is in place.

  1. Go to the My Motivator dashboard that you worked on in the previous unit.
  2. If the dashboard isn’t open in the dashboard designer, click the Edit button.
  3. From the widgets panel on the left, drag a Container ( Container widget icon on widget panel on left side of dsahboard) widget onto the dashboard canvas below the Total Activities metric. Screenshot showing container widget being dragged onto dashboard canvas TipTip Containers are great for keeping related widgets together when you move them. Use them liberally!                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
  4. Use the resize handles ( One of the boxes on the edges of the widget that you can drag to resize the widget) on the container to resize the container to the same length and width of the three metrics. Container widget on dashboard canvas Tip Tip If you ever lose sight of the container, click or hover over where you think it is and it reveals itself!                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
  5. Drag the Total Activities metric down into the container below it. Metric dragged down into container widget
  6. Repeat step 5 for the Overdue Activities and Completed Activities metrics. Now that all the metrics are in the container, move the container to move the widgets around at the same time.
  7. Hover over the edge of the container until your cursor changes to cross arrows, then click and hold. Screenshot showing metrics inside container, with cursor hovering over edge of container
  8. Press and hold Shift, and at the same time drag the container up to just below the filters. Screenshot showing three metrics at the top of the dashboard Tip Tip When you move a widget, hold Shift to automatically move other widgets out of the way. We call this reflowing.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
  9. Save your updated dashboard, and then preview it.

Much better, right? And pretty simple, too. But far from perfect: You notice that the summary KPI boxes aren’t the same size or color. You’re jumping ahead to the next part of the design process: surface polish. We’ll focus on that, the last part of the design process, in the next unit.

Keep learning for
Sign up for an account to continue.
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities