Dialog.lk Responsive Redesign: A Case Study
Sri Lankan corporations are not well known for having great websites. While they don’t hesitate to spend millions on advertising and marketing, funding seems to dry up when it comes to making their online presence elegant, fast and accessible.
That’s not the kind of company we saw in Dialog GSM in 2007, when they selected us to revamp their website. While the decision was eventually made at the CXO level, much of the initial drive came from Indi and Mili who saw the value of embracing the web and emerging social media. It was refreshing to see the company leadership being open to the suggestions of these young tech enthusiasts.
We created the design and front-end templates for Dialog, and their web team, led by Nazly, integrated them into . . . WordPress. Yes, even seven years ago Dialog was ahead of the curve. Change is never easy in such a large company, but despite the occasional hiccup, they were remarkably agile and nimble with the project. That 2008 design made a significant impact on Dialog online, and “inspired” website redesigns of some competitors as well.
Five years is a long time for a major website to go without any changes. By 2013, the cracks were beginning to show. When Dialog Axiata wanted to take the next step with their site, they chose us again as design partners.
This, however, was not your average redesign.
A Big Team for a Big Plan
Dialog had a thorough understanding of their customer base, and had several well-defined goals for the redesign. They wanted to make the website responsive and trilingual, with a mobile-first approach. They had more than 80 independent “web portals” that they wanted to consolidate under one main website. Finally, this site was to be powered by a significantly more powerful platform that could easily handle e-commerce in addition to content management.
In addition to multiple teams from Dialog, several other companies were brought in for research, design, development, content generation and translation, and quality assurance. To lead the project they had brought in Dave Baldwin as Head of Online at Dialog Axiata. Dave came with more than a decade of experience in telecom e-commerce, and was responsible for driving the transformation of Dialog’s online functionality into a full business channel as part of an overall multi-channel operation.
The first big project meeting happened in July 2013, with the aims of identifying the scope, requirements and project targets, defining teams and their responsibilities, and setting up a working model for the distributed team. The soft launch target was set to December 2013. Even as it was being set, I think many present at the meeting knew that the site would take a lot longer to materialize.
A novice asked the Master: “In the East, there is a great tree-structure that men call ‘Corporate Headquarters’. It is bloated out of shape with vice presidents and accountants. It issues a multitude of memos, each saying ‘Go Hence!’ or ‘Go Hither!’ and nobody knows what is meant. Every year new names are put onto the branches, but all to no avail. How can such an unnatural entity exist?”
The Master replied: “You perceive this immense structure and are disturbed that it has no rational purpose. Can you not take amusement from its endless gyrations? Do you not enjoy the untroubled ease of programming beneath its sheltering branches? Why are you bothered by its uselessness?”
— The Tao of Programming, Book 7: Corporate Wisdom
Information Architecture and Wireframes
The first step in the redesign process was figuring out the information architecture for the new site. This was the responsibility of the Celcom UX team. During the initial research phase they used Dialog web analytics data, stakeholder and customer interviews, and card-sorting exercises. Using this information, they came up with wireframes that outlined the site structure as well as layouts of key pages for the new site.
Responsiveness was considered a key requirement from the beginning, and each page came with a mobile UI wireframe as well. The Celcom team did a thorough job with the site’s information architecture, and provided us with very clear guidelines for the site design.
User Interface Design
Our work started in November 18, 2013, and our starting point was the set of wireframes developed by Celcom UX along with Dialog Axiata’s corporate identity guidelines.
We had a good understanding of Dialog from our previous work with them. However, since that time they had become a part of the Axiata team, leading to a change in branding and overall communication strategy. We studied their corporate identity guidelines quite closely to get a feel of how Dialog would want to be portrayed online.
One of my favourite elements in their branding was the Axiata “prism fabric,” a colourful graphic that was being used in their promotional materials and to create logos for their products and services.
This graphic became the inspiration for our first design proposal, which was an attempt at using Axiata’s primary and secondary colours along with intermittent bright splashes from the prism.
The website UI went through four design iterations based on feedback from our own team as well as Dialog. As soon as the final look and feel was nailed down for the home page and a generic internal page, we started work on the HTML templates. From then on, design and development work were done in parallel.
From Design Compositions to HTML Templates
Our front-end engineering team led by Amila handled the HTMLizing of designs. We adopted a 4-column grid layout for mobile, which expanded to a 12-column grid on the desktop. Bootstrap was used as the underlying framework. Progressive enhancements were suggested in the wireframes themselves, and we stayed close to those guidelines.
We used Less as the CSS preprocessor. Less extends CSS by adding features that allow variables, mixins, functions and many other techniques, allowing us to create stylesheets that are more maintainable, themeable and extendable. For example, variables.less defined all the colours we used in the design, making it really easy to make site-wide changes to the theme by simply editing one declaration.
Sublime Text is our editor of choice for front-end code, and we used Codekit to compile Less into CSS. Together they made template development fast and efficient. For testing the templates on multiple devices, we used Ghostlab.
Dialog had defined their i35 (now discontinued) as the baseline mobile device for the site. The templates were to be fully supported by the following web browsers, accounting for ~82% of total visits to the Dialog website at the time:
- Internet Explorer 9 and newer
- Firefox 12.0 and newer
- Chrome 20.0 and newer
- Opera 15 and newer
- Safari 4.0 and newer
- Opera Mini 5.0
- Android Browser 3.0
- Blackberry 10.0
We had partial support for Internet Explorer 8 (~4% of total visits), and the templates gracefully degraded for Internet Explorer 6 and 7 (~1% total visits). Internet Explorer 5.5 and older (0% visits), Nokia browser (~5% of total visits) and various other types of browsers (~7% of total visits) were not tested.
All this work had to be done remarkably fast: we delivered the 45 templates for the site in 4 batches, starting in January 2014. While the development team was busy integrating them into the content management system, Dialog used them separately to conduct usability testing of the new site.
These tests were both quantitative and qualitative. The respondents were pre-recruited and brought to central locations in Colombo, Kandy, Trincomalee and Jaffna for usability testing and feedback gathering. Based on these findings, the Celcom UX team refined their wireframes and made recommendations to change some layouts and design elements.
We incorporated these changes and managed to deliver all templates for the site by February 10, 2014.
Thus spake the Master Programmer:
“Let the programmers be many and the managers few — then all will be productive.”
— The Tao of Programming, Book 6: Management
Refining and Realigning the Design
Project requirements don’t stay static. A large-scale project like this, for a leading company in a dynamic industry, is bound to require realignment at some point. For Dialog, that realignment had to be done in November 2014, just slightly more than one month away from the planned launch in January 2015.
Thus, based on the feedback of key stakeholders, we made some important refinements to the site design. This, in turn, affected the work of the development team. It was a hectic time, to say the least. When the new dialog.lk was unveiled on January 10, 2015, it was this hastily updated—though no less functional—design that you saw.
Though it’s been six months since launch, Dialog is still working on adding new features and improving the overall user experience of their new site. We’re proud to support them as they continue to lead the telecom industry in research, development and technology innovation.
