Mobile payments: Admin panels

Date: 2011

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

Panels, panels, panels...

Panels, panels, panels…

The 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.

Detailed wireframe, sketches, concepts, mockups, and drafts.

Detailed wireframe, sketches, concepts, mockups, and drafts.

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

ā€œA prototype is worth a thousand meetings.ā€ā€•Mike Davidson.

Moar sketches.

Moar sketches.

For the front-end development we used a handful of frameworks and tools over time such as GWT,Ā PrimeFaces,Ā JSF,Ā Google Charts,Ā Highcharts.

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 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. šŸ™

Partner panel wizard.

Partner panel 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 other 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, I’ll talk about it a bit later.

šŸ’°Ā Finance PanelĀ – application for housekeepingĀ money related tasks used by merchants, resellers, and Centili itself.

Finance

Finance

šŸ’±Ā Admin PanelĀ – application for managing localization and configuration of other Centili applications.

The Admin panel.

The Admin panel.

šŸ“œĀ Customer CareĀ – providing purchase history for the end users.

(ļ½_怇) Nemanja (-ā€æā€æ-) Dule

(ļ½_怇) 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 a full-screen customization dialog for Payment Page inside Wizard for merchants to customize the look and feel. Main options available for customization are the logo, dimensions, copy, content, code, colorsā€¦ All those parameters 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 them with a tool similar to merchant’s tool for customizing Payment Page. We made it pretty versatile: resellers could completely change the appearance of panels and match it with their Payment Page design.

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 used to process 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.

āš ļø 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