Note: All names, emails, prices, and other values shown in the below designs are fictional or masked; and they do not represent Volt, their partners, other entities connected to Volt, or their customers.

Volt (textvolt.com) is an SMS solution bringing tools into the new space of Messaging Ops. The team and I determined there was a need for a new billing experience to replace the weekly inquiries customer success received about what they owed to Volt, why they owed it, and how it broke down. Large customers wanted to check in frequently, compare their history, and update their payment plan in one, easy-to-find place. Also, there wasn't a good way for customers to connect with Volt about changing their plan outside of sales channels via the homepage, and customers who may have been interested were lost in the funnel after creating an account without guidance or sales involved.
The timeline for developing billing was short, so we collected the customer comments and needs from the calls we'd had over the last six months. The initial lo-fi sketches were based on research into similar solutions across the web, including Telnyx. Before iterating, I developed a planning document to attempt to catch necessary interactions early. Several iterations in, the base layout came through and I continued into high fidelity.
The hi-fi designs let me explore what we were missing, establish a hierarchy, and clean up the experience. The components are a customized version of PrimeNG, using Figma's PrimeOne UI Kit. The billing landing page provides a quick preview of the user's account: what's due now, what's due next, their payment status, and their history with Volt. Additional screens include changing the user's plan, viewing the daily usage via a modal, and viewing a detailed breakdown of the charges that apply to their account. Certain pages were shown in an inactive format and all pages were annotated with internal notes. Each of these screens addressed Volt's customers' needs directly.
Low-Fidelity Designs & Planning
Lo-Fi Billing Landing Page
Lo-Fi Billing Landing Page
Lo-Fi Daily Usage Modal
Lo-Fi Daily Usage Modal
Planning document
Planning document
High-Fidelity Designs

Hi-Fi Billing Landing Page (Active)

Hi-Fi Change Plan Page (Active)
Hi-Fi Change Plan Page (Active)
Hi-Fi Daily SMS/MMS Modal (Active)
Hi-Fi Daily SMS/MMS Modal (Active)
Hi-Fi Charge Summary (Active)
Hi-Fi Charge Summary (Active)
Hi-Fi Billing Landing Page (Inactive)
Hi-Fi Billing Landing Page (Inactive)

You may also like

Back to Top