Top 5 Front End Solutions in Retail — 2020

March 23, 2020 Michal Hans

People are increasingly loyal to retailers, products, brands and devices that provide real value frictionless and without stress. 63% of US customers say they would share their personal data with a company that offers a great overall experience.  

And in today’s world, data is the new gold. 

Many technologies can help retail achieve a high customer satisfaction. In this entry, I’m going to focus on a crucial field that serves as a communicator between the back end code stored in the cloud and a human in front of a screen: User Interface (UI). 

 

Offer Customers a Great Experience and They’ll Buy More.

 

Done right, UI  so the front-end part of the software  can help companies create great customer experience and reap the resulting benefits; according to a study, 82% top-performing companies report paying close attention to human experience around digital and tech [PwC]. 

Technical solutions that increase speed, convenience, friendliness and knowledge  unarguably core demands of consumers  can help companies improve the way people interact with their brand. And it’s especially important to be up to date in 2020, as customer expectations are constantly increasing.  

In retail, UI solutions are an area where many companies fail. If you think this also applies to your business  worry not here’s a list of the top 5 modern front-end technologies and techniques, hand-picked by us, which will help you bring great interface experience in retail and eCommerce on a daily basis.

 

 

1. Single-Page Applications 

In the ‘90s, it was common to see web pages load for nearly a minute. Obviously, these times are long in the past, but even today some classical web solutions like Multi-Page Applications are not able to provide their content instantly. 

The answer to this issue are Single-Page Applications; in comparison to regular web pages, SPA’s don’t generate flashes of white screen — the result of loading additional content  but navigate user between pages with a smooth, undisturbed flow. And, as a bonus, save the serves some work! SPA’s are able to load new content, without refreshing, because everything — meaning HTML mark-ups, styling and JavaScript cod is pre-loaded with the main page.

 

What technical problem does it solve in retail? 

  • Page reloads
    After clicking on link (product name, for example) the core part of the application’s UI is already downloaded, so only the text and images are missing (and even they can be downloaded upfront using predicted cache, so product details can be delivered immediately). 
  • Flash of blank page
    Unlike in monolith architecture, browsing between pages in SPA can be smooth like turning pages in a catalogue. 
  • Loading times
    Downloading whole pages each time a user clicks on a link is strictly correlated with monolith applications. Decoupling front-end code with backend pages saves time and transfer needed on each click. 

 

What’s the impact on the business? 

  • Team Scalability and faster delivery
    Decoupled architecture enables to deliver two pieces of the software by independent teams. 
  • Multichannel support
    REST (or other) API established in the cloud can be reused for other devices or applicationsFor example, same Cloud API’s can be used to deliver desktop-, mobile web as well as native mobile applications.  

  

What’s the likely impact on the customer? 

  • Reducing stress correlated with delays
    According to an Erricson report, users who are experiencing network delays are under a similar level of stress as when watching…  horror movie!  
  • Page transitions cause less fatigue
    A human brain doesn’t like emptiness. Whenever there’s a lack of smooth transition between state A and B, the brain needs to analyse it. After a constant use of a software that lacks this smoothness, we are getting tired. That’s why transitions and animations are so important for creating great experiences  they ease the mind. 

 

2. Micro Frontends 

The second solution on our list, Micro Frontends, are an architectural approach inspired by the microservices architecture. The main idea is to break down the monolith into smaller parts, which may be delivered independently to create a greater whole. This allows organizations to divide applications in domains reflecting their business areas and spread the work across multiple teams without slowing down their delivery pipeline. 

 

What technical problem does it solve in retail? 

  • Independent deployment
    Similar to microservices, independent deployment of micro frontends is the key. This reduces the scope of any given deployment which also reduces the associated risk. 
  • Flexibility of technologies
    Each micro frontend can be written with different tools, depending on the needsFor example, React is best for complex visualisations, and Angular Form Builder works miracles with forms and validations. 
  • Simplicity at scale
    These smaller codebases tend to be simpler and easier to work with for developers. 

 

