Volt

Fall 2023 Client Project

Introduction

Volt is a software company that specializes in helping businesses manage their SMS (Short Message Service) infrastructure more effectively.

Specifically, Volt provides a platform that acts as a “wrapper” around multiple SMS SaaS (Software as a Service) platforms, such as Twilio.

This platform simplifies the process of accessing, managing, and analyzing SMS services from various providers within a unified interface.

Our goal was to develop a solution that helps Volt’s customers effectively visualize cost analytics and empower them to efficiently manage their SMS expenses and optimize their messaging strategies.

The Team

Timeframe

October 18, 2023 — December 4, 2023 (6 Weeks)

Tools

Frontend — React, Vite, Vike, Tailwind CSS, PrimeReact

Backend — Python, FastAPI, SQLModel, PostgreSQL

Software — Jira, Confluence, Git, Figma

The Project

During the six weeks of development, our team created a web dashboard that displays high-level user costs over a period of time. Additionally, we have also implemented deep-dive pages for each of the user’s customers, with breakdowns of their costs and the costs’ sources.

Design

Designers began by mapping out a user flow, highlighting any pain points a user may have, and prototyping a set of low-fidelity wireframes.

As our designers continued in their prototyping process, an strong effort was made to maintain a color-coordinated system between the different components of the dashboard page in regards to the user’s different customers. Monochromatic colors were also selected for visual clarity.

Within the deep-dive page, additional efforts were made to color-coordinate the company overview bar graph and the tables below in order help users identity which metric they are viewing.

Below shows the hi-fidelity prototypes for the dashboard and deep-dive pages respectively.

Development

The frontend of the application made heavy usage of the PrimeReact library. This proved to be quite an undertaking as the developers had to alter many built-in behaviors of the components in order to fit the designer’s prototypes. This was especially difficult for the bar chart on the dashboard page.

For the deep-dive page, developers were tasked with implementing a color-coded horizontal bar that breaks down selected month by cost type, a dropdown to select which company data is being displayed, and collapsible tables that show further cost breakdown by category.

The backend involved developers setting up a FastAPI server, creating the models that map relationships between different tables in the database, and establishing the CRUD routes the frontend will interface with.

Takeaways & Challenges

Due to the large codebase and working with a cross-functional team of developers, designers, and developers, proper communication with each other and the client through our Slack and having weekly meetings proved vital to project success.

Additionally, due to the limited timeframe of the project, we unfortunately had to descope and reduce the feature-set of the final deliverables. This required us to be agile and shift our priorities in a decisive and effective manner.

Lastly, for the developers, it was many of our first times working with new technologies such as Vite, PrimeReact, Tailwind, FastAPI, and more. Through the course of working on this project, we were able to develop an strong intuition of how to efficiently learn and apply on the go.