BT Group - Business in a Box billing dashboard

Role: Lead UI Designer | Stakeholders: Product owner, UX researcher, content designer
Method: Agile sprint cycles | Principles: User-centered Design| Tools: Figma, usertesting.com

Overview

As the Lead UI Designer, I led the design of the Billing Dashboard within BT Business in a Box (BIAB) — a smart business dashboard for small business owners. The dashboard consolidates all digital tools and services into one platform, giving users an easy way to track and manage their business costs. My focus was on creating an intuitive, user-friendly experience that simplifies financial management, from reviewing invoices to forecasting future costs.

Problem Statement

Fragmented Billing Management: Users struggled with managing their business costs across multiple platforms.
Lack of Visibility: Financial data was not easily accessible, making it difficult for users to track, forecast, and manage their expenses.
User Experience Issues: Users needed a streamlined interface to handle subscriptions, payments, and refunds, with clear, actionable insights

Solution

Inline Tables for Data Presentation: I chose inline tables as the optimal format for displaying billing data and subscriptions, ensuring a clean, organized, and accessible view. This design decision also allowed for flexibility in responsive behaviour across devices.
Atomic Design with Arc UI System: I leveraged BT's Arc UI system, starting with atoms and building them into more complex molecules and organisms. This approach allowed for scalability, reusability, and consistency across the platform.
Self-Service Dispute Resolution: Based on user feedback, I designed a feature enabling users to raise and track disputes directly within the dashboard, eliminating the need for external communication with service providers.
Information Architecture: I crafted the IA to ensure seamless navigation, using established UX patterns that aligned with BT’s Phoenix Design System.

Handoff & Production Support

Design Documentation: I prepared comprehensive Figma files with interaction notes, accessibility guidelines, and responsive behaviors for all screen sizes.
Collaboration with Developers: I worked closely with developers to walk through user flows, clarify design intentions, and address any edge cases.
QA & Design Alignment: Actively participated in QA testing to resolve design discrepancies and ensure both visual and functional accuracy.
Post-Launch Support: Remained involved after the launch to maintain design consistency and assist with updates based on user feedback or new requirements.

Reflecting on Impact

The Dashboard design provided small business owners with an intuitive way to manage their business costs. Features like inline tables for easy data visualisation and self-service dispute resolution were well-received, offering users greater control and efficiency. The design, built on Arc UI and the Phoenix Design System, ensured consistency, scalability, and flexibility, creating a robust foundation for future iterations of the platform.

Key Takeaways

Designed a user-friendly billing dashboard that addressed key user needs and business requirements.
Ensured consistency and scalability using Arc UI and Phoenix Design System.
Enhanced user experience by introducing self-service dispute resolution and simplifying financial data presentation.
Maintained close collaboration with cross-functional teams to ensure seamless development and post-launch support.