Create a home

It’s time to get started, let’s create a home page.

What makes a home good?

The home is the first thing your user will see. Sometimes, it can also be the only thing they’ll have time to see.

Imagine your manager going into a meeting, and in the elevator he/she wants to see the latest numbers.

Think of the top indicators that will make your user a rock star in any situation.

Here are a few tips for you to keep in mind when building a home page:

  • Understand you user need before you start
  • A home page is not exhaustive, it can change and be updated
  • Choose meaningful indicators that tell a story
  • One indicator = one message
home

Step 1: Give your home a title

Give your home a title, let your user know what this is all about.

  • Are you doing some “Retail monitoring”, some “Brand management”?

.

✏️ Exercises

  • Give your app a title, let say “My Trial Scenario”

Step 2: Create a category

To be readable and understandable by all, your home page should be organized.

Use categories as a reading grid to help your user better navigate through all the indicators at his/her disposal.

.

✏️ Exercises

  • Create a category called “General Overview”

Step 3: Create a tile

What is a tile?

A tile is a small box containing data you want to display. See it as a mini viz/chart with limited options that will be displayed on the home page.

Tiles are not only figures, but can also be media or editorial content like text, images or videos.

Why limited options?

Several indicators are presented on the homepage. As a consequence, the homepage needs to be as clear and concise as possible to catch the user’s attention. Therefore, you cannot use regular charts here like you would in stories, which requires more space. We’ve crafted a set of small visualizations specially designed to be overseen and yet understood in a glimpse: we’ve called them tiles.

Tiles are a much more limited than regular charts, to make sure you keep your home as light as possible.

tiles

tiles

How to create a tile?

You create tiles in 2 steps:

  • Choosing data from the dataset editor
  • Configuring your tile’s parameters

Dataset editor

This is where you select the data you want to use in your tile. From this interface you can select a dataset from your available datasources.

  • 📝 I want to show the evolution of my revenue, what is the dataset containing this information?

Get a clear overview of your data and proceed to small adjustments to help your user understand what he/she’s looking at.

  • 📝 Is my revenue in $ or M$? Is it worst or better than last month?

From the interface, click on the column header to configure:

  • units
  • precision
  • sentiment/color coding
  • and much more…

Use the dataset viewer window to see live the results of your configuration.

💡 Did you know?

You can use Toucan Toco to adjust and enrich your data? Need to add calculations to your existing dataset? Want to add evolution to a specific metric? Merge datasources? 📖 Check out the data section of our documentation.

But just so you know, this is not available from the Trial Scenario 🙂

.

Tile parameters

This is where you chose which chart you want to use. Start by selecting a type of tile from the dropdown menu

Then follow the placeholders to enter charts parameters. Don’t forget to use the preview window to check your changes live.

tiles menu

tiles menu

Mandatory parameters

These are parameters required for the chart to show up.

  • For example, you can not create a chart without a value column. value is the column containing the data.
  • The line tile will not show up without a date parameter
Optional parameters

These are, well, optional parameters you can configure to enhance your chart.

  • For example, in the leaderboard I can choose to sort my bars

📖 Go further and learn More about all tiles options from the reference once you’re done with this Trial!

Let’s create some tiles

Let’s create 3 tiles together that you’ll be able to customize with your own data later on.

Create a trend tile

✏️ Exercises

  • Click on Add a tile

After clicking on Pick some data select the tile-trend dataset.

Then go to the Tile’s parameters to configure a line tile (select line from the dropdown menu)

  • Add a title like “Revenue Trend” for example
  • Do not touche the dataset: my_dataset parameters. This is how the chart knows which data to use
  • For value, select the column of the dataset containing the line value; value
  • For date, select the column of the dataset containing the line dates; label
  • Check out the preview and Save when you’re done!

It should look like this:

tile line

tile line

Create a video tile

✏️ Exercises

  • Click on Add a tile

No need for a dataset to build this type of tile, go directly to the Tile’s parameters.

  • Select a video tile from the dropdown menu
  • Choose Youtube as a video provider
  • Copy paste this video id to add a nice Toucan video to your app: fM6356ZAdM4. Note that the id of a video can be found in the video’s url, right after the equal sign: https://www.youtube.com/watch?v=fM6356ZAdM4
  • Check out the preview and Save when you’re done!

It should look like this:

tile video

tile video

Create a text tile

✏️ Exercises

  • Click on Add a tile.

No need for a dataset to build this type of tile, go directly to the Tile’s parameters.

  • Select a text tile from the dropdown menu
  • Add a title like “Monthly newsletter” for example
  • Add a text to display, something like this for example: “This can be a lovely newsletter written by your team! Amazing!”
  • Check out the preview and Save when you’re done!

It should look like this:

tile text

tile text

So far, your home should look like below.

trial home

✏️ Exercises

  • Take a minute to congratulate yourself
  • Move on to the next section: Create a story!

Keep the good work!