Reload & Pay bills
Project overview
Along with revamping the website, we also decided to give the bill payment flow a much-needed redesign. While paying a bill is a pretty straightforward task in most cases, that's not so at Dialog due to the complex nature of its products. Nonetheless, this was an important feature for us as well as for users, so it was essential that they could make payments with ease.
The project focused on three main use cases: postpaid payments; Mobile Hybrid payments, a unique Dialog product that is postpaid but lets users maintain prepaid services; and finally, multiple payments.
This project ran in parallel with the Dialog.lk revamp, and I was assigned as the sole designer. Since this was not only the most visited feature on the site but also the biggest revenue generator, it was crucial to get it right.
User testing
We decided to start the project with user testing. Due to the short timeline, we had to stick mostly to internal testing, with a range of users, from those who knew Dialog products well and used the online payment facilities, to those who were completely new to them and had never made an online payment before. These tests gave us plenty of insight into the struggles even veteran users were facing.
Some key issues we identified
- Users often got confused by the several types of payment available
- Users were forced to restart the journey if they mistakenly added the wrong service
- Users had to pay for each product separately, one at a time
Analytics
Once the user testing was done, we moved on to quantitative analysis. We used analytics tools such as Google Analytics to identify the drop-off rate at each step of the flow. To our surprise, the conversion rate of the journey was roughly 86% despite its many issues and complaints. This suggested that most users had simply gotten used to the flaws in the journey and were still able to make their payments.
We also looked at customer complaints related to website payments. As the user testing had shown, most of them came from users getting confused and ending up paying with the wrong payment type.
This was most prominent in the hybrid payment journeys, due to a combination of poor design and the confusing nature of the product.
User flow and conditions
Once we were done with the research phase, we started on the user flow. We mapped out all the possible scenarios first, then designed for the most used and most complex ones.
The user flows were pretty straightforward for other lines of business, such as Dialog TV & Home Broadband, as there was just bill payment. The most complex scenario was Hybrid Mobile connections, which allowed payment along with a prepaid recharge and a data card addition.
Wireframes
With the requirements confirmed and flows finalized, we began working on the wireframes. We designed for the most complex scenario, the Hybrid Mobile connection, and then stripped down the features for the simpler flows.
The focus of the wireframes was to make the interface as simple as possible, so apart from the most used functions, everything else was tucked away in pop-ups and accordions.
Prototyping
Even though wireframes are a good way to test viability, we decided to build complete prototypes in each iteration to give stakeholders and testers the full picture. With each version, we created multiple iterations and tested them with users to find flaws and improve on them.
