Offline first approach to e-commerce

Date posted
30 November 2015
Reading time
8 Minutes
Alex Turnbull

Offline first approach to e-commerce

Last week myself and another Kainos employee, Matthew Fitch, attended the first #EcomHackBelfast ran by Chain Reaction Technology the technology department of Chain Reaction Cycles. This was a two-day hackathon that was based around coming up with and building ideas around e-commerce. Before the hackathon we decided on a number of ideas including:
  • VR for viewing different bikes and accessories to give the customer a more personal and immersive experience when shopping.
  • Using beacon technology with an associated mobile app to allow users to interact with in store products and get more information, reviews and alternatives.
However, after many hours of deliberating on these ideas we both had a eureka moment and realised the answer was obvious! thinking-light-bulb-clip-art-sketch-idea (1) Having both worked in the Kainos R&D team on innovative and exciting proof of concepts for the different use cases of offline web we thought could we not create an offline web e-commerce store? The answer was of course yes. One of the biggest problem that any web application faces is performance. This is especially true when it comes to e-commerce. Customers want the fastest possible experience and one of the statistics we found when researching this was;

Slow-loading websites cost retailers £1.73bn in lost sales each year.

So how can providing an offline first approach help this? It's simple. Instead of making the perilous journey across the internet every time we can go to our cached content first. This means we can put content on the screen straight away. In the background we can fetch any fresh content and update the user interface appropriately. This approach slashes load time dramatically. Another problem that is particularly relevant to ecommerce applications is;

88% of online consumers are less likely to return to a site after a bad experience.

So how does our offline approach create a better user experience? Well, first and foremost, the performance gains we already discussed provide a great experience for the user. However, there are other ways that the offline first approach provides a better experience for the user;
  • No data loss users trust our app far more.
  • Consistent experience not dependant on network.
Once we had done some planning on the app we started by creating a simple user interface that worked offline. For this we used service worker. Service is one of the latest HTML5 technologies that allows you to store HTML pages, JavaScript and other content for offline use. You can also think of it as a client side proxy that can reroute requests and respond with whatever you want. It's very powerful. Once we had our app working offline we started working with API that was provided at the hackathon. On the first load of the application we used service worker to download everything from the API in the background thus not affecting the user's experience and store it locally using IndexedDB a NoSQL database in the browser. After applying some styling the solution at the end of day one looked something like this.
Screenshot_2015-11-29-20-23-41 Screenshot_2015-11-29-20-23-44 Screenshot_2015-11-29-20-28-22
Something that our solution provided was an opportunity for customers to be browsing the products, which you usually aren't able to do on a normal e-commerce web application. However, we wanted a way to turn those potential customers into money spending customers. The problem though is that you can't pay for something when there is no internet connection. The next best option was to ask the customers if they wanted to be notified when connectivity had restored so they could continue with their order. This would allow us to increase conversion and ultimately allow the customer to spend money. To do this we used another one service worker's features that allows you to send a push notification from a website, even if the browser isn't active and the phone is locked. This technology is very new but sites like Facebook are already using it. The end result was something like this. Snip20151129_6 We were pretty proud of what we did in such a short space of time. The result of our hard work was that we ended up the winning team and took home the top prize of £1,000. The final solution can be seen here. winners If you have any questions, suggestions or ideas, please leave a comment!

About the author

Alex Turnbull