Problem

Currently, NABU has its data sources in three different places - mySQL, excel spreadsheets for manual data, and google analytics. When they want to create a visualization dashboard for a partner, they create a new instance of Looker Studio. Additionally, they have no formalized way to collect manual data from country managers. 

Solution

We worked with NABU to build a centralized platform for creating visualizations on all their global literacy data to share with partners. NABU can create accounts for partners, create visualizations on relevant data, then assign partners to roles that can view the visualizations they create. This way, NABU and partners can easily view the data they want to see.

Design

The only users for the majority of the app are NABU admins. Only admins can approve/remove users, create/assign roles, and build visualizations. Because of this, our focus in design was to show as much relevant information on each page as possible so that admins can easily see and do what they want to. 

The visualization builder was incredibly challenging in both technical and design aspects. A lot of research and planning was done to determine the best flow and proper order for the steps in designing a visualization. It took many iterations to determine what was technically feasible and what made sense for a user.

Tech Stack

NABU is a full-stack project utilizing the T3 stack, consisting of React, Next.JS, Prisma, tRPC, and TailwindCSS. Data was stored on multiple different databases; NABU's internal data was split across Google Sheets, Google Analytics, and a MySQL database on AWS. We created another separate AWS MySQL database to store data associated with the app, such as users, roles, and visualizations. The app data database was accessed via the Prisma ORM, the NABU data database was accessed via custom SQL queries, and the Google sources were accessed using Google's own APIs.

Features

Users and Account Requests

This feature enables users to create and access accounts through a streamlined sign-in and sign-up process. When a new user signs up, their information is submitted as a request that administrators can review and approve before granting access. Additionally, the system provides a centralized table of existing users, allowing administrators to easily view and manage all registered accounts.

Roles and Visualization Access

This feature introduces role-based access control to manage user permissions within the system. Administrators have the ability to create and assign roles to users, ensuring that access is tailored to each individual’s responsibilities. Based on these roles, users are granted visibility into specific visualizations, allowing for controlled and secure access to relevant data while restricting unauthorized viewing.

Visualization Builder

This feature enables the system to integrate data from multiple sources, providing a flexible foundation for analysis. A built-in query builder allows users to construct SQL queries to retrieve the necessary data, simplifying access without requiring advanced technical expertise. Once retrieved, the data can be grouped and aggregated, allowing users to organize information and generate meaningful insights tailored to their needs.