MUENET for all – building a customer portal with high speed.

To overcome these challenges, MUENET reached out to us to discuss the possibility of creating a customer portal that would allow users to sign up online, reducing the efforts of sales agents and minimizing paperwork.

The collaboration began with a workshop in October 2023, where the ProductDock team worked closely with MUENET’s representatives to understand their requirements and prioritize the features for the new portal.

In December 2023, the development team began working using a complete Nearshoring team model. The team initially comprised three members from ProductDock: one Backend Engineer, one Frontend Engineer, and a UX/UI colleague providing design support. Later, the setup evolved into a joint team, with a Product Owner from the MUENET side to improve collaboration and alignment.

MUENET’s  expectations:

 
• First: customer self-registration
• Next: customer registration facilitated by sales agents
• Later: customer self-service capabilities with upselling opportunities

To validate the investment in a customer portal, we aimed to launch an MVP with basic self-registration features, going live within just three weeks. Proof point: 20% of new contracts were processed through self-service within the first four weeks.

The first step was to collect all Business requirements, identify value for both the user and the business, outline the to-do tasks and map the user journey, and analyze the competitors on the market.

After identifying and defining the problem to be solved, we moved into the ideation phase. During this phase, we explored various concepts and selected the most promising ones to move forward with. We also established the core elements of the Design System, including colors, typography, spacing, grids, etc. This will be expanded with new components during the process ensuring that our design remains scalable, easy to maintain and update, while keeping our design decisions transparent and centralized.

We approached every component with accessibility in mind, always taking care that we have at least a minimum contrast ratio required for people with disabilities.  

Here are some UX challenges we encountered during the process:

• • The primary challenge was organizing and simplifying lengthy content for easier navigation. To address this, we implemented accordion items, with the first one opened by default, allowing users to easily see remaining sections. Optional sections were clearly marked to streamline the checkout process.
    
    

• • We grouped related items into “progress steps” to improve navigation and provide greater transparency. These “Progress steps” remain fixed while scrolling, keeping users informed of where they are, while the “Back” and “Next” buttons are sticky for easy access.
     

    

• • We fixed the “shopping basket” so it remains visible during scrolling, providing users with a clear view of the costs they can expect:
    
    

• We introduced inline notifications to help users in completing the application form, providing feedback and context through error, success or warning messages:
  
  

To ensure a lightweight and efficient technical solution, we containerized everything using Docker, while all the containers are being orchestrated and managed by Docker Compose on machines provided by MUENET. This approach allowed us to avoid the complex cloud infrastructure while focusing on delivering a flexible and fast solution. All services are versionized, configured, deployed and rolled out via GitHub actions (configuration & infrastructure as code).

The chosen technical stack for the frontend development is React, while we used Python for the backend APIs, allowing us to use widely accepted and future-proof technologies. The decision to use Python was based on MUENET’s existing familiarity with the language. We also introduced the FastAPI framework, which stood out due to its lightweight and easy-to-use nature, especially for beginners. 

The customer portal was developed from scratch while integrating with MUENET’s existing APIs, using the Python API as middleware to facilitate seamless connections:

Our design aimed to make all components flexible and fast, with the frontend relying solely on data provided by MUENET. This meant that if new services were added in the future, MUENET could simply update their database without requiring additional development effort. To achieve this, we created a Python API middleware to act as an intermediary between the frontend and MUENET’s internal APIs, enhancing the security of the application by preventing direct communication between the MUENET database and the frontend. By decoupling the customer portal from MUENET’s backend and introducing a cache for products and services, the portal is highly performant and independent from internal systems.

For users, the process began by visiting the existing website. They entered their address, chose their package, and were then redirected to the new customer portal. The frontend would then ping our Python API with their chosen service package, which would in turn interact with internal APIs and return answers for display on the frontend.

Existing website: user chooses contract:

Customer portal: user is redirected to do the check-out

