Mobile phone carrier upgraded its e-service system to make it more user-friendly and accessible. The goal is to let subscribers check their balance, update their packages and promotions anytime, anywhere, directly from the web.

Deliverables

We provided a style guide (HTML/CSS/JS) with all components (headings, lists, forms, tables, icon font, buttons, …) and widgets (tabs, countdowns, sliders, nested accordions, etc). We strived to keep the code clean and semantic and as reusable and scalable as possible.

We also delivered fully coded templates for the various modules required (direct pay bill, e-Invoice, register, my account, my payment, my package, special offers, pre-paid, post-paid, …).

All these templates were handed on a weekly schedule to be integrated by dtac’s developer. Because of tight time constraints, the developer was right in our footsteps, integrating the code as soon as the templates were validated.

Challenges

The layouts were already defined and approved when we got involved in the project, which made our role of converting them into responsive, mobile-friendly templates especially challenging.

We couldn’t go through an iterative process to define and test the building blocks of pages, and gradually move up to more complex components until the whole design system is defined (read Brad Frost’s excellent post on Atomic Design).

We had to make sure that all components would work well in Thai and English at all screen sizes. Content in Thai tends to be longer, and words aren’t separated by spaces, which makes for very long, unbreakable blocks of text.

Supporting older browsers (IE8 at first, then revised to include IE7) was also challenging, especially with lots of non-standard inputs. We used the devices at Bangkok Open Device Lab to test components and pages across a range of mobile devices and browsers.

Outcome

Despite the limited impact we had on the design, we managed to push for some changes that improved accessibility (such as the way tabular data is presented on smaller screens, simplifying pages to make them more focussed, or providing fallbacks for users without JavaScript support), and performance (use of native inputs, CSS-based animations, icon fonts).

It was a very interesting project that will hopefully open the doors to others where will be involved earlier in the design process.