UI Design

This SOP serves as your guide to understanding the purpose of each system component, its intended use, and its significance, ensuring you’re not clicking around blindly. Understanding each section helps you move more efficiently, avoid mistakes, and maximize the benefits of the tools available to you.

Depending on your role, you may not see every section, and that’s intentional. You won’t have access to areas that aren’t relevant to your responsibilities. Don’t be alarmed if you don't have all the page tabs; that’s by design.

Here you’ve got a view of how it looks; this is the general layout. Each section has a purpose, and this SOP will walk you through what everything is, why it’s there, and how it helps you work smarter and faster.

Here, we have the “Admin(UI) 🤖”, which is for administrative use, and the “iDeal Ops Status 🔋”, which allows you to view the status of all the software components we use. If you want to learn more about it, please check this:

Check our Status

Let's continue to the bottom of this page.

You have all the page tabs organized into sections.

First of all, each of these sheet pages has already been explained individually. Now, we will focus on the design.

So first, we have the different page tabs. Let's start with Help Center and Links:

Remember, each of these sections has its own dedicated tutorial to help you learn how they work. If you’d like to refer to them, you can do so right here.

Help Center & Support Links Terms

As you can see, some tabs have a specific color and emoji.

The color you see at the bottom of each tab is blue 💙, indicating an input table where each responsible person fills in the data. The emojis help you identify which one it is.

Remember, the emoji conventions are as follows:

🤝 → The Client

🖥️ → Virtual Assistant

💼 → Manager

💸 → Sales Rep Each of these sections has its dedicated tutorial to help you learn how everything works. Check them out here:

Expenses Payments Marketing KPI Prospecting Calls_sales Actions

Next, you have the second group, which consists of dashboards. You can identify them by the green color 💚 at the bottom of each page tab.

Another way to recognize them is by the graph 📊 emoji.

📊 → Dashboard

As the name suggests, these are the dashboards where we can view the data more visually and intuitively.

Keeping that in mind, we can now go through the UI of the dashboards themselves. So, let’s begin.

Because all the dashboards follow a similar design, we’ve centralized the explanation here. For clarity, we’ll use the Calls Sales 💸 Dashboard as our example, since it contains one of the most complete and detailed graphs.

To begin, it’s essential to understand that the dashboard is primarily divided into three main sections, which are:

This section is dedicated to filters, which are essential to tailor the information to focus on specific details of the data that are most relevant to you.

This area has its dedicated section to help you make the most of the filters. You can refer to this page to learn how to use them like a pro and optimize your data analysis experience:

Filtering

Also, remember, the meaning of each term used in the filters is explained in detail here:

Filters

Depending on the filters you apply, the dashboard will display different data accordingly.

For demonstration purposes, I’ll apply one filter (Days Filter) so you can see how it works more clearly.

In this section, you’ll find elements such as:

The Donut Chart helps you visualize the data in a clear, circular format. It helps show proportions and how different segments contribute to the whole, making it easier to compare categories at a glance.

Helps us visualize key metrics at a glance. A scorecard chart is helpful because it highlights the most critical data points.

The Line Chart helps you track trends and changes in data over time. It’s beneficial for identifying patterns, spikes, or dips, providing a clear view of performance or activity progression.

The Column Chart displays data using vertical bars, making it easy to compare values across different categories. It helps show variations in data and highlight differences in performance, frequency, or totals across distinct groups.

In some cases, such as the Calls Sales, Projections, Calls CSM, and Prospecting dashboards, we include a Leaderboard to highlight top performers. This chart shows who is leading and achieving the best results with the client, for example, in Prospecting, who is scheduling the most calls, and in Call Sales, who is generating the most net revenue.

It’s essential to note that this graph is month-specific and resets at the beginning of each new month, offering a fresh view of current performance.

The filters directly affect this dynamic table, adjusting the data to display precisely what you’re looking for based on the filters you’ve applied. This allows you to view tailored information that aligns with your specific focus or criteria.

Here’s a look at it:

This also includes several sections, and it's essential to understand them. First, you have the Total Data section.

Let’s break down how to interpret this part. As you can see, the Total Data section is simply a summation of all the collected information. It excludes any percentages or processed metrics—this is just the raw total of all the numbers gathered, presented as it is without any additional calculations.

And then we have the second section, which is the Average Data.

This section presents the average values derived from the collected data. Unlike the Total Data section, which displays the overall sum, the Average Data helps you understand typical performance by calculating the mean across the selected entries, providing a clearer picture of what is standard or expected within the filtered scope.

Finally, we have a table that displays all the detailed information.

This section displays all the data entries in a structured format, allowing you to review each data point that contributes to the totals and averages. It helps dig deeper into the specifics and verify the numbers presented in the summary sections, which are displayed as Charts.

Now you are familiar with the user interface of the dashboards and their contents. In summary, these resources are designed to help you view relevant information for your business more clearly, essentially providing real-time business intelligence. Thank you for reading!

Understanding UI Design

TOP area

Bottom area

Input Tables

Dashboards

Dashboards UI Sections

Dashboards UI Design Walkthrough

1. Filters

2. Charts

a. Donut Chart

b. Scorecard Charts

c. Line Chart

d. Column Chart

e. Leaderboard

3. Dynamic Table