What’s the impact on the business? 

  • Incremental upgrades
    In order to avoid the disadvantages of a full rewrite, we’d much prefer to bite the old application piece by piece, and in the meantime continue to deliver new features to our customers without being weighed down by the monolith. 
  • Autonomous teams
    Teams can have full ownership of everything they need to deliver value to customers, which enables them to move quickly and effectively
  • Deliver new features easily
    Autonomous team focused on feature not blocked by other teams or monolith deployment cycle. 

 

What’s the likely impact on the customer? 

  • No direct impact, but…
    Domain focused teams should be granted a better understanding of user needs  as a result, matching user expectations should be easier.  

 

3. Server Side Rendering 

This solution generates the full HTML for a page on the server in response to navigation. This avoids additional roundtrips for data fetching and templating on the client, since it’s handled before the browser gets a response. Running page logic and rendering on the server makes it possible to avoid sending lots of JavaScript to the client, which helps achieve a fast Time to Interactive (TTI). This makes sense, since with server rendering, you’re really just sending text and links to the user’s browser. This approach can work well for a large spectrum of devices and network conditions and opens up interesting browser optimizations (like, for example, streaming document parsing).  

 

What technical problem does it solve in retail? 

  • Indexing SPA pages by search engines
    Nowadays, Google is indexing pages with JavaScript, but results are better if content is visible faster  and there are still other popular search engines one should keep in mind
  • Rendering page previews for social media
    Server side rendering allows to index all page’s content which in contrast to SPA won’t be accessible for crawlers due to resource limitations. When Google crawlers can index dynamic pages it still this happened to be case for channels like Twitter, Facebook and LinkedIn. 

 

What’s the impact on the business? 

  • More traffic
    Indexation by search engines is a way to let the world know that your business exists. 
  • Increased conversion rate 
    A one second delay on mobile devices can lower conversion rates even by 20%. 

 

What’s the likely impact on the customer? 

  • Search for content using search engines
    Better indexing provides the opportunity to appear in the results direct links hidden deep in page structure. It allows users to navigate directly from the search engine to the product page. 
  • Better experience at first visit
    First impression matters. There’s a strong connection between loading times and people’s perception of a business. 

 

4. Progressive Web Apps 

progressive web application applies the latest technologies to combine the best of both web and mobile apps. It can be described as a website based on modern web technologies that works like a native app.  

Recent browser advancements and the availability of Cache and Push APIs have enabled web developers to make it possible for users to install web apps on their home screen, receive push notifications and even work offline. 

Read more about the fascinating topic of Progressive Web Apps in this article from Damian Kowalski!

 

What technical problem in retail does it solve? 

  • Offline support
    Possibility to cache loaded resources (i.e. all products in browsed category, travel details) and access them later without internet access. 
  • Push notifications
    Notifications can be triggered locally by an open application, or they can be “pushed” from the server to the user even when the app is not running
  • Storage
    Using IndexedDB which is a large-scale, NoSQL storage system application is able to store just about anything in the user’s browser. 
  • Cross platform development
    One codebase for all platforms and operating systems is cost effective and significantly reduces workload. 

 

What’s the likely impact on the business? 

  • Big increase in conversions
    Let’s make number do the talk. A leading UK clothing brand — George.com  increased conversion rates by 31% with PWA; Indialargest ticketing firm  BookMyShow’s  got an 80% increase. Alibaba +76%, 5miles.com +30%, Flipkart +70%. And there are many, MANY more examples  too many for this entry, which definitely should make you consider this solution!  
  • Better user engagement
    PWA is a missing piece between Responsive Web and Native Applications. It’s an easy to engage channelattractive for people who don’t want to install native applications. When user is visiting web app a couple of times, he/she will be asked to create a shortcut on the device home screen. Many cases show that user sessions are longer with more page visits and bounce rates are often lower. 

 

