Building an immersive e-commerce store with headless architecture and persuasive UX.

Content x Commerce: Building An Immersive Ecommerce Experience

The team at Redsea approached us with an interesting challenge.

They wanted to re-engineer their website and migrate the backend from Magento 2.3 Enterprise Cloud to a lighter, faster, and more innovative framework. To augment the customer experience, they needed complete front-end customizability, intuitive and instant search and filter modules, and simplified product bundling.

Redsea also needed 3D support for immersive shopping, futuristic AR integrations, and a robust backend that could accommodate complex and time-sensitive product promotions.

Omni-channel support was an important feature, and the modular website had to be optimised for high performance, with an expected page load time of under 2 seconds.

All of these features had to be seamlessly implemented at scale, and we couldn’t wait! Here’s how we built the perfect e-commerce store for Redsea.

The Challenges Of Building A Unified Experience

Crafting a scalable and modular design system

Online stores can get messy when they’re not rooted by a strong design system. Promotional banners, product cards, category listings and shopping guides battle for space and attention in a typical marketplace layout, so we had to build a system that was easy to understand, modular, scalable and placed an emphasis on customer experience.

Creating a unified, omni-channel experience

With over 12 physical stores, Redsea needed a tightly integrated omni-channel backend that would delight customers by letting them shop for products both online and offline, at the nearest store. Our challenge was to create a unified backend that could smoothly tie these systems together and help customers track their products easily.

Improving discovery through intuitive search

Intuitive and intelligent search can make or break an e-commerce store that has extensive categories (and subcategories) of products. An additional challenge was to accommodate products, categories and content and build a multipurpose and smart search option that would allow users to search for contextual results.

Building an innovative headless platform

Redsea’s Magento 2.3 Enterprise Cloud backend was outdated and couldn’t support innovative marketing initiatives, thanks to limited front-end customisation and added dependencies. We decoupled the front-end and back-end to craft a headless structure for the store, and set the groundwork for a modern, omni-channel and lightning-fast platform.

Building an innovative RTL Layout

Designing and developing a store with both English and Arabic as primary languages posed a unique front-end challenge. Our design had to support seamless mirroring in a Right To Left (RTL) layout, without expensive changes or upgrades in the future. With these challenges in place, we started our first step - by creating a design system.

Understanding What Customers Want

We received strong insights from our audience on common bottlenecks they’ve faced while shopping online. Our objective was to resolve these issues and create a more approachable and predictable experience.

Customer Preferences

• Offers/deals on their categories of interest

• Detailed product information and images

• Payment options and overall security

Customer Dislikes

• Clutter, and confusing store navigation

• Lack of transparency (with shipping, returns)

• Lack of instant support

How we helped in building an unified experience

Scalable Headless Platform

Scalable Headless Platform Powered by Next.js, our custom headless solutions for Redsea were developed with an eye on speed, stability and flexibility. Marketing experiments, agile A/B testing and immersive content were an important part of Redsea’s primary strategy, so we set up Contentful’s headless CMS to help them update their content and campaigns on the go.

Bidirectional RTL Interface

In an effort to streamline the experience in both English and Arabic, we designed a flexible interface that would be conducive to mirroring (since the passage of time in Arabic is Right To Left). As part of the asset design, we introduced effective localization, to represent design elements and iconography in their locally preferred variants.

Flexible & Adaptable Cards

In line with our target audience and their preferences, we took a mobile-first approach. We designed a modular system of cards to integrate products, promotions and content into a single and scalable system. We designed three categories of cards to achieve this - Hub Cards, Bundle Cards and Spotlight Cards, in two adaptable sizes.

Simplified Website Navigation

The homepage was designed to simplify navigation, with visual and interchangeable promotions and featured categories showcased above the fold. To simulate an app-like experience, we integrated bottom navigation through tabs, with the most preferred options (Search, Browse) placed in the most easily accessible parts of the mobile screen in an attempt to make it ambidextrous.

Powerful Search Module

Users love making an informed choice, so our intention was to build a search module that would help them understand what to buy and where to find it. Powered by Algolia, we created an omnipresent search and discovery module that delivers products, content and shopping guides. We augmented the smart search module with features like search history, product discovery, and breadcrumbs for easier navigation.