Redesign current website for Airtel Sri Lanka
Airtel Sri Lanka decided that they need to redesign their current website to match with the latest trends and standards in order to provide a better service to their customers. Airtel Sri Lanka's current website was designed and developed by a web design and development company in Sri Lanka in 2014, so as it is outdated they needed a new web design to up their standard.
I led this project, supported by my good friend Yasas Gunaratne(CEO of HasH33 Pte Ltd) to pitch the proposal to Airtel and also to conduct primary research.
This the process of how I identified both stakeholders' and end users' needs and expectations with my knowledge in Human Centered Design(HCD) and Design Thinking.
Qualitative Research
User Interviews
We had a very limited time period, so didn't had the leisure of time to run higher number of samples of user interview sessions. So we ended up interviewing 12 users from various categories. Later we used the same group of people to test our prototype which I created based on their feedback about the earlier version of the website.
Different types of users I interviewed for the initial research
Interviewing 3 segments of users (Existing, Dual Sim, Competitor) helped me to decide the basis for determining how the new homepage could deliver dynamic content to specific segments. Ideally this is the group of people Airtel wanted to focus on.
Stakeholder Interviews
Since this project would literally change the digital face of Airtel Sri Lanka, we interviewed the executives of leadership and product, marketing, sales, and customer support teams. Then I cross-referenced the results with feedback from user interviews at the end.
Some photos of interviewing stake holders and users.
Interview guideline created to print with questions structure and space to jot down the notes during the interviews. This acted as the backbone of the interview, but we didn't limit it only to the questions in it. We diverted and branched out from this to more details of a specific point from time to time with the 5 WHY method.
Approach
When I looked at Airtel's existing websites Google analytics, I have came to realise that almost 95% of the traffic is from mobile web users.
Existing Airtel Analytics
This made one thing clear to me, main part of my efforts should be put into creating a better experience for mobile browsing users.
So I decided "I am going to follow MOBILE FIRST strategy".
Mobile first strategy is a trend in website development where designing a website for mobile devices first and desktop second. With the mobile first strategy, a web designer will design the site within the given constraints of a mobile platform (small screen, slower processors) and then either copy or improve the site for desktop use.
Mobile first strategy also takes advantage of technology that is specific to mobile users (GPS, data-collecting, built-in cameras), to create features that are unavailable to desktop users. Mobile first strategy also focuses on giving mobile users what they want – fast loading webpages which take up little screen space and are low bandwidth
Colours and Photography
After looking at global Airtel Brand, it seems they're strictly avoiding any other colours out of the colour scheme below.
Every colour has its positive attributes and negative attributes. In design, I tried to eliminate the negative attributes in my design.
This is how I did it...
Newly designed pages with vibrant and colourful images.
Airtel Sri Lanka going to hire a photographer to shoot relevant images with the guidance I proposed.
Iconography
I used line icons (hallow) for any iconographic. This is due to
• Airtel India Branding
• Trendy and current
• Easy to be descriptive in smaller screen
Icons existing site vs new site
Interactions for targeted audiences
During the stakeholder interviews, I discovered the target audience for Airtel Sri Lanka is the young generation. To be specific, anyone from age 18 to 30.
Different age groups do have their own preferences on interacting with a web page or a mobile app. So it's vital for the Airtel to have a custom tailored customer interaction for their target age group.
Reduced pages / unnecessary gaps & spaces
Users at 18-24 prefer scrolling than clicks + Prefer Tabbed browsing
Existing website had many pages, splitting even relevant contents on different pages. I combined and grouped them into lesser number of pages. Yes, it did made some pages longer, but gave anchor links at the top to quickly navigate to the section they desired.
Using horizontal swipe gesture
Tinder changed industry with the swipe gesture. They literally taught the whole world what swiping left/right means. This interface choice is about as good as it gets — simple and easy to understand.
Using horizontal swipe gesture in mobile version of the site.
Cards and Swipe, enable users to accomplish that task in a quick, easy way. In this case, more options and comparing packages/rates cards.
Having presented packages/rates cards side by side, made easy for people to compare "Apple to Apple" type comparison.
Even I used swipe gesture for mobile layout, I changed this to a mouse click when it turn into desktop size layout. Because on computer, mouse click is easier to perform than swiping items.
How horizontal swipe gesture on mobile layout change to a mouse click when it gets to a desktop layout.
Activation using USSD/Call/SMS
One of the main complains I got from multiple stakeholders (sectional heads) in Airtel during the stakeholder interviews is that current Airtel site doesn't have any Value Added Services(VAS) activations while other telco's in Sri Lanka enabled activations of Value added services via their websites.
When I spoke with the Head of Technology, they mentioned they're currently in the process of building API's to expose those functions to website and to their selfcare mobile app, but its not ready and will not available for sometimes. So I had to think of alternative solution to facilitate this stakeholder requirement.
Eureka... Eureka... I found a way!
Remember that I mentioned that I am taking mobile first approach? I decided to capitalise devices existing capabilities. All these VAS already had different activation methods using Calls to certain numbers, SMS certain codes, Dialling certain USSD Codes.
Existing website just displayed those activation methods in pure text form. for example, it shows,
To activate ABC package, press *#456# and call.
So people had to read that, type on their phone and make a call or send a sms to activate those services. What I did was, when its on mobile layout, I took that code and change it to a Tel(href="tel") Link or SMS(href="sms") links on HTML and link it to a button.
How enable VAS activation using mobiles existing capabilities.
Remember what I mentioned above, that 95% of the users browsing via mobile? Now these users are able to perform any of this task with just a tap of a button. without going though hassle of looking at the code, and copying it and typing or dialling and\or any other similar procedures to get those services they require done.
Call to actions
One of the weaknesses I saw in existing site is, I find lots of dead ends with no proper calls to actions, even at home page banners did not had Call to actions(CTA) Its was more of an information site, without encouraging to perform a action. So what I did is to carefully choose and give the "NEXT STEP" to the user with lots of call to actions in almost all the pages.
Helping the selection
When showing multiple offers, then an emphasized product suggestion might be a good idea as some people need a little nudge. Psychology studies out there which suggest that the more choice there is, then lower the chances of a decision actually being made and acted upon. In order to combat such analysis paralysis, I tried emphasising and highlighting certain options above others.
I helped user to make a choice by allowing side by side comparison + recommending("popular" ribbon) instead of showing equal choices.
Simplified Contents
After all, its a content heavy site. But presenting it in the right way can the help user to have a better understanding. But existing site wasn't doing justice to that. There were lots of repetitions that I noticed, there were places where they explained the different packages yet they hadn't consolidated benefit numbers (eg: total data, instead of breaking it to many peaces). So I simplified the contents and made it easy to understand.
Simplified IDD Rates with prefixed codes.
Doing the maths for user. Showing consolidated package benefits instead of breaking into too many pieces.
Other changes
Other than the changes above, I made lots of other changes to make the experience better for users. let me list down some below
1) Language based on phone language
2) Using local Terminology (eg: using "Reload" instead of "Top up")
3) Giving priority to the most profitable/popular items(eg: Welcome tunes generate 30% of the VAS income, but it was hidden inside bunch of other VAS in existing site, but taking it out and giving priority to it.
4) Removing Ambiguity with getting rid of multiple Terms / Menus.
5) Get rid of term "GPRS"
6) 2 Way live chat at bottom.
7) Cookies based favourite tiles
And many more...
Validation through prototype testing...
Nothing is right, until it's accepted by the real user. So I ran a few rounds of prototype testings during the design process. when it's in early stages and when it's closing towards the end of it (before start converting mobile layouts to desktop layouts). To get this feedback from the real users, I created a InVision App prototype with hot links.
I love InVision App
Then I loaded this InVision prototype into Lookback to test with users
Recorded video session of Lookback.
This is another amazing tool I use. This allowed me to run my InVision prototype within lookback app to real users, when they use it, It records there facial interactions using the mobiles front camera, and showing me there current interaction/screen side by side.
Converting to Desktop Layouts
Upon testing mobile, I found few tweaks needed, and I changed those tweaks into mobile layout before I converted them into desktop layouts.
Project Handover
At the end of the project, I handed over the project to Airtel and its developers to continue. And agreed to review the development quality time to time till the project is completed.
Seems like you've reached the end 👏 Hope you enjoyed it
