With the company’s development, the needs grow, and it is real in the e-commerce environment. We engage in the hot pursuit of improving product availability. We choose e-ecommerce platforms that can guarantee the same high availability to our buying customers.

In e-commerce, we have no opportunities to interact with customers, as sales go via internet platforms, thus, it is the quality that plays a vital role. It affects the purchase, no matter if it is a specific product or a service. There is also that high availability, we strive for and which requires a multi-channel approach. While gaining new customers we cannot limit ourselves to just one sales channel. We should always go looking for additional ideas for business growth.

The Black Red White e-commerce team knows the ropes. Therefore, they have chosen Ideo to increase the company’s range of services to reach more potential customers. They set the bar very high. It involved the mobile application implementation, both functional and intuitive.

“Almost 70% of website traffic, we got came from mobile devices. Smartphone users generated over 40% transactions while the orders' value was even less. It was a clear signal to us, something was not working. So, we took a thorough look at the mobile web. We took steps to improve its usability, and optimize the purchase process.“- explains Mariusz Nowak, E-commerce and Omnichannel Strategy Director at Black Red White SA. “We wished to offer users a similar experience, they had in a native application yet much improved, without installing it from Google Play or App Store. According to our assumptions, the website was to load fast, work smoothly. Even if, there was a weak connection or temporary lack of Internet access. Also, we did not want to maintain and develop two independent platforms: the old app and the website. PWA in that matter seemed like the most optimal IT solution.“

PWA technology is the latest trend in creating web applications. The Google team set a new direction for the development, while other popular browsers followed. With a small exception of Safari, which supports a large part of PWA-related methods, however, disables the app installation by default. 

Do you want to create an innovative web application?
Check what we can do for you!

PWA offers you several possibilities. Via the BRW e-commerce app, you can access device resources and save them in the browser’s local database (IndexedDB). You can cache entire website views even while working in offline mode. Also, PWA allows for installing the application on both mobile and desktop devices.

The original Black Red White was a classic application that overloaded any time the user took action. It was neither appealing nor convenient. While using it, the mobile device buyers had an impression it was still the old website, yet wrapped in a “nice box”. The BRW team was aware of the issue and knew it affected customers' final purchase decisions gravely. So, they had decided; it was prime time to rebuild the website altogether.

To do so, it was vital to redesign the whole UX along with its graphic elements. In this way, the website would look-alike the mobile application. Apart from introducing the new app concept, the team also had to address a few minor nuances in the mobile application, like adding a “Go back” arrow symbol.

The SPA (Single Page Application) technology combined with the Vue.js framework was the ultimate remedy for the frequent website reloading issue. Now, any website individual elements render upon users’ activity. The browser performs fewer operations, and it optimizes the server load very well. Also, it immensely increases the website performance. It works faster, and the interface is more dynamic, enabling even the most complex graphic layouts can run smoothly. Thus, the new digital experience is unique. Website browsing via any mobile device provides users the same comfort and feeling as the mobile app. The website is equally efficient when used on a desktop PC or a laptop. This approach significantly expanded the BRW’s online store possibilities.

However, we, the Ideo team, went for major technological changes and suggested SSR (Server-Side Rendering) which is far more superior to SPA. For instance, standard SPA-type sites transfer site generation to the clients’ browsers. There are two steps before users see the entire website. First, the browser must retrieve the web data from the server, then based on the same data it renders the final web view. Waiting for the page to load fully takes time, especially with large-sized pages. SSR technology solves the issue but reduces the loading time SPA-type websites usually need. It only has a positive impact on web positioning.

The Server-side rendering (SSR), as its name suggests, takes place on a server from where it sends ready HTML code to the users' browser. It contains merely the data browser that needs to display the view selected by the user. Any website built like that, it takes a shorter time to load compared to classic SPA websites. The users do not notice the data is being loaded.

