SaaS empowering financial inclusion and streamlining bill payments
Date
November 2022–December 2022
Client
Electrolite
Role
App design
Skills used
Figma ◦ Design systems ◦ Data visualization ◦ IBM Carbon ◦ Material Design
Problem
Developing nations need new models of financial inclusion and bills payment to efficiently supply electricity
Solution
Electrolite allows users to pay bills on the go without a bank account and track sales for decision-making
Research
Understanding the context from which users work (cultural probe) is essential to my design approach. I examined utilities provision in West Africa to establish the following:
I found videos of Sierra Leoneans standing in long lines to pay their bills, and testimonies of frustration with ever-changing tariffs
Growing adoption of mobile credit as an alternative to traditional banking to promote financial inclusion
The government recently outsourced development to private companies
Those companies need to scale supply to meet demand, and need reliable data for decision-making
A solution that streamlined utility payments and facilitated sales tracking is clearly necessary.
User groups
From the outset I defined three user groups' goals and pain points, and determined the necessary flows:
Technical users requiring comprehensive data control -> analytics dashboard, detailed reports, and employee management system
Merchants needing on-the-go payment solutions -> mobile point-of-sale (POS)
POS
User management
View sales and revenue
Export data
Create account
Merchant
✔︎
Business owner
✔︎
✔︎
✔︎
✔︎
Admin
✔︎
✔︎
✔︎
✔︎
✔︎
Architecture
Do to limited project scope, I conducted competitive audits and studied fintechs and e-commerce products (e.g., Zettle, Square, Payfirma, Paypal, Revolut, and Shopify).
In consultation with the product developer, I developed the following navigational architecture across mobile and desktop:
Dashboard for visual data analysis
Reports with tabular transaction data filtered according to user needs
User management to view and control employee profiles
Funds administration for loading credit into merchant accounts
Terminal (POS)
Design
Branding
I designed branding evoking electricity and modern applications:
Mono type in logo with a "charging" icon to fill one of the letters and anchor the brand
Complementary color scheme with teal as primary color and orange as the secondary color.
The programmer and I reviewed technically appropriate design systems, and selected IBM Carbon for its comprehensive data viz components.
Data visualization
Edward Tufte’s The Visual Display of Quantitative Information was essential in helping me plan the data viz for technical users, and consulted videos and articles for more contemporary guidance. I used the following principles:
Charts: Line charts for continuous data (trends over time) and bar charts for discrete data. (While Tufte is against the use of pie charts, the client insisted on them. Meanwhile, interactive design exposes quantities as a user hovers over the arcs, and the grand total can be included in the center of a donut chart.)
Maximizing the data-ink ratio: I removed non-essential ink to ensure that the visuals efficiently communicated the data. I also ensured consistency in presentation (e.g., no gridlines, currency symbols in axes only, remove .00 or express in K or M etc.).
Analytics: Custom and default time periods to compare and evaluate performance for decision making.
Advanced controls: Filter, order, search, and export options according to user needs.
Similarity: Group related metrics and cards (e.g. revenues and orders), use same visual for parallel graphs (e.g. daily value of orders, daily number of orders).
Hierarchy: Prioritize important metrics using visual hierarchy (e.g., revenue this month).
Prototype
Dashboard
Modular, customizable dashboard with data cards; date filters for custom analysis
Point-of-Sale (POS)
User-friendly form module with chips for ease of use on mobile
Reports
Tabular view with advanced filtering and sorting options
Reflections
While many admin console templates exist, they can only offer so much in terms of real-life usability. UX goes beyond UI by considering real user needs.
Designed UI and branding from scratch, prioritizing data clarity and advanced filtering for a complex user experience
Understood the importance of context for quantitative data analysis, and provided advanced controls to aid user decision-making
Mastered auto-layout and learned the foundations of UX/UI in a short amount of time
Would have liked more time and capacity to for usability testing and iteration
