Volt

Introduction

Volt is a B2B (Business to Business) software startup that helps businesses manage their SMS (Short Message Service) infrastructure by providing a ‘wrapper’ around multiple SMS SaaS platforms, such as Twilio.

Although the Volt web platform offers a comprehensive feature set, our client wanted a more streamlined mobile interface with only the essential features from Volt’s API for messaging activities.

Our team was tasked with building an open-source mobile application demonstrating Volt’s APIs, enabling customers, business owners, and developers to explore and test Volt’s services on the go.

During our project, we collaborated closely with Cody Crow, head of the Engineering team at Volt.

The Team -

Timeframe

Jan — Jun 2024 | 16 weeks

Tools

Design — Figma, Tamagui

Development — React Native, TypeScript, Express, Firebase, GraphQL

Maintenance — Jira, Notion, Slack, Github

The Project

Design

Identifying Key Features & Lo-Fidelity Sketches

To begin, we utilized the MoSCoW method to sort the various features from Volt’s API into 4 categories: Must Have, Should Have, Could Have, and Would Have.

After considering various factors including user needs, time constraints, integration difficulty, and the number of developers available, we decided to include (1) Contact Creation, (2) List Creation — groups of contacts, (3) 1:1 messaging, and (4) Waves — one-time SMS blasts to a selected list, as we believed these features would be most beneficial for users.

We each crafted sketches, making sure to incorporate common design patterns for intuitive usability. Once our client approved our concepts, we transitioned to mid-fidelity prototyping on Figma.

Mid-Fidelity Wireframes & Usability Testing

Using Figma, we built the four main features identified in User Research in a mid-fidelity prototype, then moved to user testing to identify pain points early in the process. We conducted task-based usability tests with five users to gain comprehensive insights. Major changes included labeling our navigation icons for clarity, renaming “Waves” to “Pushes,” as we believed this better represented the feature, and reworking the flow of Scheduling Messages to improve the user experience.

Hi-Fidelity Wireframes & Design System

To speed up the development process, we elected to use Tamagui pre-built UI components as they meshed well with Volt’s existing design elements. We experimented with the component library and made our own modifications to optimize each flow, modernizing some of the features to make the UI look cleaner, while keeping our designs consistent with Volt’s existing design system. Finally, we standardized our designs using an 8-column grid system and incorporated Volt’s signature yellow and Poppins font to complete the look.

Development

Login and Setup

The first functionality to build out was the login and setup page. The frontend begins by using Firebase Authentication to authenticate the user, returning user data including the phone number. This phone number is then stored in the application state. To retrieve the user’s inbox, a request is sent to the backend, which queries the inbox using the stored phone number. Upon receiving the inbox data, it is stored in the state and displayed to the user, ensuring real-time updates.

The backend processes the request from the frontend by querying the inbox with the provided phone number and then returning the data. Firebase Authentication plays a crucial role by returning user information on success. Firebase handles the inbox query based on the phone number and provides the corresponding data. A diagram illustrating the overarching process is below.

Sending Messages

Another key part of the app was being able to send messages. When sending messages, the frontend queries the message API route with parameters such as the recipient’s phone number, sender’s phone number, message body, and any media attachments. It then waits for the message status to be returned, updating the interface with the new message upon successful delivery.

The backend handles the message query and forwards it to Firebase. Upon successful message delivery, the backend updates the Firebase conversation collection with relevant details, including the message ID from the Volt API. Firebase processes the message query, returns a message object, and updates the conversation collection accordingly. The Volt API is responsible for delivering the message and returning a message object, which is then integrated into the Firebase conversation collection. A diagram illustrating the overarching process is below.

Pros and Modularity

This method offers several advantages. By leveraging Firebase Authentication, we ensure secure and reliable authentication, which is crucial for protecting user data. The separation of concerns between the frontend and backend enhances maintainability, making the system easier to manage and debug. Each component in the architecture, such as Firebase Authentication, the backend server, and the Volt API, has a distinct role, ensuring that changes in one component have minimal impact on others.

Modularity is a significant strength of this approach. The architecture allows for each module to be developed, tested, and maintained independently. For instance, the authentication process can be updated without affecting the message sending logic. This modularity also facilitates scalability, as new features or services can be added to the system with minimal disruption. For example, if we decide to integrate additional messaging protocols or enhance the data processing capabilities, these can be incorporated as separate modules without overhauling the entire system.

Furthermore, using standard APIs for communication between the frontend and backend ensures that the system remains flexible and adaptable to future requirements. The reliance on established tools like Firebase and the Volt API also means that the project benefits from the robustness and scalability of these platforms, reducing the need for extensive custom development and allowing the team to focus on core functionalities and user experience improvements.

Takeaways & Challenges

One key skill this project taught each and every one of us was the power of cross functional teamwork. Prior to this CodeLab project, a majority of us worked in uni-dimensional teams — developers worked with other developers and designers worked with other designers. Now we were forced to adapt to a cross functional team structure which included a project manager, multiple developers, multiple designers, and mentors. Most importantly, we all had to coexist in order for our project to end up successful. Initially, we were all getting used to this new format. We might have missed a couple Jira tickets assigned by our project manager (Sorry, Jerry). Slowly but surely, throughout the course of the 16 weeks we worked on this project we started to get the hang of it. Everyone knew their specific role and this cross functional method of working proved to be extremely efficient. By the end, we mastered things like making pull requests, resolving merge conflicts, and create mockup designs. None of this project would be possible without a cross functional effort.

During the project, we had one meeting on Sunday for two hours (not counting the general meeting on Monday) and were expected to work asynchronously for the rest of the week. We were on track to finish on time at the beginning, but momentum started to slow down as a lot of the developers’ work involved meeting up face-to-face to discuss and integrate code. As a result, we had some long hackathon-esque work sessions nearing the end of the project. However, we soon realized that this was not sustainable either, because time was not being utilized efficiently due to people burning out fast during such long hours and then wasting the rest of the time. After this experience, a key takeaway is to have more shorter-length work sessions during the week, such as two to three 1–2 hour work sessions.

We’d like to thank Cody for guiding us throughout the process. We’d like to thank our PM, development, design team, and CodeLab for bringing us together for this project.