Exercise project. Task: Translate the regular phone bill into a web interface with online payment option. Download complete presentation with explanations [format: Keynote] at http://bit.ly/online-bill-keynote

2. INTRODUCTION

3. 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 BRIEF

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

5. 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…

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

7. THE PROCESS

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

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

10. 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.
TARGET AUDIENCE

11. THE DESIGN

12. SERVICE PORTAL LANDING PAGE
LOGO
LOG IN AND
REGISTER FORM
service available to
gaia subscribers only,
account is linked to
gaia mobile number
BOTTOM NAVIGATION
links to other pages gaia
website
WEBSITE MENU
labels appear on
mouse over event
GREETING
COMMUNICATION
FOOTER
information on
gaia apps for
mobile devices

13. PORTAL
MAIN
PAGE
One-pager that fits
in all the
tools needed to
take full control
of your account.

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

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

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

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

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

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

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