Analytics Overview: Page layout & KPI metrics (cards)

[JaanikaTalvistu]

AS AN analyst
I WANT the overview KPI cards to be understandable at a glance
SO THAT I get the high-level state of recent chat activity without reading every card

Under the analytics module, the Overview page needs a design update and the redesigned KPI cards per figma.

Acceptance criteria

• When testing check that layout, spacing and typography match the figma design.
• Date selection update:
  • Date can be adjusted on the top of the page.
  • Modifying the date will apply the date range to the entire page (applied to all the cards and graph).
  • Cards bottom text will apply the a similar date range but for the previous range (previous day, previous week or month).
• Cards layout include:
  • Metric title
  • Number in a larger size reflects the metric data based on date range
  • Bottom row reflects metric data for previous range
  • Row starts with a trend icon (descending or ascending)
  • A percentage is calculated like this: ((current metric result - previous metric result) / previous metric result ) x 100
  • A dot is set in between the next label
  • Label naming is dependent on the date button selection: Day, Week or Month
    • When day is selected then the label is named "Last day" / "Eelnev päev"
    • When week is selected then the label is named "Last week" / "Eelnev nädal"
    • When month is selected then the label is named "Last month" / "Eelnev kuu"
  • The number at the end will reflect the metric data for previous date range.
• Top right corner has a static button "Today" / "Täna". Clicking it will change the date for now and apply today's data.
• The layout will be the following:
  • Total number of chats / Vestluste koguarv
    • Calculation: Sum of total chats during specified time period
  • Average feedback rating / Tagasiside hinnang (figma is showing päeva keskmine which we will not use)
    • Calculation: AVG for rating (numerical value, not a percentage!)
  • Average waiting time / Keskmine ooteaeg
    • Calculation: Average waiting time from Bürokratt to CSA. When there are no CSAs used then 0 is shown.
  • Bürokratt answer rate / Bürokrati vastamiste protsent
    • Calculation: 100 - ((No CSA involved chats / Sum of total chats) * 100). Round to full number.
  • Customer support agent answer rate / Nõustaja vastamise protsent
    • Calculation: 100 - ((CSA involved chats / Sum of total chats) * 100). Round to full number.
  • Redirected to another CSA / Suunatud teisele nõustajale
    • Calculation: 100 - ((more than one CSAs involved chats / Sum of total CSA chats) * 100). Round to full number.
  • Customer left without an answer / Lahkus ilma vastuseta
    • Calculation: 100 - ((Customer left without an answer / Sum of total chats) * 100). Round to full number.
  • A graph will be in between (more about the details below)
  • Feedback rating / Tagasiside hinnangud
    • Score is basd on the sites scale (10 or 5)
    • Numbers are shown from top to bottom. Top being the largest number (either 10 or 5).
    • Scale bar next to the number shows as a progress bar. Total chats with feedback are represeted as grey and a color is the number of chats. For example, when a total of 100 chats have feedback and 50 them are 10 points, then visually the progress bar must correspond to fill the color half way (50%).
    • In 10 scale:
      • Green rating numbers are 10, 9
      • Yellow rating numbers are 8, 7
      • Red rating numbers are 6, 5, 4, 3, 2, 1, 0
    • In 5 scale:
      • Green rating numbers are 5, 4
      • Yellow rating numbers are 3
      • Red rating numbers are 2, 1
  • Response quality / Vastuste kvaliteet
    • A list of response quality
    • Up to 10 values
  • Themes / Valdkonnad
    • A list of response quality
    • Up to 10 values
  • A list of the after actions / Järeltegevuste nimekiri
    • A list of response quality
    • Up to 10 values

Graph acceptance criteria:

• The graph shows only a bar chart for total chats for the selected date range.
• The title of the graph is located on the top left "Total number of chats: date range" / "Vestluste koguarv: date range"
• The graphs legend is located on the top right and will be:
  • "Bürokratt answered" / "Bürokratt vastas" will be shown as blue.
  • "CSA answered" / "Nõustaja vastas" will be shown as green.
• The timeperiod will be more detailed and depending on the selected range:
  • Day will show the time steps in hours (starting from 00:00 to 23:59)
  • Week and month will show the steps in days.
• Each bar on the graph will show the total number of chats during that specific bar date range.

Reminders!

Reminder for SQL metrics criterias!

• SQL calls out created chats between specified time. Including the time marked on the datetime field (1st of Januarty includes data starting from 1st).
• Counted chats need to have an ENDED status.
• Only unique chats are counted.
• All CSA chats are counted as CSA chats, everything else (pending, failed, system etc where no CSA is present) would be listed as a Bürokratt chat.
• Chats marked as TEST are excluded.

Reminder about graph criterias!

• Graph does not show empty values such as "-" or such. Note! The number 0 is not an empty value in most cases unless specified!
• Graph counters scale as the values grow. Scale is rounded up to the tenth number (In case of 1 then 10 is shown, 49 shows 50, 132 shows 140 etc)
• If no data is present, the time period on the graph is still displayed as selected.
• The graph displays the start date on the left side of the graph.
• The graph displays the end date on the right side of the graph.

[JaanikaTalvistu]

For additional reading, link to designer ticket: #712