1. Introduction

We as Insane Lab’s had incredible opportunity to help our partners – LiveHelpNow! enhance their core business by developing brand new Android and iOS mobile applications to manage their customers business.

LiveHelpNow! is a leading vendor of real-time live chat services, a service that can be included on your website which:

• gives you possibility to invite and start a chat with your customer – and therefore increase your business conversion ratio
• track your visitors and give you important data – which can help understand and target your customers
• manage your operators – people who are in charge of conversations with your customers
• manage calls between your clients
• improve tickets process – customer can create tickets and your staff can quickly handle that with ease
• … and much much more!

As most of people transition from traditional computers to mobile devices we have done tremendous amount of work to make LiveHelpNow! customers life easier by providing completely native, fresh looking Android and iOS applications with usage of Xamarin platform.

2. Technical stack – Why Xamarin Native ?

We put strong emphasis on user experience which is why we decided to use Native Xamarin apps rather than Xamarin Forms. Using native Xamarin apps – it can not be not distinguish was the app written in Xamarin or in Java/Swift.

On the other hand – we were able to share 100% of business logic – and this was really a big deal!

LiveHelpNow! offers various API’s through HTTP’s RESTful service and real-time based chat sockets.
As LiveHelpNow! rely on high performance, scalable services that need to work under enormous load – they use Phoenix – Elixir crafted sockets.

Unfortunately – .NET did not have a good support of Phoenix based solution. Fortunately – LiveHelpNow! code ninjas provided us great .NET Standard compliant library – so called Fenix

Below we have presented the most important tools and services that we have used during development:

• MvvmCross with their plugins – core product framework that brings MVVM to Xamarin world. Thanks to MvvmCross we were able to share 100% business logic and a big part of User Interface code
• AutoFac – as we write code using SOLID principles this is ours Dependency Inversion container of choice
• Refit with our Refit.Insane.PowerPack – which allowed us to integrate REST API and all possible side effects in matter of days rather than weeks
• Fenix – responsible for communication with Phoenix based LiveHelpNow! real-time chat sockets
• OneSignal – handles our rich push notifications services
• DynamicData and RX framework – we pick programming styles according to problem. For real-time Chat and Lists we have chosen reactive programming approach – and treat data as observable streams
• AppCenter – there is no good product without smart issues tracking – AppCenter helps us to diagnose crashes and in-app errors. Using AppCenter we are often able to fix problems in minutes rather than days.
• Bitrise – impressive Continuous Integration platform of choice thanks to which we are able to automatically push new versions to our testers and store

3. Few words about User Experience

We decided to keep slightly different user interfaces for Android and iOS – to keep application consistent with mobile platform design guidelines.

We had to make sure following features are easily accessible:

• Visitors – access to current visitors, easy navigation to visitor chat and his details
• Callbacks – list of calls, easy way to manage call by operator
• Agents – access to operators and possibility to chat with agent
• FAQ – knowledge base of helpful articles
• Ability to check current operator status – and log out/log in to the system (so he/she can “notify” visitors/other agents when he/she is ready to help)

In the end we have implemented Navigation Drawer pattern known from material design for Android and bottom tabs pattern from iOS guideliness.

Both platforms have view specific features included in navigation bar – for ex. filter icon – so user can quickly choose appropriate filter.

Take a note we have created horizontal progress at top of each visitor view. Reason is simple – visitor list is something that quickly change, users enters and leaves website every second.

Even though we support Pull to Refresh gesture, we decided that Visitors should automatically refresh after each X seconds (which can be configured in settings). This indicate how much time left to refresh.

This is example of small addition that have big psychological impact – users gets sense of control – that they are always up to date.

We put strong emphasise on user experience to bring users working, easy to use product – not only good looking.

4. Project automation – why we have used Bitrise

Each of our product use continuous integration service – and LiveHelpNow! was not an exception!

To make more robust products and reduce costs we tend to automate everything we can.

BitRise automates our build system. We had regular contact and feedback loop with our partners from LiveHelpNow!
Therefore, we had to release frequently – in this case we have been implementing new features and hotfixes each day.

Unfortunately building optimised, cryptography signed release version of the app for iOS and Android takes about 30 minutes on brand new MacBook. Sending new version to testers/client or AppStore plus communication process takes on average another ten minutes.

If we had done this process manually this would result in ~40 minute of developer time wasted each day.  Taking in account that sometimes fail during build (developers are humans – they make mistakes 🙂 ) we would waste about hour daily.

Monthly that might cost our partners about 20-25 hours. Bitrise cost us 40 USD monthly – for two apps cheapest plan is sufficient. In 2019 developers cost is much much higher.

Another side effect of automating build process is that we could deliver hotfixes much more quickly. Developer does not need to go through build process manually – instead he just write fix, push commit and we are done!

Below, we have presented how our sample CI work-flow looks like for staging branch:

Our build steps setup proper signing keys/provisioning profiles, API keys for custom services, set proper bundle name/app version codes.
In the end, when app builds we upload executable (.IPA or .APK) to Bitrise and send changelog (merge commit message body) with installation link to our partner Slack channel.

This removes need of sending additional e-mails, communication with client.

In case of production build – we upload executable directly to Apple AppStore/Google PlayStore through our CI work-step.

Below, we have presented final results of merge commit to stage branch.

5. Future

We have implemented comprehensive solution for both major mobile platforms – iOS and Android.

We were able to share business logic including complex chat, Elixir based sockets solution.

Thanks to MvvmCross and Xamarin it was possible (and often even required by MvvmCross) to write clean, extendable and maintainable code.

Right now we are constantly observing logs from AppCenter, reviewing users opinions and suggestions which will result in even more app features and updates.

Give a try for LiveHelpNow! services for your online business and check it on Google Play for Android or Apple AppStore for iOS.