The project at a glance
Making a growing story library easier to explore
A customer story is most useful when readers can connect it to their own circumstances. The client's existing presentation made regional patterns difficult to see and left visitors with limited ways to find examples related to their market, products, or organization.
The brief called for an interactive world map that could handle the story collection while fitting into an AEM-powered web estate. Discovery needed to work across four dimensions: country, cloud product, organization size, and industry. The content model also had to accommodate new stories over time.
A React experience within the existing AEM site
We built the map as a React application, hosted it on Azure, and embedded it into the AEM page through an iframe. This gave the interactive experience its own application and deployment setup while keeping it available within the client's established website.
Map markers connect locations to customer examples. Preview tooltips show the customer name, story headline, location, and product context; selecting a story takes the reader into its detail. Geographic visualization libraries support the map interaction and presentation.
A regional visualization brings geographic context and discovery controls into the same view.
Filters supported by structured story data
Visitors can combine filters to find examples close to their own situation. Cloud product choices include Azure, Microsoft 365, Dynamics, and Power Platform, alongside country, company size, and industry criteria.
A documented JSON schema gives story metadata a consistent shape. Filtering uses those records instead of requiring separate, manually curated result pages for each combination. New and updated entries can follow the same data structure, supporting an expanding library without redesigning the discovery interface.
What the delivery included
- An interactive world map: a React interface for a collection of up to 150 stories, with location markers and contextual previews.
- Combined discovery filters: country, cloud products, organization size, and industry criteria working together.
- A documented data contract: JSON schema and API design for managing story metadata consistently.
- Azure hosting: an application endpoint deployed to support integration with the client's AEM environment.
- An integration handover: technical documentation and an iframe implementation guide for the AEM team.
A more useful route into customer evidence
The map gave customers and stakeholders a direct way to locate examples by geography and business context. Regional relationships that were difficult to see in a list became visible, while filters helped readers narrow the collection to stories relevant to their needs.
For the content team, the data structure provided a repeatable way to maintain the experience as stories changed. Visual discovery and content flexibility worked together: readers could explore the evidence from different perspectives while the team maintained one collection of story records.
Technology used in the engagement
React, D3.js, Mapbox, Azure, Adobe Experience Manager, iframe integration, and a JSON API supported the engagement. Together, these cover the interface, geographic visualization, hosting, site integration, and story data.
Questions We Get Asked
No. The React map was hosted on Azure and embedded within an AEM page, allowing the existing website to remain in place.
The documented project scope covered up to 150 customer stories, with a structured data model for ongoing additions and updates.
Readers could refine the collection by country, cloud product, organization size, and industry to find more relevant examples.
