FONIC: Development of a State-of-the-Art Online Customer Portal

When FONIC, a major German provider of discount mobile services, was looking to completely overhaul its customer portal, the company selected application development specialists inovex GmbH to handle the implementation. The portal, which was implemented using state-of-the-art technology, not only improves service for FONIC customers, but also increases customer conversion rates and creates savings for FONIC.

Fonic Logo

 

The market for user-friendly discount mobile service offerings has grown considerably over the past few years, and now makes up around a third of the total German mobile phone market. FONIC is among the largest of these “no-frills” providers in Germany. An increasingly high number of customers of the Munich-based O2 subsidiary interact with FONIC either exclusively or predominantly via the company’s web portal and mobile apps. There, customers can control everything from ordering and activating new SIM cards, managing their account details, and choosing plans right through to adding credits to their account. They also have around-the-clock access to their current usage and amount of data used.

Increasing Customer Expectations, Growing Requirements

In the heavily contested mobile telephony market, at-a-glance overviews of currently used service quotas and costs are, in addition to the portal’s other self-service features and customer actions, important arguments in FONIC’s favour. Missing or poorly implemented self-service functions can cause today’s customers to decide against choosing a particular provider. People’s expectations have grown, with mobile customers becoming more discerning and using their phones more all the time. This means that the online portal for FONIC –which was originally a traditional brick-and-mortar business – has continued to increase in significance. Technical robustness and availability, plus a high level of scalability and flexibility, are among the company’s primary IT requirements.

In 2012, FONIC’s IT experts were looking for a new partner to carry out a fundamental overhaul of the technology underlying their customer portal. “The scalability requirements increased; the old portal had reached its technical limits,” recalls Stefan Grüneis, Head of Discount Large Retail for Telefónica Germany: “We were on the lookout for a completely new, comprehensive solution which could, above all, also serve as a basis for future developments. We were looking for an IT partner with proven expertise and experience in developing web applications on this scale.”

When it came to creating their new portal, FONIC’s IT department had multiple essential requirements. These would ensure that the portal would be fit for the future, even taking into account its increased significance and access figures. The new application needed, for example, to ensure stable and transparent session management in order to minimise terminated orders and increase FONIC’s conversion rate. The maximum possible level of testability and comprehensive application monitoring were also important issues, as the company needed to monitor and resolve recurring problems in the operative system. 

The latency of the individual requests should also be optimized as customers increasingly access the FONIC portal via mobile devices.

There were also efficiency issues, with maintenance costs and time-to-market needing to be reduced. FONIC also needed to be able to implement changes (like launching new rate plans, for example) quickly and easily, and to plan release cycles effectively. This would be achieved through the creation of a clearly structured, manageable architecture, which would make day-to-day operations easier. The company also had two additional requirements of the new technology. Firstly, it needed to be rolled out across the various Telefónica Germany brands, which now include the discount mobile providers FONIC-Mobile, in addition to O2 and FONIC. This would provide considerable scope for IT synergies. Secondly, the application also needed to be expandable in order to take into account FONIC’s specific future plans. FONIC therefore needed a provider with experience in flexible, multi-brand development. In short, the company had a long list of requirements which placed high demands on its chosen technical collaboration partner.

A Future-Proof Portal and Apps for FONIC

FONIC commissioned inovex GmbH to carry out the complete IT technology relaunch of its customer portal. As a highly technical systems provider, inovex develops and optimises comprehensive web projects from an IT perspective. The company was, therefore, in a position to successfully implement all the project requirements. inovex’s Application Development experts worked with FONIC to analyse the business requirements, propose solutions, and create an entirely new application. This solution was based on the strict architectural separation of the various logical levels and the principle of test-driven development. In addition, inovex also integrated the new application into Telefónica Germany’s existing IT landscape. After the initial meeting in 2012 and the start of (backend) work in mid-2013, inovex deployed up to ten engineers at peak workload times. These engineers worked closely together with FONIC’s specialist team in order to ensure the successful launch of the new portal by the planned deadline in October 2013. The result is a new, stable, future-proof, scalable and multi-brand-capable application for FONIC and the corporation’s other brands. It makes changes easier to implement, minimises system crashes, and facilitates the optimisation of conversion rates. It enables events in the system to be more easily and effectively monitored, and has increased the potential for synergies. In addition, the entire environment is consistent, easy to test, and flexibly expandable. From a user’s perspective, the new solution is convincing. In an independent test carried out by connect, an industry magazine, the new portal was awarded the maximum number of points and an overall score of “very good”. 

“FONIC now has a future-proof and user-friendly customer portal. Not only does it fulfil all our current expectations, but it is also capable of handling future developments. The completely new monitoring dimension is particularly important to us, as it provides us with deep insights into our data. The work carried out by inovex Application Development is already paying off. As well as simplifying our operations, it allows us to quantify, evaluate and prioritise all the events in our system.”