With the BRW.pl online store, we applied the Nuxt framework with SSR, which we later launched on the Node server. It is essential here to mention one factor. When processing the code on the server, we have no access to all information available in the browsers. Things like global variables; window, document, or navigator.

Instead, there is access to Connection headers' details, which enables them to recognize a specific device and generate adaptable HTML to its capabilities. The final server response is smaller and speeds up the HTML processing structure by any device.

If you ensure a smooth transition between individual store views, you contribute to a positive digital user experience. Also, PWA provides several improvements while the users view the online store. The most important one is a convenient mobile application installation. The moment a potential customer enters the PWA-based website store, the web browser first automatically asks the mobile user for permission to use the mobile application. It does it in a discreet and non-intrusive way, so one has the freedom to accept or deny. Once the user accepted the permission to run the application its icon will appear on a desktop. The saved site access info will enable users to access the PWA conveniently during future visits.

The most vital PWA advantage is browsing the store’s page offline.

Even the user with no internet connection can see the store’s digital catalog and add products to Favorites. As a seller, it is possible to send push notifications to keep in touch with customers and inform them about new products and current deals. The application can process all data offline, thanks to the Service Worker script. The feature is beyond doubt, one of the key PWA elements. Each connection with the server goes through the Service Worker and gathers data from a specific sub-page, which later you can display offline. The strategy falls into the Network First (Network Falling Back to Cache) approach.

Every time the user displays a certain page online, the cache grabs and saves new elements. In technical terms, the data in the cache is being updated. PWA does not collect excessive amounts of information, but only the sub-pages data that you viewed. When you lose the connection temporarily, Service Worker will then automatically redirect its requests to the cache data. It enables you to go back and see the product photographs or descriptions, and even use other features smoothly.

Like, for instance, Favorites lists - a very popular PWA feature powered by the IndexedDB (i.e. Indexed Database API). It is the web browser-based JavaScript interface application for managing a NoSQL database of JSON objects. So, the application can store data on users' activity offline. The moment an internet connection is available, data synchronization takes place. Information processed offline is then sent to the remote database.

“Throughout time, we have observed that many users irretrievably stopped visiting our website. Some customers were dissatisfied with the long page loading times, while others became discouraged by the application’s unresponsiveness. With the new PWA app, our customers can continue the online shopping process - even if their internet connection becomes gravely and temporarily unavailable. With technology, we intend to reduce the abandonment rate” - explains Mariusz Nowak.

PWA solution combined with Google Analytics is very practical. It collects any application's data generated by users in offline mode. Once the application restores its internet connection, it sends that data straight to the analysis tool. By doing this, we gain insight into users’ behavior offline and study it in depth. We can compare then both offline and online customers’ presence.

The IndexedDB has a worth mentioning advantage - versioning. It lets you quickly and automatically update the database structure. No user action is required, and no data lost during the process.

With PWA applications, it is challenging to design proper and adjustable mobile views. Therefore, each time you run the application on the device’s desktop, remember to do via the icon. Because there are no traditional navigation buttons, like in browsers. As a result, graphic designs must always include alternative navigation to enable free movement within the website. While we worked on navigation, the graphic design was delivered by the Client’s team. We suggested solutions that turned out successful. Whereas, the implementation made the mobile store application widely flexible to use. 

PWA applications can vastly expand your business reach. Yet, if combined with the latest technologies can lead to creating increasingly flexible applications that empower the fresh sense of possibility.

Do you need an efficient sales platform? Our experts will be happy to advise you on optimal solutions. Make an appointment for a free consultation.

Once we begin such an implementation, we get one platform in two forms. A mobile application compatible with all mobile devices and a website. In the long run, the maintenance service cost becomes less expensive. You get twice the benefits.

And there is more… The PWA updates become faster, especially for mobile users. It becomes automated, and they need not change phone settings at all. You can release PWA applications on the App Store and Google Play to boost its visibility to potential customers.

Author

Damian Glazer, Fronted Developer, Ideo Agency.