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:
However, after many hours of deliberating on these ideas we both had a eureka moment and realised the answer was obvious!
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;
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.
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.
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.
If you have any questions, suggestions or ideas, please leave a comment!
Sign up to the Kainos newsletter