Stefan Grüneis, Head of Discount Large Retail

In 2017, the iOS and Android apps from FONIC and FONIC mobile were also redeveloped by inovex. In agreement with FONIC, inovex created a new UX concept with the aim of offering the customer a completely new range of services on their smartphones.

The Technology Behind Complex Web Applications and Mobile Apps

For an increasing number of companies, their web portal or the app is much more than a brand advertisement. Instead, it’s an intrinsic part of their business model. For these companies, stable and secure operations are crucial. Customers now assume that technology will function smoothly, and user experience and functionality standards have been raised by the industry’s top US players. Customers now expect smaller, local companies to provide the levels of availability and usability they are used to elsewhere. At the same time, companies need to implement changes quickly and flexibly in order to react immediately to dynamic markets. As FONIC’s example shows, the IT supporting these two requirements is rapidly becoming increasingly complex.

inovex, as a modern project house, handles both the technical aspects of sophisticated web applications and mobile apps as well as their UI concept. Tobias Joch, Head of Application Development at inovex, says: “Only in the very rarest cases do web portals fail due to their interfaces. This is the area on which development tends to focus. For more complex web projects with heavier traffic, however, focusing on the interface is not enough. On one hand, the technology behind the interface needs to be in place. If it isn’t, customers will leave, or the application’s potential will remain untapped. On the other hand, the technology must also be integrated into the existing IT environment. In such cases, the requisite knowledge extends way beyond that required for standard e-commerce solutions.” Tobias Joch, Head of Application Development at inovex, says: „Complex web projects have to impress with a modern user interface as well as with a modern backend - otherwise customers will leave, or the application’s potential will remain untapped. Besides the technology behind the interface needs to be in place. If it isn’t, customers will leave, or the application’s potential will remain untapped. On the other hand, the technology must also be integrated into the existing IT environment. In such cases, the requisite knowledge extends way beyond that required for standard e-commerce solutions.”

Architecture as a Factor for Success: Separate Application Layers

inovex has identified a clear application design as one of the most important contributors to an IT project’s success, and the new FONIC application is based on a layered model. In creating the application, inovex separated the previously combined layers – the persistence layer, the business logic layer, and the presentation layer – and developed each one individually. This makes further development easier and future-proofs the application. In this way, for example, the application’s end customer interface (presentation layer) can quickly be made to react to current market conditions, expectations and trends. Underneath, however, the application’s business logic (which requires no modifications) remains completely unchanged. inovex also systematically separated the application’s business logic layer from the backend. The first phase of the project involved encapsulating communication with the backend. This laid the foundation for the clean separation of the application layers. Modelling (which included implementing functions like selecting rates, phone number retention, and credit balance functions, etc) was then carried out at the higher levels. Creating independent levels prevented unwanted interaction between them, thus improving the application’s testability, stability, expandability and flexibility. Development principles like DRY (Don’t Repeat Yourself) and Single Source of Truth prevented critical information from being distributed between different areas within the application.

This clear-cut architecture also makes it easier to reuse application components as required. The new portal and the apps are multi-brand-capable from the ground up. This means that multiple portals with very different graphical user interfaces, designs, and rate structures can access the same technology, leading to considerable savings in knowledge, money and time.

Independence as a Factor for Success / Polyglot Architecture

inovex considers itself a partner for IT departments and Internet companies. As such, its experts recommend and develop solutions manufacturer-independently, guided solely by the business requirements of their customers. In doing so, they work with a well-chosen toolbox and avoid the “golden hammer” principle of application development, in which a single, successfully deployed solution or piece of knowledge is implemented universally, despite the fact that it is neither the most appropriate, nor efficient, solution. inovex IT engineers are careful not to fall into this type of trap. Instead, they take a global perspective and pursue a “best of breed” approach to their projects, identifying the best possible solution for each situation. inovex prefers to deploy future-proof, open-source solutions wherever appropriate.

The differing requirements of the individual elements of an application often result in polyglot architectures. Depending on the project, therefore, inovex uses different languages for business logic (Java, with its high to full testability, strong typing, and optimum tool support for deployments, operations and libraries) and for frontend development (Ruby, with its proven toolset, rapid application development and concise syntax).

Methodology as a Factor for Success

Test-driven development

The new FONIC portal and apps have been developed based on the fundamental principles of best practice and follow the Test-Driven Development (TDD) design strategy. In this strategy of agile application development, the (at first necessarily failing) test is written before the application’s respective subcode, which then has to pass the test (and only this test) before moving on to the next part. This incremental approach, with its very small individual development cycles (unit tests and tested units), ensures that the entire application is properly thought through and developed from the ground up, consisting entirely of tested code, while minimising redundancy and focusing entirely on functionality. 

