Ananse
Magento Optimization Case Study: Supporting
Global Expansion for an African Marketplace
Visit Website
2×
faster mobile performance
15×
website traffic growth
3×
increase in active sellers
Overview of Ananse: The African Magento-Based Design Marketplace
Ananse is an African Magento ecommerce marketplace that connects global shoppers with authentic fashion and design pieces created by African designers.
Beyond commercial goals, one of Ananse’s key missions is to promote African creators and share African culture worldwide. The platform empowers local designers and artisans to tell their stories and sell internationally through a unified online storefront and streamlined logistics system.
Key Challenges in the Magento Marketplace Case
Our collaboration with Ananse began at the early stage of their global journey.
At the time, their website was built using Webkul’s Marketplace Multi Vendor Module for Magento 2. Their primary concerns were poor website speed and terrible mobile responsiveness – especially critical since most of their customers were shopping from mobile devices.
A website audit revealed that achieving significant speed improvements – enough to pass the PSI green zone and CWV assessment – would require migration to another server. However, due to several constraints, the client couldn’t proceed with this change.
Whidegroup Solution for the Fashion Marketplace Optimization
Given these limitations, Whidegroup team decided to:
- Focus on improving mobile responsiveness, as most traffic came from mobile devices
- Increase website speed as much as possible without changing the server
- Enhance the overall UX for both buyers and sellers to compensate for speed limitations and attract more users
Mobile Responsiveness Improvement
A code audit revealed numerous issues affecting both website responsiveness and performance. So, we:
1. Optimized HTML and CSS according to the best responsive practices. For example, we:
- removed unused CSS
- added header styles, Bootstrap critical styles, and product image styles to the critical CSS to improve visual stability
- included 'alt' attributes for images to enhance accessibility metrics
- defined width and height for all images to reserve layout space and prevent shifts during page loading
- Before
After
- Before
After
- Before
After
- Before
After
2. Added a separate admin panel field for uploading a mobile banner, and set rules to display it only on appropriate screen sizes.
Before
After
3. Improved website accessibility by adjusting the site’s color contrast to meet Google’s standards.
Speed Optimization
Despite the hosting limitations, we implemented several possible performance enhancements:
- Fixed broken caching control enabling proper browser caching for faster website loading on repeat visits
- Installed lazy loading to reduce initial load time by delaying off-screen elements
- Installed a WebP converter that automatically optimizes images without sacrificing quality
- Minified HTML and CSS, optimized browser rendering, and implemented selective CSS loading to reduce code size
- Removed resource-heavy JavaScript files that were slowing down the site
UX Enhancements
This was a major part of the project, which led to a significant improvement in the shopping experience, as well as the convenience of registration for new sellers.
1. Related Products module integration. We installed the Amasty Automatic Related Products module and extended its default logic.
To meet business requirements and align with the marketplace logic specifics, we:
- added displaying of a brand and a country of origin on product pages
- adjusted overall design to match the website appearance
2. Pop-up integration. We reworked the measurement pop-up.
First, a quick background: all products on the marketplace fall into three categories:
- Made to Order (MTO): products produced only after the order is placed
- Made to Measure (MTM): products tailored to the buyer’s measurements before shipment
- Ready to Wear (RTW): standard-sized products shipped without modifications
For MTO and MTM items, a special pop-up appears on their product pages after clicking the “Add measurement” button. Visual instructions in this pop-up guide buyers through the process and allow them to enter their measurements. This pop-up also includes an option to save the entered values for future purchases – buyers can even create and save multiple templates (for themselves, children, spouses, etc.).
The idea behind the pop-up was solid, but the original implementation had several flaws. That’s why the Whidegroup team stepped in to improve it. We redesigned the visual hints to make them clearer and more intuitive. We also corrected display issues to ensure the pop-up renders properly across all devices.
After polishing pop-up functionality, we added special labels for MTM and MTO products and developed logic to ensure the pop-up appears only for relevant items.
Additionally, we customized the cart page to group all products by type (MTM and RTW) for a smoother shopping experience.
3. Algolia Search extension customization. As the Algolia Search doesn’t support marketplace logic by default, we customized it to ensure the stable website performance and the convenient search experience for customers.
Our enhancements included the ability to search products by brand or by country of origin (i.e., the seller’s country). Since the marketplace features items from various African countries, this functionality is especially valuable for customers who prefer to support local creators or shop within their own country.
It’s also important for shoppers who are looking for products from a particular brand, making it easier to discover and navigate the catalog based on personal preferences.
4. Zero Downtime extension integration. This extension helps prevent website crashes and reduces bounce rates during maintenance periods by keeping the site accessible to visitors even when updates are in progress.
5. Payment gateway integration. We integrated Paystack and PayFast – popular payment solutions in Africa. Even though they didn’t have official Adobe Commerce-approved extensions, these payment methods were crucial for local buyers. We reviewed the unofficial Magento modules hosted on GitHub, fixed security and functionality issues, and integrated them into the marketplace. As a result, more customers across Africa were able to shop comfortably and securely.
6. Merchant registration page adjustment. We added more input fields that allow sellers to better describe their brand and product features. This additional context speeds up the application review process for marketplace administrators, improving the onboarding experience for new sellers looking to list their products.
Marketplace Feed Optimization
The client was using a Product Feed extension designed to generate feeds for global sales platforms like Google Shopping and Facebook Shopping. This extension was originally built for single-store catalogs, not for multi-vendor marketplaces. It also supported only simple product types, while Ananse uses configurable products.
Given the business owners goal to promote African designers worldwide and these technical limitations in mind, we implemented the following customizations:
- Enabled support for configurable products: adapted the feed logic to correctly process and present configurable products.
- Added new fields for brand, country of origin, and MTM label: these key identifiers in the feed now provide more accurate listings on external platforms.
- Introduced merchant verification before feed creation: added a check to exclude products from sellers who hadn’t yet been approved by the marketplace admin. This prevents unfinished listings from appearing in search results, which helps avoid user frustration and protects the marketplace from penalties by Google algorithms.
- Automated feed generation via Cron: scheduled feed updates to run automatically, reducing manual workload for back office staff.
Magento Marketplace Case Study Results
Speed Increase
Even without server migration, we achieved a 2x increase in page speed (as measured in PSI scores) on mobile devices – where most of Ananse’s traffic comes from:
- Category pages: from 18 to 37
- Homepage: from 25 to 47
Homepage Before
Homepage After
Category Page Before
Category Page After
Growth in the Number of Onboarded Sellers
The number of onboarded sellers grew from 460 to over 1,400 – a 3x increase. This aligns with Ananse’s goal to elevate more African creators on a global scale.
Global Reach Expansion
Improvements to speed and UX drove significant gains in user engagement and international reach. During this project, Ananse experienced a 15x increase in website views and a major expansion in geographic reach.
1. Countries reached grew from 110 to 178
2. Total views increased from 52K to 802K, including:
- USA: from 1,300 to 11,000 views
- UK: from 400 to 3,000 views
- France: from 145 to 1,400 views
Before
After
TELL US ABOUT YOUR PROJECT - WE’LL RESPOND WITHOUT DELAY!
