How did User Experience play a role in TEL3′s new responsive Web Design

Interface, Mobile, Social

When we decided to modify our web design for our homepage, we had three goals in mind. First goal was to improve the user experience for our visitors, so they can navigate the website easier and complete their task quicker. Second goal was to make all pages responsive so we can show consistent rich content to our users even when they switch devices. Over 40% of our users are using mobile phones or tablets to visit our website and this trend will continue in favor of the mobile devices. Third goal was to improve the SEO and increase our organic traffic with simpler layout and better optimization.

On this post, I’ll skip all the hard work we accomplished for contextual SEO part and only focus on the User Experience along with the design challenges. That whole SEO process alone is another subject matter for another post.

Why was the User Experience on top of the agenda? For many businesses, unless you have a patent that no one else does, User Experience is and will be the main driver of how companies perform compared to each other. Product advantages are diminishing since the technology is now available anywhere to anybody. At the same time, the great User Experience is becoming the top service/product differentiation. Forrester is tracking customer experience index (CEI) for a while now. Their research is showing a clear direct correlation of high CEI and high growth in revenues and profitability.

In 2015, the race from good to great CX will hit the gas pedal. Smart CX teams will increasingly use customer data from diverse sources like social listening platforms, campaign management platforms, mobile apps and loyalty programs — to personalize and tailor experiences in real time so that they inherently adapt to the needs, wants, and behaviors of individual customers.
Michael Gazala, Forrester


For our new web design, we started with research on different responsive frameworks. The two we liked were the Foundation framework and the Bootstrap by Twitter, which both are impressive. Our team, Rumen, our lead developer and Sophia, our designer, decided to build our website on Foundation since we had more flexibility to play with.

Once we reached an agreement on the framework, the next step was to research on the user experience. Although buying an international calling service is not a complicated sales process, we knew there were subtle improvements we could do by comparing our plans with our competitors.
I and Patrick, the marketing director, analyzed our customer persona studies, surveys, customer insights and web analytics to understand the user behavior better. Along with our own data, we also reviewed best practices, different design solutions and even user experiences on our competitor’s websites.

The focus was on identifying the goals we’d like to achieve with our new design, and the pain points of our users achieving their task when they visit our website. With the insights, we started building scent and device specific call to actions all over the website. Once the prototype was ready, we shared the pages with our sales and customer service team to get more feedback and insight.


We used the card design when designing our rates widget for couple reasons; first it helps organize a big chunk of data in neat form so users can scan them quicker. Second reason was the mobile friendliness of the design. You can swipe a card and compare different plans with one touch on a small screen.

TEL3 User Experiences Series from TEL3 on Vimeo.

The focal point on the homepage is a simple drop-down menu to ask the user where they call. When a user selects a destination, we reveal the rate, how much they would save comparing to our competitor, how many minutes they can talk for $10 and the available offer. This kind of progressive disclosure which requires a user interaction, helped us to keep the homepage clean but also rich at the same time.

Rates Widget

Progressive Disclosure

Since many of our competitors were adding extra fees to their services, just comparing rate alone is misleading. Hence we decided to improve our savings calculator, and tell a story with numbers on all the savings opportunities. We want our users to make an intelligent decision when they buy the service. Having said that, since we cannot offer the best value to all destinations, it is inevitable that some customers would see that they are better off with one of our competitors. Yet being transparent was an important strategic decision.

Savings Calculator widget

Savings Calculator widget

On the Savings Calculator page, we explained all aspects of the TEL3 value compared to our competitors. First one was the rate and the fees of course, but that was only half of the story. Second part included all the extra monetary benefits users can get by using the TEL3’s service; including the refer a friend bonus, rewards program for loyal customers and the mobile recharge coupons. All these benefits add value to the user’s bottom line and we wanted to clearly show how much.


Enabling easy social sharing was another important user experience factor on our new design. We knew great UX on social sharing consists of two steps.

Always make share buttons visible. The challenge was for the mobile view since the floating buttons on desktop view do not work for small screens. We reviewed a couple options then decided to use addthis plugin which offers a great user experience for any view.
Add social meta tags to your pages to show optimized visuals and relevant content when people share your page links on social media. You can easily combine twitter card tags with the facebook graph objects to create unique content for your web pages.

Social Micro Data Cards

Social Meta Tags

The end result was a success. The engagement and conversions improved on organic traffic for main pages by 40% and 30% respectively — compared to last six month’s averages. Yet, at the same time, we also identified that certain pages were getting better ranking by Google before our changes. So we still have a job to do to optimize our pages further and continue experimenting on how we can improve the user experience for the better.

We love happy customers and a happy Google after all…

Comments on this entry are closed.