To manage all of this, the Python middleware was responsible for performing data transformations and heavy validation to cover all conditional rules, as some contract packages excluded certain services. The priority was to ensure that we didn’t lose any customers during the user journey due to errors on the website. As we encountered errors that customers couldn’t resolve on their own, we needed to implement a solution that would handle these issues without disrupting the user experience. We solved this by introducing a retry mechanism within the middleware to handle cases where internal APIs were temporarily unavailable, ensuring that customers wouldn’t be affected even if errors occurred, while still guaranteeing the successful creation of contracts.

To further improve our solution, we implemented email notifications for MUENET Support whenever errors that couldn’t be fixed by multiple retries occurred. This enabled them to quickly identify and resolve issues, reducing the need for manual log checking.

The first release was completed in February, making the MVP of the customer portal take approximately two months to develop.

Summary outcome:

• High completion rate
• No major issues for customers
• Reduced errors (by typing from hand-written registration forms), direct address & IBAN validation
• More contracts, by winning especially more digitally savvy customers
• Enabled business growth
• Stronger market position

The biggest challenge came after two months when it became critical to deliver a functional app to production in order to meet investor expectations and demonstrate its value. Even though this release-deadline increased pressure on everyone, which required us to put in extra hours, we successfully delivered the product on time, satisfying the investors, our client and ourselves since we all were proud that we made it.

After the release, we transitioned into a more regular and structured product development process. Our team at ProductDock worked closely with MUENET to establish a well-defined approach using SCRUM events and introduced sprints to break down the work into manageable tasks. We documented each feature and logged the process on a board, which helped clarify the end product and gave MUENET more insight into what they wanted to achieve.

The client was pleasantly surprised by how the customer portal had been used, especially by sales agents who incorporated it into their workflow. Throughout the process, we implemented numerous features beyond the initial scope, adapting to the client’s evolving needs and goals. This helped in streamlining the MUENET team operations, reducing manual work and increasing efficiency. 

Currently, we are working on the second part of the project, which involves adding an account feature for those customers who already have a contract to make contract adjustments, update services, or change personal details. For this, we are integrating Keycloak as an identity and access management solution.

Overall, our team was able to transform a vague idea into a fully-fledged application that exceeded MUENET’s initial expectations. Meanwhile, over 2000 contracts have been signed, and the sales agents were happy to replace a lot of manual work due to an upload feature that we’ve implemented for them.

• Python turned out to be a revelation: Coming from Java, our default language and ecosystem,  we appreciated how Python’s lightweight and fast nature helped with prototype development and API creation.

• Redis magic: Just before go-live, we faced a performance issue with data aggregation slowing down APIs every time a customer visited the portal. To avoid delays visible to customers, we set up Redis in three hours, caching data and reducing load times from seconds to milliseconds, solving the problem just in time.

• Structure mitigates misalignment: We started with daily sprints for a three-week project, including large dailies with stakeholders. This quick approach led to missing important details, causing misaligned expectations. We learned that structure is key: introducing proper Scrum events (smaller dailies, sprint planning, refinements) improved communication, tracking, and clarity.

• Task breakdown speeds up delivery: We started with broad tasks on a Miro board, which gave a rough overview, but lacked clarity. As questions arose late, they were answered late and thus slowed down the progress. The lesson: breaking tasks into smaller tickets improves transparency, speeds up problem-solving, and helps track who is working on what, ensuring smoother collaboration.

• Sprints are not essential: It was acceptable not to have two-week sprints at the beginning, as APIs and endpoints weren’t ready, so if we worked with mocked data, sprints wouldn’t have helped. However, having tickets on a proper board and refinements is highly recommended.

• Retrospectives improve collaboration: Before we introduced Scrum, we held two retrospective meetings to understand the expectations of the whole team – both the client and ourselves. Conducting retrospectives helped refine processes, align expectations, and improve overall satisfaction among team members.

• A reliable network of support: In the beginning, we rushed our work, but we had a major advantage: our supportive colleagues. The MUENET team and stakeholders were always there for us, and we could rely on the expertise of our ProductDock and codecentric (our parent company) colleagues whenever we needed help or advice.