Building an immersive e-commerce store for Redsea with headless architecture and persuasive UX.
eCommerce + Retail
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.
Integrating intelligent promotions and upselling
We had to build a system that would simplify product bundling and recommendations, with a strong focus on delivering high value bundles to customers and improving their overall AOV. This feature had to neatly tie into the purchase flow to avoid friction and positively nudge customers to add more items to their cart.
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.
- Offers/deals on their categories of interest
- Detailed product information and images
- Payment options and overall security
- Clutter, and confusing store navigation
- Lack of transparency (with shipping, returns)
- Lack of instant support
Why We Started With A Design System
Scalability is important for e-commerce. To build a truly scalable store - we had to create a lean and effective design system that would dictate the standards for page elements, styles and components.
We did this with an eye on:
- Improving usability through a consistent interface
- Eliminating the need for redesign in the future
- Simplifying the development and testing cycles
- Making page elements and components reusable
Building the basics with an 8px grid
Pixel perfect rendering is everything, and an 8px system adapts beautifully across multiple devices and screens with varying aspect ratios and PPI. It also works on both iOS and Android, making the layouts flexible, consistent and almost invisible, and placing the focus purely on the customer’s shopping experience.
Creating a strong visual hierarchy
For immersive shopping, our visual design had to be intentionally minimal and easy to understand. We created a design language with clear hierarchy and CTAs to enable this and used familiar iconography for simpler navigation. The new design language was geared to enhance product focus and improve readability.
Excellent work guys. It was a crazy project that most agencies I know would run away from, and a lot of them did. Going headless is always risky if you don't have the know-how and the right partner. Glad to say it all worked out with lots of proud faces.
Faisal Mumtaz, Redsea
WebAR Enabled Shopping
To transform the shopping experience, we enabled Web Based Augmented Reality (WebAR) to deliver hyper-realistic 3D compositions of home appliances in a mobile friendly format. Our AR module infuses accurate shadows and lighting based on the environment to the product being viewed for added realism and immersion.
The Challenges Of Building A 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.
Intelligent & Persuasive Promotions
In an effort to improve the AOV across all store purchases, we designed and developed a custom mini-cart with intelligent recommendations for product bundles, extended warranty options, and added product recommendations. These were positioned closer to the point of purchase to make them persuasive, relevant, and tied to the overall customer experience.
Easy Product Comparison
Since our product data integrity was synchronized, we built a responsive and user-friendly product comparison tool to facilitate informed purchase decisions. We further customised this module with fixed CTA buttons for each product and highlights on the key features. Given that comparison is a primary need, the functionality was made omnipresent across the interface.