Table of Contents
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.
ℹ 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!
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
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.
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.
⚠️ 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.
🚏 Next up → “Mobile payments: ¥coins”.
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.