Designing Modular Frontends

Overview
We enable organisations to design, develop and implement modular frontends that significantly reduce their time to market and development effort, ensuring a consistent user experience across all digital channels and customer segments.

Our Modular Approach encompasses the creation and/or refining of industry-leading design systems, custom-tailored modularisation principles and strategies, content frameworks, journey processes, front- and back-end architectures, API contracts, and transformation consulting.

By leveraging any or all of these elements, companies can eliminate duplicated work, minimise cost and free up resources for faster scaling of innovation efforts.
The Challenge
Many organisations today face a common challenge: their online services are fragmented. This not only creates an inconsistent user experience, it also poses multiple challenges for the scalability and maintainability of the design and code base, restricting innovation and development cycles, and significantly increasing maintenance costs.
Approach
We collaborate with each partner to establish a scalable foundation for creating and maintaining modular frontends within their organisation. We support our partners in the creation and execution of all (or selected) aspects of modularity.
Design System Creation
We build design libraries by closely following established design system principles such as hierarchies and dependencies. This ensures a consistent and organised foundation for all UI elements. Our focus falls on three aspects:

Reusable components

We design a comprehensive set of reusable web and app components by tailoring the definitions of atom, molecule and organism to meet the specific needs and context of our partners. This approach ensures consistency and saves valuable time by eliminating the need to reinvent the wheel for common UI elements.

Figma integration

We also ensure that these components are easily utilised in Figma packages. Our libraries integrate seamlessly with Figma, allowing designers to leverage a drag-and-drop interface for rapid prototyping and UI creation. This empowers designers to iterate quickly and efficiently.

Code Consistency

We create a library of code examples (e.g., a storybook) that serves as a single source of truth for component implementation. It provides developers with clear and consistent code examples for each UI component, ensuring efficient development and reducing the risk of inconsistencies in the codebase.
Module Identification and Design
We establish a clear framework to guide your team in defining and developing modular customer journey. This approach simplifies and unifies the user experience across all touch points.
The framework centres around three core principles:
  • Develop journeys: We develop comprehensive customer journeys that map out the user experience from start to finish, integrating all necessary touch points and channels.
  • Analyse module-journey fit: We organise and map visually customer journeys logically around organisational dependencies or user goals. We then analyse how modules fit within each journey, identifying gaps or areas for improvement such as missing modules, underutilisation, or upgrade needs. This ensures a seamless experience across all journeys.
  • Update and maintain: We help our partners establish systems in place to regularly analyse and update their modular journey by identifying areas for optimisation and improved user experience.
By following these principles, we ensure our partners can effectively design and implement interchangeable modules that seamlessly integrate across all customer journeys, fostering a unified user experience. This ensures all journeys leverage the latest modules and contribute to an exceptional customer experience.
Modular User Journey Creation
We enable our partner’s in-house team to continuously define and develop design modules that simplify and unify their customer experience across all touch-points.
Our framework is based on three core principles:
  • Job to be Done: We begin by clearly identifying a specific user needs (e.g., sending money). This ensures the design module remains future-proof, user-centred, and allows us to identify the right internal and external stakeholders that can help us identify a comprehensive list of functional requirements.
  • Design Components: Informed by the identified job-to-be-done, we select the most relevant design components to fulfil the desired user needs and functional requirements.
  • Implementation Considerations: We collaborate with domain and solution architects to identify the most optimal ways to modularise the design while considering existing and planned API infrastructure.
Leveraging these principles, our interdisciplinary team of business analysts, product and service designers, and solution architects collaborates to define clear functional requirements that align stakeholders across the board. This paves the way for the development of reusable design modules that seamlessly integrate across all customer segments and digital channels. Our approach ensures a consistent and unified user experience for everyone, regardless of how they interact with your product or service.
Module development
In order to ensure that the design modules can be easily developed, we adhere to the principles of clean architecture, which emphasise separation of concerns and modularity.
By structuring our codebase into layers such as View, Presenter, UseCase, and Repository, we enforce clear boundaries between different aspects of the application. This approach enables us to develop each module independently, allowing for ease of maintenance, testing, and scalability.
Clean architecture also promotes flexibility, as it abstracts away implementation details, making it easier to swap out components or technologies without impacting the overall system.
By implementing a modular design approach within a clean architecture framework, we ensure that our codebase remains adaptable and resilient to change, ultimately leading to more efficient development and higher-quality software products.
Spotlight

