---
title: Cognician Messaging System | Werner Vos
---

[Skip to main content](https://wernerrvos.co.za/cognician-report-builder#main)

Open main navigation

Close main navigation

- [Portfolio](https://wernerrvos.co.za)

[Portfolio](https://wernerrvos.co.za?hsLang=en)

# Cognician Report Builder

**JUL 2023 - AUG 2023**

Cognician had a few different proprietary reporting tools that we combined into one cohesive and easy-to-use experience.

## Introduction

Cognician had a few different reporting tools that were each developed at different times in the organizations history. Each of their experiences looked and behaved a bit differently and each one offered slightly different functionality.

Clients often wanted regular reports on engagement data and without any type of scheduling feature, Cognician Account Managers had to manually download large datasets and then extract the specific data that their clients requested.

---

## Goals

- Combine all reporting tools into one report builder
- Allow specifying particular data points for extraction
- Design and develop a scheduling feature that allows repeating the same database query at different intervals

---

## Design

By combining all our reporting tools, we knew we would be stuck with a large list of decision points. To make building reports as easy as possible we wanted to separate concerns into different steps, essentially creating a guided experience that could be saved as drafts for account managers to come back to.

Our frontend is used the [Bulma CSS framework](https://bulma.io/).

![wireframe1](https://wernerrvos.co.za/hs-fs/hubfs/Portfolio%20Entry%20-%20Cognician%20Reports%20Builder/wireframe1.png?width=2000&height=1144&name=wireframe1.png "wireframe1")

![wireframe2](https://wernerrvos.co.za/hs-fs/hubfs/Portfolio%20Entry%20-%20Cognician%20Reports%20Builder/wireframe2.jpg?width=2000&height=770&name=wireframe2.jpg "wireframe2")

## Data Configuration

Data engineers in collaboration with our CX lead prepared a breakdown of all datasets.

![mockup1](https://wernerrvos.co.za/hs-fs/hubfs/Portfolio%20Entry%20-%20Cognician%20Reports%20Builder/mockup1.png?width=2000&height=1797&name=mockup1.png "mockup1")

---

## Scheduling

The scheduling UI was loosely based on the Google Calendar UI.

![mockup2](https://wernerrvos.co.za/hs-fs/hubfs/Portfolio%20Entry%20-%20Cognician%20Reports%20Builder/mockup2.png?width=600&height=300&name=mockup2.png "mockup2")

---

## Final Result

Our frontend was used the [Bulma CSS framework](https://bulma.io/).

- ![All Reports](https://wernerrvos.co.za/hs-fs/hubfs/Portfolio%20Entry%20-%20Cognician%20Reports%20Builder/Mockups/All%20Reports.png?width=1440&height=1024&name=All%20Reports.png)
- ![Report Setup - Start](https://wernerrvos.co.za/hs-fs/hubfs/Portfolio%20Entry%20-%20Cognician%20Reports%20Builder/Mockups/Report%20Setup%20-%20Start.png?width=1440&height=1024&name=Report%20Setup%20-%20Start.png)
- ![Report Setup - Step 1](https://wernerrvos.co.za/hs-fs/hubfs/Portfolio%20Entry%20-%20Cognician%20Reports%20Builder/Mockups/Report%20Setup%20-%20Step%201.png?width=1440&height=1024&name=Report%20Setup%20-%20Step%201.png)
- ![Report Setup - Step 2](https://wernerrvos.co.za/hs-fs/hubfs/Portfolio%20Entry%20-%20Cognician%20Reports%20Builder/Mockups/Report%20Setup%20-%20Step%202.png?width=1440&height=1024&name=Report%20Setup%20-%20Step%202.png)
- ![Report Setup - Step 3](https://wernerrvos.co.za/hs-fs/hubfs/Portfolio%20Entry%20-%20Cognician%20Reports%20Builder/Mockups/Report%20Setup%20-%20Step%203.png?width=1440&height=1024&name=Report%20Setup%20-%20Step%203.png)
- ![Report Setup - Step 4](https://wernerrvos.co.za/hs-fs/hubfs/Portfolio%20Entry%20-%20Cognician%20Reports%20Builder/Mockups/Report%20Setup%20-%20Step%204.png?width=1440&height=1024&name=Report%20Setup%20-%20Step%204.png)