Mobile payments: Admin panels

The Partner Panel is an administration application, mainly for creating and configuring the Services by merchants. Set of configurations assigned to one payment is called Service; i.e. the Service contains parameters and information regarding selling items, such as amount, price, targeted countries, and integration procedure.

Oh, panels, panels, panels... UI galore.

Oh, panels, panels, panels… UI galore.

Partner Panel offers a ton of other features, e.g. analytics, payment transactions history, customization options, API configurations, etc. Too many to list them all here, let alone explain.

Product designer's desk: detailed wireframe, sketches, concepts, mockups, and drafts.

Product designer’s desk: detailed wireframe, sketches, concepts, mockups, and drafts.

As always, I start my design process by collecting information, research, creating personas, sketching on paper, crafting detailed wireframes, followed by building hi-fi mockups, storyboards, and, developing an array of low and high fidelity prototypes. All that good stuff!

“A prototype is worth a thousand meetings.”―Mike Davidson.

One word: iconography.

One word: iconography.

For the front-end development we used a handful of frameworks and tools over time such as GWTPrimeFacesJSFGoogle ChartsHighcharts.

From mockups to real deal. Visualisation, analytics, statistics, tables, trees, dropdowns, input fields, buttons, menus, dialogs, dialogs in dialogs, dialogs in dialogs in dialogs... Damn!

From mockups to real deal. Visualisation, analytics, statistics, tables, trees, dropdowns, input fields, buttons, menus, dialogs, dialogs in dialogs, dialogs in dialogs in dialogs… Damn!

Please be easy on judging those funky gradients―that was fresh and cool back in the 2011. 😎

Btw, I did not forget to implement the details such as empty states, loading animations, custom captcha, etc. ;)

Btw, I did not forget to implement the details such as empty states, loading animations, custom captcha, etc. 😉

🎛 The Wizard for creating and editing Services

Wizard! The ♥ of the Partner panel.

Wizard! The ♥ of the Partner panel.

The heart of the Partner Panel is the Wizard. Damn complex section of the app for creating and configuring Services. It had a bunch of pages, lists, tables, menus, and literally tabs in tabs, and dialogs in dialogs. An interface and interactive nightmare, a huge design challenge. I designed it and redesigned it a dozen times to get it right.

Dialogs and tables inside the wizard.

Dialogs and tables inside the wizard.

Even tho I knew how to make it responsive; I’ve never got a chance to finish the job. I made drafts, mockups, storyboards and even implemented certain parts, but I was under pressure from stakeholders to work on other features.

Even tho I knew how to make it responsive, I was under the pressure from stakeholders to work on new features. I started working on it but I never had a chance to finish it. 🙁

Responsive dreams. My mockups and plans for upcoming fullscreen version of mighty wizard.

Responsive dreams. My mockups and plans for upcoming fullscreen version of mighty wizard.

🗄 Other panels

Alongside the Partner Panel, there are more panels for maintaining, operating and configuring the Centili system; such as Finance, Customer Care, Admin Panel, ¥Coins Panel, TrEng Panel and few internal utilities. To talk about these now is way beyond a scope of this case study even tho I designed them, so I’ll just attach a few screenshots and skip them altogether. Except ¥Coins Panel, which will be mentioned later.

💰 Finance Panel – application for housekeeping money related tasks used by merchants, resellers, and Centili itself.

Designed a bunch of stuff for this UI giant. Finance dialogs horizont, man.

Designed a bunch of stuff for this UI giant. Finance dialogs horizont, man.

💱 Admin Panel – application for managing localization and configuration of other Centili applications.

(*$ ▽ $*)

(*$ ▽ $*)

📜 Customer Care – providing purchase history for the end users.

(o_〇) Nemanja (-‿‿-) Dule

(o_〇) Nemanja (-‿‿-) Dule

Over time, the panels grew in all directions, feature by feature, option by option, table by table… Reinforced with new programmers Dule and Nemanja, front-end product development teams grew, too. Good people, good times! 🍻

Oh, this is the gang! New years party. ⌒(o^▽^o)ノ

Oh, this is the gang! New years party. ⌒(o^▽^o)ノ

🛠 Panel customizations

I’ve mentioned earlier that one of our selling points was the white labeling, i.e. rebranding, and showed how it works with the Payment Page. There’s full-screen customization dialog for Payment Page inside Wizard where merchants could customize the look and feel of it. Main options available for customization are the logo, dimensions, copy, content, code, colors… All those parameters, fields, and dropdowns could be saved as presets for later use on other services.

How I designed Wizard's mission control for visual appearance.

How I designed Wizard’s mission control for visual appearance.

Taking into account our resellers, we created and offered a way of customizing the panels as well. We provided a feature to resellers to be able to customize panels as merchants can customize Payment Pages. We made it pretty versatile: resellers could completely change the appearance of panels and match it with a Payment Page.

Rebranding designs of Partner panel and Payment Page.

Rebranding designs of Partner panel and Payment Page.

📊 Visualising revenue, traffic, transactions…

Designing charts, maps, graphs, diagrams...

Designing charts, maps, graphs, diagrams…


Partner Panel is processing a huge amount of transaction data which we visualized to help our merchants better understand what’s going on. And what’s the better way to present it than using cool looking maps, graphs, and charts!? So we did exactly that, adapted the HighCharts library to fit our visual design and showcased tons of information. 📊

⚠️ This page is part of a larger series of pages aimed at explaining the process of designing and developing mobile payment experiences. Learn more about “Mobile payments product design” here.

Download my resumeContact me

🚏 Next up → “Mobile payments: Old website”.


Mobile payments: Old website case study

Old website

I wanted to create a Centili website visually unique and suited to the audience we targeted. On the other side, decision makers were gravitating to already proven design of the holding company.

View case study

Mobile payments: ¥‎coins case study

¥‎coins digital wallet

The ¥Coins is a virtual currency that enables paying for digital content in Japan. ¥Coins are tokens redeemed with real money that allow users to buy virtual goods over the internet. They can buy tokens via direct mobile billing, and that will charge the user’s account.

View case study