1.0   2.0  

The making of the Beeline website My Account section layouts 2.0

Overview   Process  

After the first version of the My Account section was launched, Beeline has been collecting statistics and customer reviews. It turns out that one of the sections in most need of improvement is the Financial Information page. Making a list of required changes together with the client and getting to work.

Adding a table of charges and top ups, information about bonus account balances, an expense diagram with breakdown in categories, redesigning the operations filter.

beeline my2 process 01
beeline my2 process 02

After adding small changes, the client approves and implements the layouts. The interface is tested on real users.

Meanwhile the company introduces new services that should appear in the My Accounts section. Getting a list of requirements. The expenses table should reflect all charges, payments and totals for a chosen period on all accounts. Nesting levels should be implemented for expense categories. We also need to work on history of operations and the payment table. Making the changes.

beeline my2 process 03

Preparing a printed version of the detailed report and a letter template for mailings.

beeline my2 process 04

Printed versions of reports take time to be prepared. Working on the interface for ordering a report, notifications of its readiness, creating a dedicated Reports page.

beeline my2 process 05

Launching the Financial Information page on the live website. People start using it. Collecting data and examining the questions people most often address to customer support agents.

Users confuse between main and bonus accounts, sometimes fail to notice account top ups and charges. Breaking down charges and top ups into two columns in the table, adding plus and minus signs to make the difference more clear.

beeline my2 process 06

Introducing new expense categories, working on filters, changing the report export interface and making a lot of small fixes.

beeline my2 process 07

Adding a link to the online help service to the floating block to make it easily available in case clients have problems understanding their charges.

beeline my2 process 08

Thinking over and describing the block for reports subscription.

beeline my2 process 09

We get the idea to show a brief expenses diagram right on the main page. Deciding that it will replace the form for ordering reports on the receipt.

beeline my2 process 10

Getting an additional task from the client. Customers should be able to compare expenses for arbitrary periods. Drawing sketches. Comparing expenses by categories, visualizing the page, trying to use bubbles.

beeline my2 process 11

It comes out too complex and not user-friendly. Stopping our efforts and revisiting the problem with the client. Coming to a conclusion that it would be great not only to compare expenses for the last two months but also show trends (“During the last three months your spending on mobile data has been increasing”) and offer solutions (“We recommend switching to a plan with data allowance to start saving”). Realizing that instead of complex diagrams and comparisons it makes more sense to give simple personalized recommendations right in the My Account section. Writing down this idea to implement it in the next version.

Making changes to the PDF and Excel versions of reports. Adding missing expense categories and trying to integrate recommendations into printed reports.

beeline my2 process 12

Copying the functionality and styles of the new section into the Excel version of the report.

beeline my2 process 13

Simultaneously working on other pages of the My Account section. Showing progress bar with remaining minutes, messages, data and limits on the My Profile page to make keeping track of them easier.

beeline my2 process 14

The tests show that people not always understand what the numbers mean, what was spent and what’s remaining. Suggesting an alternative.

beeline my2 process 15

Every user of the My Account section receives lots of notifications, such as about other phone numbers they can add to their account, planned maintenance, changes to plans and services and other news. Coming up with a special page for all notifications.

beeline my2 process 16

Now we need and can recommend offers to a user based on their preferences. Adding recommendations to various pages of the My Accounts section.

beeline my2 process 17

Beeline also allows their clients to combine several numbers under one My Account page. Initially, those numbers had to be on the same contract. Adding a switch to the header.

beeline my2 process 18

Later the clients were allowed to add any number. Working on scenarios of adding and editing numbers.

beeline my2 process 19

Polishing the number selection mechanism.

beeline my2 process 20

Adding a profile completion indicator to the Preferences page.

beeline my2 process 21

Creating a form for contacting customer support and starting to work on the help section.

beeline my2 process 22

Drawing all states of the receipt on the main page.

beeline my2 process 23

While all the changes are being gradually introduced on the live website, we are starting to work on the third version of the section.

Order a design...