INTRODUCTION

Reimagine a cellphone bill and take it online. You can look at your existing phone bills for the content to use but this interface should at least include the following:

Minutes and data usage visualizationCall historyAmount owedCall to action to pay the bill

THE BRIEF

For the purpose of this exercise, I conducted a little research of my own, trying to get some insights from the real life.

There are many online sources [forums, blogs, social media] where people talk about their experience with telco companies and their product, both positive and negative.

That helped me come up with a few ideas on how to implement and perhaps improve, a simple and useful web interface for something as trivial as the phone bill.

THE RESEARCH& DEVELOPMENT

Even though most of the service providers have implemented an e-version of their phone bills and usually email them to their subscribers, most of the planet still receives a printed invoice sent via traditional post.

The actual process involves a lot of logistics [ procuring the paper, printing out the invoices, packaging, mailing etc ], it’s rather time / resource consuming, if you don’t use online banking services you have to go to the bank to make the payment etc. Not to mention it is rather not an environment friendly process.

THE OLD WAYS…

To make the situation even more messy, the end user is often confused by the amount of data that is printed on the invoice.

Also, it looks as though the transparency of the phone bill * is quite a hot topic on various forums and blogs.

http://www.rcrwireless.com/20100830/opinion/readerforum/reader-forum-transparency-is-key-for-operators-8211-avoiding-8220bill-shock-8221-gaining-trust-and-retaining-customers*

BUT IT CAN GET COMPLICATED

“Nothing is as easy as it looks.”

Murphy’s Law Nº5

THE PROCESS

In order to complete the task, I went a bit further than just designing an online phone bill.

First I needed an operator / brand in order to the a project some authenticity, so I came up with a name, designed a logo and to a certain extent, created the brand’s visual identity through a set of graphic elements, colors and typography.

THE BRANDING

To present the bill, I needed an example product, so I created a tariff plan combining voice, text, data and cloud service.

THE PRODUCT

To make the designs look and feel more realistic, I thought about who might be the target audience for the brand, or who is the brand communicating with.

It plays an important role in setting the look and feel, the art direction, the navigation and the way the way interface interacts with user.

I chose to build the story around my friends and colleagues, so the profile looks something like this:

people in their 20s, early 30sopen minded, creative, love musicfinancially independent but not too corporate,know their way around with technology,spend a lot of time online for both work and funetc.

TARGET AUDIENCE

THE DESIGN

SERVICE PORTAL LANDING PAGELOGO

LOG IN ANDREGISTER FORMservice available to

gaia subscribers only, account is linked to gaia mobile number

BOTTOM NAVIGATIONlinks to other pages gaia

website

WEBSITE MENUlabels appear on

mouse over event

GREETING COMMUNICATION

FOOTERinformation ongaia apps for

mobile devices

PORTALMAINPAGE

One-pager that fits in all the

tools needed to take full controlof your account.

THE USER PANNEL

Displays various user related infos:name and address,phone number,contract number and start date,what kind of contract was signedtariff plan, price, current debtdue date for the next billing

SERVICE USAGE CHART

Displays a set of charts that show monthly payments, services used more frequently compared to services used less frequently (on monthly basis), comparation of services usage on daily basis, etc.

This data then generates various tips and recommendations if there is a better tariff plan for his usage habits, or if there is a tariff plan add-on available that can save him money like extra data package, roaming calls, favorite number calls etc. instead of exceeding the price of the tariff plan for using more data than available in the current plan.

THE TARIFF PLAN PANNEL

Displays a list of services and the amounts provided by the tariff plan in comparison to the current usage status for each of the services, in real time.

HELP & SUPPORT PANNEL

Displays the links to the FAQ pages, starts a live chat with tech support, plays the explanation videos and links to PDF documents like contract, manuals, tutorials.

THE INVOICES PANNEL:

Displays a list of all invoices available, so far. Sorted by date, the list view displays as little information as possible, like invoice number, title and total price + view invoice and download buttons. The current, unpaid bill is highlighted on top. On the right side of the pannel, there are icons that show whether the bill was payed or not. If it’s not the case, there will be a button for online payment form and the payment deadline.

Online payments can be done using credit cards or other online payment services like PayPal or Skrill.

MAIN WEBSITE NAVIGATION

The five triangles and the square avatar would be the principal navigation links through the gaia main website, eg. links to the prepaid page, postpaid page, mobile devices available for purchase etc. SETTINGS

Buttons linking to the settings pages. The gear icon leads to the general account settings page. The dollar icon links to payment options page, where you can preset the credit card data for one click payment option, opt in email notifications about new invoices and payment deadlines, or switch on or off the autopay option so you don’t have to worry about forgetting to pay your phone bill.

INVOICE VIEWER

The full view invoice appears on the right side of the screen when view button is pushed. It displays the price breakdown and the total bill amount to be payed. Personalized promotions can be displayed if there is some blanc space left on the invoice. Again, there is a button leading to online payment form, but if the user decides to make a transaction offline in a bank or post office or using home banking, there is a link that leads to the help page with payment instructions.

The invoice can be printed out, downloaded or stored on another cloud service like BOX, GoogleDrive, DropBox…

User can quickly switch between the invoices by pushing left and righ keyboard buttons, escape button to close it or via hyperlinks.

ONLINE PAYMENT SYSTEM

Enter the credit card data, use already stored cards or pay through services like PayPal or Skrill.

MOBILE VERSION OF SERVICE PORTAL WEBSITE

Mobile version would more or less be a digest version of the desktop website with the core options like real time usage display, invoice viewer and an option to pay the bill online.