INTRODUCTION
THE BRIEF 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 visualization! Call history! Amount owed! Call to action to pay the bill
THE RESEARCH! & DEVELOPMENT 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 OLD WAYS‌ 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.
BUT IT CAN GET COMPLICATED 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. “Nothing is as easy as it looks.” Murphy’s Law Nº5
*
http://www.rcrwireless.com/20100830/opinion/readerforum/reader-forum-transparency-is-key-for-operators-8211avoiding-8220bill-shock-8221-gaining-trust-and-retaining-customers
THE PROCESS
THE BRANDING 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 PRODUCT To present the bill, I needed an example product, so I created a tariff plan combining voice, text, data and cloud service.
TARGET AUDIENCE 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 30s! open minded, creative, love music! financially independent but not too corporate,! know their way around with technology,! spend a lot of time online for both work and fun! etc.
THE DESIGN
SERVICE PORTAL LANDING PAGE LOGO WEBSITE MENU! labels appear on mouse over event
LOG IN AND! REGISTER FORM! service available to gaia subscribers only, account is linked to gaia mobile number
GREETING COMMUNICATION
FOOTER! BOTTOM NAVIGATION! links to other pages gaia website
information on! gaia apps for! mobile devices
PORTAL!
MAIN! PAGE One-pager that fits in all the tools needed to take full control of 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 signed! tariff plan, price, current debt! due 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!
HELP & SUPPORT 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.
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.