In this way, the quality-assured, stable application is created in an evolutionary process, which can also be fully tested as a whole later, because a relevant test suite "grows" together with the application (very high test coverage). Time previously invested in developer testing is saved in the subsequent testing of the finished application. These tests are also automated by inovex wherever possible. The great advantage of such a detailed, largely automated test suite is its long-term investment security: future changes can be implemented quickly without compromising the integrity of the whole application.

Technology as a Factor for Success

Example: Monitoring

The FONIC specialist department wanted their application to increase the transparency of the processes and events in their system. Although user behaviour was being analysed from a marketing standpoint, the company had insufficient insight into its IT environment. The application developed by inovex now provides consistent monitoring and early anomaly detection. Session management is transparent and traceable, and the visibility of all processes has been considerably increased. Thanks to the framework used by inovex (Netflix’s Hystrix), remote calls are automatically monitored and easily managed via a monitoring dashboard. This enabled FONIC’s IT team to see, for example, that certain backend calls were occurring too frequently during the new portal’s launch phase. This unwanted behaviour occurred only under real-life conditions, not during the previous load function testing. inovex’s design enabled them to remedy the problem immediately, without disrupting current operations. This is just one example of inovex’s expertise in leveraging intelligent digital innovations and making them work effectively for their customers.

inovex Focuses on Sustainability and Partnership

The partnership between FONIC and inovex continues. inovex also created the REST interface for the mobile FONIC app.

“We are very satisfied with our new, technically robust application, which has now been up and running for over five years – and the same applies to our partnership with inovex,” explains Stefan Grüneis.  “I’m particularly impressed with the level of expertise and passion shown by each and every inovex employee, and by the corporate culture which makes our collaboration so straightforward and productive.” In the end, though, it’s the measurable results which really determine the success of an IT project. Grüneis sums it up as follows: “Our new application enables FONIC to save money on every deployment.” Summary inovex developed and implemented the technical web portal infrastructure for FONIC, a German mobile telephony provider. This project required inovex engineers to create a completely new, technically robust, future-proof web application. The new FONIC application is based on the principles of layer separation, manufacturer independence, test-driven development, and consistent monitoring. The new customer portal is easier for FONIC to monitor, test and maintain, and its multi-brand-capable design means cost savings for its parent company, Telefónica Germany.

Summary

inovex developed and implemented the technical web portal and the mobile app infrastructure for FONIC, a German mobile telephony provider. This project required inovex engineers to create a completely new, technically robust, future-proof web application. The new FONIC application is based on the principles of layer separation, manufacturer independence, test-driven development, and consistent monitoring. The new customer portal is easier for FONIC to monitor, test and maintain, and its multi-brand-capable design means cost savings for its parent company, Telefónica Germany. The apps were natively developed for iOS and Android and are based on the REST API of the web portal.

Key Facts

  • New web portal and apps implementation
  • 10/2013 Smooth launch. FONIC and FONIC mobile portals launched.
  • 6/2017 Launch of new apps for FONIC and FONIC mobile
  • Increase in conversion rate
  • Latency optimisation for requests
  • Full stack test coverage from backend to user view
  • Multi-brand-capable application
  • Independently assessed, award-winning portal quality

       

Technology Stack

Infrastruktur:

  • Docker
  • GitLab CI, GitLab Runner for Continuous Integration
  • inovex Cloud Services

Frontend:

  • Ruby (JRuby), Sinatra,  from-scratch development of domain logic
  • HTML5, CSS3, SASS, VueJS, ES6, Jest, Webpack, BEM, Slim, Cypress
  • RSpec, Capybara, Poltergeist/PhantomJS

Apps:

  • Swift for iOS
  • Kotlin for Android
  • Continuous Integration ensures automatically tests and compiling the apps after a push in Git

Business Logic:

  • Java, Spring
  • JAX-WS, Hystrix
  • JUnit, Maven

Persistenz:

  • JPA, Spring Data
  • Hibernate

General:

  • Git, GitLab Issues
  • NewRelic Monitoring
  • In-house developed, automatic visual testing from an end-user perspective

Would you like a consultation on this subject?

Call us or send us an E-Mail. We look forward to advising you.


Tobias Joch

Get in touch!

Tobias Joch

Head of Application Development

inovex Blog

English Blog posts with technology focus

Read more

About us

Our Technology Partners

inovex cooperates with a range of selected technology partners to offer our customers genuine added value: Amazon Web Services, Cloudera, Confluent, Elastic, e-shelter, Hortonworks, MapR, Microsoft, Quobyte and SoftBank Robotics.

Read more