Appsolute Management Console

A Web-Based SaaS Dashboard That Helps Fintechs and Microfinance Banks Manage All Their Services in One Place.

Role
Product Designer
Type
Web Application
Platform
Desktop, Tablet, Mobile
Tools
Figma
Frames
43 Responsive Frames
Appsolute Management Console Dashboard

Project Overview

Appsolute is a fintech company that builds and manages mobile applications for microfinance banks, fintechs and corporations. This management console is an internal web dashboard where their clients can log in and manage everything from cloud hosting and SMS credits to subscriptions and payments all in one place.

What is the Appsolute Console?

It is an internal management portal that Appsolute built for their clients. When a microfinance bank or fintech company uses Appsolute's services, they get access to this dashboard where they can see the status of all their active services, renew subscriptions before they expire, top up SMS credits, track usage and manage payments without having to call or email anyone.

Why It Was Needed

Before this, clients had no central place to see what was expiring or what they owed. Things like cloud hosting renewals and SMS top-ups were handled manually which meant delays, confusion and potential service interruptions. The goal was to give clients full visibility and control through a clean self-service portal.

My Role

I was the Product Designer for this project. I designed the full web application from login through to each feature module, across three responsive breakpoints for desktop, tablet and mobile. I also designed all the empty states so the dashboard communicates clearly even for brand new clients who have not subscribed to anything yet.

Design Goals

What I was trying to achieve with every design decision in this project.

📊

Everything at a Glance

The dashboard needed to tell the client the most important things the moment they logged in. What is expiring, what is low, what needs attention. No digging around required.

🔄

Self-Service Without Support

Clients should be able to renew a subscription, top up SMS units or change their plan entirely without having to contact the Appsolute team. Everything should be doable from within the portal.

📱

Fully Responsive

This is a web app for business use but clients still need to check on things from their phone or tablet. Every single screen was designed for desktop, tablet and mobile.

🧭

Easy Navigation

The sidebar needed to be clear and organized. It can expand to show full labels or collapse to just icons. Getting to any section should never take more than one click from anywhere in the app.

⚠️

Proactive Alerts

The system should warn clients before things go wrong. Low SMS balance, subscription expiring soon, payment failed. All of these should surface as clear, visible alerts that are hard to miss.

📋

Clear Empty States

A new client who has not subscribed to anything yet should still have a good experience. Every empty state was designed with a clear message and a direct call to action to get started.

Design Process

I followed a structured process from understanding how Appsolute's services work to delivering a fully responsive design across all modules.

Design Process

The Challenge

Designing a B2B management console comes with its own set of problems:

  • Clients manage multiple services at once so there was a real risk of the dashboard becoming cluttered and overwhelming
  • Different services like cloud hosting, SMS and maintenance each have different subscription logic, billing cycles and management options
  • The sidebar navigation had to work well whether expanded with labels or collapsed to icons across all screen sizes
  • Empty states needed to be just as useful as the filled states for clients who are just getting started
  • Designing 43 responsive frames consistently across three breakpoints as a single designer
  • Data heavy screens like SMS analytics and subscription history needed to be readable and scannable at a glance

The Solution

Here is how I tackled each challenge:

  • Designed the dashboard with a clear visual hierarchy that surfaces the most urgent information first — subscriptions expiring soon and low balances appear at the top
  • Built each service module as its own self-contained section so cloud hosting, SMS and maintenance all feel consistent but have their own specific flows
  • Designed the sidebar with two clear states — expanded with full text labels and collapsed to icon-only mode — both work perfectly on all screen sizes
  • Every empty state has a descriptive message and a direct action button so new clients are never left staring at a blank page
  • Used green as the primary color with red for alerts and warnings to create a clear visual language for healthy vs at-risk states
  • Tables and charts use consistent formatting throughout so once a client understands one section, every other section feels familiar

User Personas

The two types of people who would be logging into this portal regularly.

👩‍💼

Chioma Okonkwo

Operations Manager at a Microfinance Bank
42 years old • Lagos

Motivations

  • Wants to make sure nothing expires or runs out without warning
  • Needs a quick way to check service status without calling the vendor
  • Wants to download invoices and payment receipts easily for accounting
  • Needs to justify renewals and top-ups to management with clear data

