A simple idea can spark big transformation. Case in point, what began as an experiment by my team to speed up our efforts to provide customers with a better online shopping experience at Dell has revolutionized our entire Global eCommerce delivery along with website architecture across the company.
We are using an architecture approach called micro frontends (MFEs) to break up webpage components into smaller building blocks that can be plugged into a page, or unplugged, to quickly construct the customer experiences we want. Like building blocks, these MFEs are made to fit in any webpage design model and offer a consistent look and feel to customers across all eCommerce pages and functions.
That means eCommerce product teams and their counterparts for other Dell websites can share common component MFEs to rapidly create new user experiences or webpage changes instead of building them from scratch.
With some 25 MFEs already in use across our pages, we are increasing reusability, extensibility, gaining faster speed to market and achieving consistent brand experience on our consumer and business-to-business eCommerce sites.
Bringing agility to the front
The MFE transformation stems from two problems our team faced. First, we realized that when different eCommerce teams needed to deliver new customer experiences on our webpages, we were building the same things over and over again.
Always eager to adopt innovation, our organization had made great strides when it came to using data, APIs, and lean software development methods to provide responsive experiences on the backend of eCommerce. Several years back, we became one of the first organizations at Dell to adopt agile and iterative software development methods, breaking up monolithic applications into microservices that greatly improved our ability to meet changing customer needs quickly. We were already sharing backend components. But when it came to delivering responsive frontend user experiences, we were still reinventing the wheel with each new or upgraded page.
We needed to create an architecture that would allow our teams to build user experience components that could be reused and used by other teams to foster speed of delivery.
The second challenge was that individual teams were building all these different user interfaces, which led to completely different user experiences (UX) for similar purposes from page to page. We wanted to drive consistency in user experience while also accelerating UX delivery.
That’s how our architecture and engineering teams came up with the concept of using MFEs, which addresses both problems.
MFEs are essentially UX components made up of a combination of user experience elements, data and the microservices they call upon. That means each page fragment can be built in a way where it can be reused in other places.
We began experimenting by creating MFEs around our most common user experience elements, the header and the footer on each page for Dell.com. As sharable components, we could make these features consistent across our site. We then tackled components for elements like product information, price tags, etc., and kept expanding the approach. We now have dozens of MFEs that are being used across all our user experiences. Any page creator can pick up these modules from our repository and reuse them.
You build it, you own it
Another aspect of the MFE approach is the accountability it creates. The team that built that specific MFE owns it and is responsible for updating it or fixing any issues that arise. That way, no matter where the MFE is being used, a single team addresses its maintenance since it is within that team’s domain. As the MFE owner makes enhancements, the component automatically updates wherever it is being used.
For example, the eCommerce Account Management Experience page is owned by the Account Management team. However, it is using MFEs that are owned by many different product teams. The header is built by the Shop team. Order status and device information are owned by eSupport. The Account Management Team is responsible for uniting the experience together to make it best for customer. But they don’t have to reinvent the wheel and learn how, for example, deliveries work. They can simply pull that component, plug it in and build a high-quality experience.
The Account Management Team only has to focus on their domain expertise. Everything else keeps enhancing itself as the MFE owners make upgrades. What’s more, any other team whose pages include account management can consume what our team has built rather than rebuilding it themselves.
Rethinking experiences
Like most transformations, the MFE strategy did require us to make people, process and technology changes. From a people standpoint, our teams had to start thinking beyond building a single experience to instead building an experience that other teams could use as well—more of a platform approach. It required a mindset change that their team was now responsible for many experiences, not just their own team’s experience.
Another challenge has been building MFEs that could be used by applications that used different technologies. Not all teams use the same user experience technology. There were many experiences that had been live across the company for years and it wasn’t practical to try to force everyone to use the same UI technology. We had to find a way to make them technology agnostic.
Our solution was making MFEs consumable via two different options: either on the server side, when the pages are being composed or on the client side, when the pages are being rendered. By developing MFEs that leverage native browser capabilities, we are able to support different technology stacks. That provides architectural alignment across teams regardless of technology.
As eCommerce began expanding use of our MFE, we partnered with other teams to expand both MFE creation and adoption across Dell Digital. Beginning with eSupport and expanding further, we shared what we built and asked to use what they had built. It worked.
We currently have about 25 MFEs being shared across our 96 eCommerce teams as well as with other organizations. We expect eCommerce will contribute some 35 to 40 MFEs as we progress in the near future, including a focus on the checkout space.
The MFE approach continues to grow across Dell, providing other organizations with the efficiency, consistency and speed to market that we spearheaded nearly two year ago in response to a basic problem in need of a solution. No longer reinventing the wheel, we are now leading the MFE trend which is gaining popularity across the web design industry.