What’s the possible impact on the customer? 

  • Native application look and feel
    The main idea behind PWA’s is to deliver a native look and feel.  
  • Possibility to browse offline
    Application owners have full control of cache. This means that, for example, all the info needed for browsing the catalogue of products with limited network connection
  • Application shortcuts
    PWA’s don’t need installing, instead the browser can show the suggestion to add a shortcut to the home screen (and, additionally, users can do this manually as well). 
  • Receiving push notifications
    Similar to Native Applications, customers can receive notifications about news, deals, promotions triggered by server. 

 

5. Design Systems 

And last, but not least: a solution that introduces a common design language framework to help to maintain a consistent and scalable customer experience.  

Outputs of Design Systems define blocks  starting from tokens and components to molecules and the final design. It minimalizes (or even eliminates) product inconsistences and ensures that all components look the same regardless in which context they are being used.  

With the ability to scale using highly re-usable and configurable components, it helps to create strong base for e-commerce solutions supporting white labelling systems and personalisation. 

Since we’re in this area… Remember that PGS is an expert at delivering complete Design Systems!

 

 

What technical problem does it solve in retail? 

  • Not reusable components
    When it comes to technical solutions, there’s usually the question of what could be reused in the future.
    Design systems are based on Atomic Design principles and force the usage of atomic UI components — a integral part of something bigger. 
  • Repeatable work
    Creating new products from scratch, implementing similar UI components in different teams is a waste of time. When projects grow, it’s better to create a shared library of UI components and use them as a building blocks in many delivery teams.  
  • Inconsistency in UX
    Finally, developing each component in isolation tends to create to inconsistences, which isn’t an issue in this case.   

 

What’s the likely impact on the business? 

  • Seamless consistency across all branded products
    Different teams can create new products and services, accessing a shared library to effortlessly and elegantly add to your range without the need to cross-check designs. 
  • Optimized delivery
    A shared UI library saves time needed for development. Additionally,guidelines of base elements like fonts, colours, paddings (but also tone and voice of communication) saves time teams need to think on how to build products.  
  • Whitelabeling
    Centralised information about the look and feel of an app is a good chance to test different versions and can be used for A/B testing as well as for whitelabeling solutions. 
  • Hyper Personalisation ready
    Atomic architecture together with well-defined rules are an ideal starting point for creating advanced customizations of layouts and components based on user preferences. Using Big Data and Machine Learning makes it possible to deliver a well-matched UI. 
  • Better collaboration within teams
    The communication between different specialities and teams in Design Systems is simply better. 

 

What’s the likely impact on the customer? 

  • Seamless experience
    Today’s customers communicate with brand through diverse channels and expect a similar experience on each of them. Using Design Systems additionally helps keep the tone and voice of communication consistent. 
  • Personalised experiences
    The shift towards personalized, targeted shopping experiences is largely caused by the evolution of marketing technology; with machine learning, artificial intelligence and biometric identification all becoming more integrated with one another, the Design Systems elements are the building blocks for digital products which can offer a personalised content and layout. 

 

Summary 

And that’s our list! Remember that these are just a couple technologies we’ve picked, but there are also many more interesting frond-end solutions out there. What’s worth noting, currently web and mobile solutions are sharing more and more technologies, which is a great chance to enhance your UI.  

There are also many other ways to interact with users. Gartner even has a term for a mindset of thinking about the touchpoints, and not channels: Multiexperience. If you haven’t already, make sure to read more about this trend in one of our previous articles! 

 

Sources: 

https://www.thinkwithgoogle.com/intl/en-gb/advertising-channels/mobile/milliseconds-earn-millions-why-mobile-speed-can-slow-or-grow-your-business/ 

https://developers.google.com/web/showcase 

https://www.ericsson.com/en/press-releases/2016/2/streaming-delays-mentally-taxing-for-smartphone-users-ericsson-mobility-report 

Experience is everything: Here’s how to get it right, PWC 

2019 UK Customer Experience Excellence analysis, KPMG 

Top 30 Progressive Web App Benchmarking Study, Divante 

 

 

Last posts