Behaviors

  • Logs in from her laptop at her desk most of the time
  • Checks the dashboard at the start of the week to see what needs attention
  • Uses the subscription history and payment records for monthly reporting
  • Occasionally checks on her phone when she is out of the office

Pain Points

  • Services have expired before because there was no system to track renewal dates
  • Had to call or email Appsolute every time she needed to renew or top up anything
  • SMS balance ran out mid-campaign because nobody noticed the low balance in time
  • Getting invoices for accounting required chasing the vendor team
"I just need to be able to log in and know at a glance that everything is running. If something is about to expire or run low, I want to see it immediately, not find out when something has already stopped working."
👨‍💻

Biodun Adeyemi

IT Manager at a Fintech Company
35 years old • Abuja

Motivations

  • Wants detailed data on SMS delivery rates and usage trends
  • Needs to monitor cloud hosting resources to know when to upgrade
  • Cares about having full control over auto-renewal settings
  • Wants to export usage reports for internal performance reviews

Behaviors

  • Uses the portal regularly from both desktop and tablet
  • Goes deep into analytics and usage history sections
  • Compares current and past subscription periods to spot trends
  • Manages the portal on behalf of multiple stakeholders in his company

Pain Points

  • Had no visibility into how much of their cloud storage and bandwidth was being used
  • Could not easily pull usage data for reports without requesting it from Appsolute
  • Wanted to set up auto-renewal but had no way to manage or verify it was enabled
  • Found it difficult to compare plan options side by side before making a decision
"The thing I needed most was visibility. I want to see the numbers, the trends and the usage data clearly. I should not have to ask anyone for a report when there is a dashboard right in front of me."

Empathy Mapping

Getting into the mindset of an operations manager who needs to keep all her services running without disruption.

Chioma, The Operations Manager

Understanding what she is dealing with when managing external services for her organization

👩‍💼

💬 Says

  • "When does our cloud hosting expire again?"
  • "Who do I contact to top up our SMS?"
  • "Why didn't we get a warning before this ran out?"
  • "I need that invoice for December for accounts"
  • "Can we see how much SMS we are using each month?"

💭 Thinks

  • I should not have to chase anyone to renew a subscription
  • If only I could see all of this in one place
  • What happens if we run out of SMS during a campaign?
  • I hope we are not paying for resources we are not using
  • There must be a better way to manage this

🏃 Does

  • Sets calendar reminders for subscription renewal dates
  • Emails the vendor team to request invoices and receipts
  • Checks SMS balance manually before running campaigns
  • Tracks service statuses in a spreadsheet as a workaround
  • Escalates service disruptions to management after the fact

❤️ Feels

  • Relieved when she can see everything is green and active
  • Stressed when a service is close to expiry with no clear renewal path
  • Frustrated by how manual the whole process has been
  • Confident when she has data to back up her decisions
  • Embarrassed when a service disruption catches her off guard

User Flow

How a client moves through the console from logging in to completing any task.

User Flow Appsolute Management Console

How the Console Works:

1. Login: Client logs in with their company email and password. Clean, focused screen with a remember me option and register link for new clients.

2. Dashboard: Shows cloud hosting status, maintenance service status, database size, SMS balance, USSD sessions, SMS and USSD usage charts, a subscription timeline and recent payments all in one view.

3. Subscription: Shows current cloud hosting and maintenance plans, a visual expiry timeline, billing summary and full payment history. Clients can renew, manage their current plan, and browse available plans with a side-by-side comparison table.

4. SMS Service: Shows current balance, quick stats, a 7-day usage bar chart and recent usage history. Clients can top up, view full usage history with filters, and view analytics including daily trend charts and delivery performance.

5. Notifications: Surfaces alerts for expiring services, successful payments, failed payments and low balances. Notifications can be filtered by category and marked as read individually or all at once.

Design System

A consistent visual language that makes a data-heavy dashboard feel clean and easy to read at any screen size.

Colors

Green is the brand color and signals active, healthy and positive states throughout the app. Red is used specifically for alerts, warnings, failures and anything that needs urgent attention.

#3C764C
Primary Green
Brand, Buttons, Active States
#28A532
Light Green
Success, Paid Status, Charts
#E0330C
Alert Red
Warnings, Failed Payments
#FFFFFF
White
Page Background, Cards
#282727
Dark Text
Body Text, Tables
#F1F8FF
Surface Grey
Cards, Modals

