Smart Donation Hub

When: 🕒 Sept - Dec 2021

Find more out about - Tubular Systems Ltd.
Tubular Donation UI
Tubular Kiosk Design

About

The Smart Hub was a conceptual web dashboard designed to enable charities and non-profits to manage their donation systems.

I designed the Smart Hub in Adobe XD and then built the site using only ReactJS and SASS. Unfortunately, this project was never completed. You can view the project at this link. It features working charts using demo data and is fully mobile responsive.

The Tubular Donation Kiosks were offline machines, although the card readers had their own built-in SIM cards, which reported transactions and data to their proprietary dashboard (not developed by us). We wanted to create a more professional experience with our own dashboard and telemetry reporting. The Smart Hub was intended to be the go-to dashboard for our customers, allowing them to manage everything related to their machines.

Design Choices and Screenshots

I had to consider both small and large charities in my design approach, from a small community church vicar to a large charitable foundation that might support multiple causes.

Drawing on research gathered from trials and feedback, I ensured that each logical step was designed from the client’s perspective, making the interface not only appropriate but, more importantly, easy to use. I created a prototype flow with Adobe XD to demonstrate this, and I can provide the link if you would like to see it.

I chose a bright and colourful scheme to make the UI feel exciting and youthful. My aim was for the design to feel familiar and not overwhelming with statistics.

I designed the main home page to provide a concise overview of important information, striking a balance between a professional appearance and avoiding information overload. If customers needed more detailed reports, they could access dedicated pages for this purpose.