Mobile payment: Old website

Maja from marketing and I, as product designer, were on a quest to craft the Centili website. So I started by exploring ideas on how we should present our product in the best way. Together we researched our competitive landscape and conducted some internal surveys, collected a valuable info and some extra insights from holding company’s colleagues. Then, we brainstormed, discussed features, made sitemaps, user flows… I started my design process by drawing sketches, drafts, concepts, wireframes, and storyboards before creating mockups and rapid prototypes.

Making website 1.0. Sitemaps, user flows, drawings, icons, sketches, illustrations and first designs.

Making website 1.0. Sitemaps, user flows, drawings, icons, sketches, illustrations and first designs.

ℹ Grids are very important! Make sure to use the grid wherever you can and you’ll thank me later. Here I used simple 12 column grid with a small gutter of around 10% of col’s width. Bootstrap’s grid is a good start for wrapping your head around basic grids, and for more in depth view, take a look at Grid Systems in Graphic Design classic.

🎯 Ready, target, tailor!

I wanted to create a Centili website visually unique and tailored to the audience we targeted. On the other side, stakeholders were gravitating to already proven design of the holding company’s website. I understood why but that was not enough of a reason not to tailor our website to our users. The problem was that brand authority parent company’s website had didn’t play a significant role here because our holding company is in telecommunications and messaging business and we are in payment and gaming industry. Our website should have reflected that. Take Google and Android for example, or even better Coca-Cola and Fanta. Drastic difference between those websites.

I tried hard to explain my intentions and fought to defend my ideas. I tried to justify my reasons, but my idea almost entirely got rejected 😡. Moreover, that decision affected other parts of the design such as branding and product design. We basically tailored our designs to the users of our parent company’s products and services and not to our own!

First version of the website design.

First version of the website design.

Fast forward five years, my original idea is now fully applied 😸, and the final Centili website today doesn’t have any major connections to the parent’s company anymore. There’s no visual resemblance nor cross-referencing, whatsoever.

🤖 Payment page demonstration

Modal dialog on website with Payment Page demo.

Modal dialog on website with Payment Page demo.

One of the features we had from the first version of the website was the demo of our Payment Page, which was a real application with mocked-up data for demonstration purposes. We got the feedback that it was the most visited page on our website―evidently people wanted to experience what we had to offer first-hand.

ℹ️ Take a look at user onboarding on Centili website (ver 1.0) video, and Payment Page (ver 1.0) integration video tutorial from 2012.

📰 Blog & social networks

Our marketing team was reinforced by the new member Selena; they needed a CMS for the blog ASAP, so I created a new WordPress blog from the ground up.

First blog. ....φ(・∀・*)

First blog. ….φ(・∀・*)

Marketing team needed to share news and events over social networks with a correctly displayed image, title, and description. Therefore, I took care of that and enriched social network profiles with some swagger isometric-style illustrations.

Social network designs with illustrations of hands holding different devices.

Social network designs with illustrations of hands holding different devices.

We used Google Analytics for statistics and CrazyEgg for heat maps.

Website analytics. ヘ( ̄ω ̄ヘ) (〜 ̄▽ ̄)〜

Website analytics.

⚠️ 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: ¥‎coins”.


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

Mobile payments: Payment page case study

Payment page

The initial version of the Payment Page had a ton of UI elements crammed and bloated on one single page, and It was like everything was competing for attention. There was no focus! I removed unnecessary buttons and fields first; then I took more a step-by-step approach…

View case study