Problem Statement

The initial task was to replace the existing retail app with a contemporary product. The goal was not only to improve the visual experience, but to create a platform that can be operated independently. This reduced dependence on external providers, ensured full control over customer data security, and established a reliable foundation for future feature expansion. This step toward independence went hand in hand with modernizing key parts of the IT landscape.

The user experience, previously perceived as underwhelming, also required a complete overhaul. The goal was a modern retail app built on a future proof architecture that could compete in the market, attract new customers, and become a central tool for digital customer loyalty across famila and Markant. It quickly became clear that this would require a clean foundation. The team therefore started from scratch and brought its full technical and design expertise into the redevelopment process.

Real Usage Insights as a Foundation

Today, nearly every major supermarket chain offers an app that makes shopping easier, faster, and more accessible. For many people, using digital tools while shopping has become part of everyday life. These real world usage patterns formed an important foundation for our UX process.
Despite different habits across the team, clear patterns emerged in how customers interact with retail apps before, during, and after shopping. Building on these observations, we identified the most relevant use cases and translated them into detailed user flows. These flows became the basis for wireframes and the overall interaction concept.

At the same time, the use cases provided a shared foundation for the domain driven approach in development. Together with the client, we used them to define the MVP scope and align priorities early. The result was a coherent, user centered product foundation that is built to evolve.

Interaction Concept

Based on initial market research, we identified established interaction patterns that felt familiar and intuitive, and deliberately built on them. The design team opted for a central main navigation bar so that key functions remain within easy reach at all times. Checkout was defined as the most important interaction, since this is where the app delivers its core value in everyday use. Accordingly, it is placed most prominently within the interface.

The only elements that overlay the main navigation and checkout button are modals that intentionally prompt users to take action. This focuses attention exactly where it is needed without compromising orientation in the rest of the interface. The effect is reinforced by dimmed background content and subtle depth, which helps the modal stand out. Combined with carefully tuned micro animations, this creates a distinctive interaction experience and supports focus even in dynamic situations.

A Unified Visual Language for Two Brands

In parallel with the UX process, we collaborated closely with the Bartels Langness marketing team to develop a visual language that works equally well for famila and Markant and brings both brands together in one cohesive digital experience. Differences were kept subtle and deliberate, for example in the color palette, primary colors, and corner radii. This allowed us to follow each brand’s guidelines consistently without compromising the look and feel of a modern digital product.

To ensure design consistency and a smooth handover to development, we created a comprehensive design system including UI components, visual assets for both brands, and clear usage guidelines. This also included approachable illustrations that support content and communicate key processes and interaction moments in an easy to understand way.

The system was further enhanced by a multi level design token approach, enabling fast and scalable adjustments for theming as well as cross platform updates. As a result, the design system became the single source of truth and a central accelerator for implementation, quality assurance, and future product evolution.

Rapid Feedback & Seamless Integration Through Continuous Testing

From the very beginning, we relied on continuous testing to ensure quality at every stage of the project. In the first phase, we used Figma prototypes and early development builds and ran regular UX and UI reviews. This created short feedback loops that validated decisions early and reduced risks later in the process. It was a key factor in delivering a robust, high quality product by the MVP milestone.

In the second phase, we conducted hands on testing with an advanced app version in dedicated test environments, paired with simulated checkout systems including handheld scanners used by famila and Markant. Testing followed a standardized framework that was well documented, reproducible, and aligned with a fully defined customer journey structured into before, during, and after shopping. This allowed us to validate integration with existing systems on site and ensure a seamless user experience and operational readiness in stores. Short release cycles made it possible to identify issues early and resolve them consistently.

Shortly after launch, we ran an initial test with an expanded user group of around 200 participants. The feedback was collected systematically, analyzed, and translated into concrete improvements.

Technology & Architecture

The new app generation for famila and Markant was designed not only to deliver strong functionality, but above all to serve as the technical foundation for a self operated and continuously expandable product ecosystem. Accordingly, the focus was on an architecture that enables independence, supports reliable integrations, and is prepared for future feature growth.

Our approach followed clear principles: use case driven development, a consistently domain driven view of business logic and data, and an agile workflow to validate decisions early. Proven quality standards such as an API first mindset, testability, type safety, scalability, and automation ensured a robust and maintainable system that extends well beyond the MVP.

Server Architecture: Microservices, CQRS, and Clean Architecture

Microservices

We deliberately chose a microservices architecture in combination with Domain-Driven Design, as this approach provides the modularity, flexibility, and scalability required for our use case. Especially in complex and dynamically growing business applications, it enables a clear separation of business and technical responsibilities.

This intentional decomposition allows individual domains to be evolved independently, scaled selectively, and operated robustly. At the same time, the microservices approach fosters close and effective collaboration between development and operations, strengthening both the agility and resilience of the overall system.

CQRS (Command Query Responsibility Segregation)

The use of CQRS was a deliberate decision to keep the complexity of business processes manageable and to establish a clear separation between write and read operations. Within a DDD context, CQRS allows us to strictly align state changes with domain logic, while optimizing read access independently.

This results in an architecture where teams can focus on the correct implementation of domain logic without compromising performance, clarity, or maintainability of query models.

Clean Architecture

We intentionally applied Clean Architecture to ensure a system structure that is maintainable, extensible, and technologically independent over the long term. The clear separation between business logic and technical concerns was a key decision factor, as it enables business requirements to be implemented independently of infrastructure or framework choices.

In combination with DDD, Clean Architecture is used to clearly define and isolate bounded contexts. Within each bounded context, domain logic remains at the core and is not dependent on persistence, APIs, or UI concerns. This architectural decision helps keep domain models stable while allowing technical details to be replaced or evolved flexibly.

Client-Side Architecture: Model-View-Presenter and CQS

For the client-side implementation, we selected an approach that effectively combines rapid development, a consistent brand experience, and efficient access to native functionality. After evaluating PWA, native, and hybrid options, we chose a hybrid solution that enables cross-platform delivery from a shared codebase while still supporting app store distribution and reliable access to native APIs.

The combination of Model-View-Presenter (MVP) and Command Query Separation (CQS) was selected as the client-side architectural pattern. In the context of Domain-Driven Design, this combination provides a strong foundation for building user-friendly and maintainable applications. Both concepts enforce a clear separation of responsibilities and significantly improve readability and maintainability, especially in complex and frequently evolving business domains.

From a technology perspective, a modern frontend stack was established using React, TypeScript, SCSS, and a structured monorepo workspace approach. State management is implemented using established patterns and Zustand as a state machine. Native API integration and bundling are handled via Capacitor.

This resulted in a scalable client-side foundation that cleanly supports both brand-specific theming and future feature modules.

Conclusion & Outlook

The release of the product in its current version provides a solid foundation for ongoing collaboration with Bela-IT and Bela-Marketing. Even after the completion of the first project phase, we remain a key partner for Bartels-Langness.
Our support focuses particularly on the continued development of the product and its strategic direction guided by the company vision we defined together with the client and continue to refine.
With an eye on the ongoing evolution of the system landscape and the transition to a self-managed operational model, we provide advisory support for requirements management. This ensures that future expansions, integrations, and operational steps can be implemented as smoothly as possible.

Next Project