Creating Modular User Experiences for a Leading Financial Firm

We worked together with a large financial firm to accelerate their transition to a fully modular frontend. We were asked to accelerate the firm’s transition to a fully modular frontend by leveraging their new design system and creating design modules that simplify, unify and modularise their different user journeys across their fragmented customer segments.  As such, we carried out a 6-month project in 2 phases.

Phase 1: Creating design modules (Months 1-3)

We created a blended team of business analysts, solution architects, and service and product designers to:

Inventory & Analysis

We conducted a thorough review of all existing screens and user journeys across the client's digital platforms. This comprehensive analysis allowed us to identify commonalities and user interaction patterns.

Unified User Flows

In collaboration with the client's product owners, we defined overarching functional requirements for a unified user experience. This led to the successful simplification of 392 distinct user flows into a set of just 16 coherent ones, representing a 96% reduction in user experience disparity.

Creating Design Modules

Our team designed a library of self-contained design modules, reusable across various channels, customer segments, and user journeys. This modular approach empowers the client to create a consistent and user-friendly experience with greater flexibility.

Phase 2: Knowledge Transfer & Implementation (Months 4-6)

We worked closely with our partner’s internal teams to ensure a “warm handover” of the project, where we supported the internal teams by:

Warm Handover

To ensure a smooth transition, we actively supported the client's internal teams. This included assisting design teams in further detailing the design modules, identifying new modules as needed, and conducting workshops to effectively communicate the design module framework.

Governance & Scalability

We collaborated with the client to establish clear modularity guidelines and a robust governance structure. This ensures consistent implementation of the design system across all digital projects.
This collaborative effort yielded a 96% reduction in difference of user experiences. It also empowered the firm to deliver a consistent, user-friendly experience across their entire digital ecosystem, paving the way for faster innovation and improved customer satisfaction.
The Impact

Enhanced User Experience

Users now enjoy a smoother, more unified interface across all digital services.

Cost Efficiency
‍

Significantly reduced development and maintenance expenses through the strategic reuse of design modules.

Acceleration
‍

Increase in the speed of feature development and deployment.

Strategic Cohesion

A consistent approach to customer engagement across all banking sectors.

Foundation for Future Growth

A scalable and adaptable framework ready for future technology changes.
Metrics of Success

Reduction in User Flows

We consolidated the number of user flows from 392 down to just 16, improving the efficiency and clarity of the customers experience.

Increased Component Reusability

Achieving a 28% uplift in the sharing of modules across different user flows.
conclusion
Our modular design approach empowers organizations to build a future-proof digital landscape. By creating consistent user experiences across channels and segments, we unlock benefits like streamlined development, reduced costs, and a foundation that readily adapts to future needs. This translates to a competitive edge through enhanced user experience, strategic brand cohesion, and increased efficiency.
FESTINA LENTE

Curious to learn more?

We would love to explore how we can partner with you on Data & AI initiatives for the benefit of your organisation, people and society

Reach out to us!
Designing futures for all of us.
AboutServicesWorkInitiativeInsights
human@deus.ai
BlogResearchPodcastJoin usContact us
DEUS Amsterdam, Lauriergracht 112-C 1016 RR Amsterdam, NL
‍
DEUS Porto, Rua Roberto Ivens, 288, 4450-247 Matosinhos, PT
‍
DEUS A Coruña, Calle Ciudad de Lugo 35 - Bajo A 15004 A Coruña, ES
Subscribe to our newsletter and we’ll keep you posted on our research, podcast and other AI goodies.
Thanks for subscribing!
Something went wrong with the submission.
© 2024 DEUS.AI. All rights reserved.
Privacy Policy
Our site uses cookies to enhance the viewing experience. By continuing to browse our site, you agree to our Privacy Policy.
Ok, I got it
Designing futures for all of us.
Subscribe to our newsletter and we’ll keep you posted on our research, podcast and other AI goodies.
Thanks for subscribing!
Something went wrong with the submission.
AboutServicesWorkInitiativeInsightsAcademia
BlogResearchPodcastJoin usContact us
DEUS Amsterdam, Lauriergracht 112-C 1016 RR Amsterdam, NL
DEUS Porto, Rua Roberto Ivens, 288, 4450-247 Matosinhos, PT
DEUS A Coruña, Calle Ciudad de Lugo 35 - Bajo A 15004 A Coruña, ES
© 2024 DEUS.AI. All rights reserved.
Privacy PolicySustainability