Typography

A clean Martel Sans font that makes tables, numbers and labels easy to read across desktop and smaller screen sizes.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ₦ % / GB TB
Regular 400
Semi-Bold 600
Bold 800

Large stat numbers like SMS balance and USSD sessions use Bold weight so they read instantly. Table body text uses Regular. Column headers use Semi-Bold. All monetary amounts display with the ₦ Naira symbol.

Key Features Designed

The main modules of the console and what makes each one useful.

Main Dashboard

The dashboard is designed to give clients a full picture of their services the moment they log in. At the top you see cloud hosting and maintenance subscription cards showing status, expiry date, days remaining and a direct renew button. Below that are stat cards for database size, SMS balance and USSD sessions. The page also has a 6-month SMS usage chart, a USSD activity chart, a full-year subscription timeline and a recent payments table. The empty state version is just as thoughtful with specific prompts and action buttons for every empty section.

Appsolute Dashboard

Subscription Management

The subscription section covers cloud hosting and maintenance. For each one clients can view their current plan, renew by selecting a duration of 1, 3, 6 or 12 months with live pricing, and manage their plan to view compute resources, storage and bandwidth usage. Clients can also change their plan, browse add-ons, set auto-renewal and cancel. The available plans page shows all tiers side by side with a feature comparison table at the bottom.

Subscription Management

SMS Service and Top-up

The SMS module starts with an overview showing available SMS units, this month's usage, a 7-day bar chart and a recent usage history table. A low balance alert banner appears automatically when units are running low. The top-up flow lets clients pick from preset packages or enter a custom number of SMS units. The analytics screen has a daily SMS usage trend chart, key metrics cards and a delivery performance breakdown.

SMS Service

Transactions and Notifications

The transactions section is a full paginated table of every payment made across all services. Each row shows the date, service name, amount, status and a view details link. Clients can download the table as PDF or image, sort by any column and open individual payment details with a full invoice breakdown. The notification system surfaces time-sensitive alerts for expiring subscriptions, payments and low balances.

Transactions and Notifications

Responsive Sidebar Navigation

The sidebar is one of the most important parts of the app because clients spend their whole session navigating through it. I designed two states — expanded with full text labels and collapsed to icon-only mode. Both states work cleanly at desktop, tablet and mobile breakpoints. The logout button sits at the very bottom of the sidebar so it is always accessible but never in the way.

Sidebar Navigation

UI Screens Showcase

The same four screens shown across all three responsive breakpoints — how the console adapts across every device a client might use.

🖥 Web View Desktop browser layout with expanded sidebar
Login Web
Login
Dashboard Web
Dashboard
Transactions Web
Transactions
Notifications Web
Notifications
📱 Tablet View Adapted layout for tablet screen sizes
Login Tablet
Login
Dashboard Tablet
Dashboard
Transactions Tablet
Transactions
Notifications Tablet
Notifications
📲 Phone View Mobile layout with collapsed sidebar
Login Phone
Login
Dashboard Phone
Dashboard
Transactions Phone
Transactions
Notifications Phone
Notifications

Project Outcomes

What this project delivered.

43
Responsive Frames
3
Screen Breakpoints
6
Feature Modules
100%
Empty States Covered

What I Learned

Designing this management console was a different kind of challenge from designing mobile apps. With a mobile app you are usually dealing with one task at a time and a focused, simple flow. With a web dashboard you are dealing with a lot of information across multiple sections and the challenge is making all of that data feel organized and not overwhelming.

The part that took the most thought was the dashboard itself. The key was deciding what to show first and making sure the most urgent things like expiring services and low balances were always visible at the top, not buried.

Designing the empty states was something I put real effort into on this project. Each empty section has its own message explaining what will appear there and a direct action button so the client knows exactly what to do.

Doing 43 frames across three responsive breakpoints also taught me a lot about building a proper component library before starting. Once I had set up the sidebar, cards and table components correctly, adapting them for tablet and mobile was much faster.

This project also showed me that I enjoy designing web applications. Dashboards, data tables, analytics, management flows. There is something satisfying about organizing complex information into something that feels intuitive and clean.

Want to Work Together?

Whether it is a web app, mobile app or product design, I would love to hear about your project.