Problem Statement

The initial task was to replace the existing digital retail solution for end users with a contemporary app that would deliver far more than just a visual upgrade. The new product needed to be fully self-operated to reduce dependency on external providers, maintain full control over customer data security, and establish a robust foundation for future feature expansion. This step toward independence was closely tied to the modernization of key components within the company’s IT landscape.
The user experience—previously perceived as underwhelming—also required a complete overhaul. The goal was to create a modern retail app built on a solid, future-proof architecture that could confidently compete in the market, attract new customers, and become a central driver of digital customer loyalty for famila and Markant. It quickly became clear that this would require a clean foundation. The team therefore started from scratch, bringing 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, shopping with digital assistants has long become part of everyday life. These real-world usage patterns formed an important foundation for our UX process.
Despite the team’s diverse habits, clear behavioral patterns emerged in how people interact with retail apps—before, during, and after shopping. Building on these observations, the design team identified the 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 served as the foundation for the domain-driven design approach in development. Together with the client, we used them to define the scope of the MVP. The result was a well-rounded, user-centered product capable of competing in a highly contested market.

Interaction Concept

Based on initial market research, we identified established, familiar interaction patterns we deliberately wanted to build upon. The design team therefore opted for a central main navigation bar, ensuring that the most important functions are always within easy reach. Checkout was clearly defined as the most critical interaction—after all, this is where the app delivers its core everyday value. Accordingly, this feature is given the most prominent placement within the interface.

The only elements that overlay the main navigation and checkout button are modals that intentionally prompt users to take action. This pattern focuses attention exactly where it is needed without compromising orientation within the rest of the interface. The concept is supported by dimmed background content and a subtle depth effect, where the background slightly recedes to emphasize the modal. Combined with carefully tuned micro-animations, this creates a distinctive interaction experience—one that stands out pleasantly from many retail apps and helps users maintain 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 both famila and Markant—bringing the two brands together within one cohesive digital experience. Differentiation was applied subtly and deliberately, for example through the color palette, primary colors, or corner radii. This allowed us to adhere consistently to each brand’s guidelines without compromising on the design of a modern digital product.

To ensure design consistency and a smooth handover to development, we created a comprehensive design system that included UI components, visual assets for both brands, and clear guidelines for correct usage. This also encompassed approachable, friendly illustrations that support content while communicating key processes and interaction moments in an understandable 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, subjecting them to regular UX and UI reviews. This created short feedback loops that validated decisions early and reduced risks further down the line. This iterative process was a key factor in enabling us to deliver a high-quality, robust product by the MVP milestone.

In the second project phase, we conducted hands-on testing with an advanced app version on test environments—paired with simulated checkout systems, including handheld scanners from famila and Markant. The tests followed a strictly standardized test framework: well-documented, reproducible, and aligned with a fully defined customer journey, structured into before, during, and after the shopping experience. This allowed us to systematically ensure proper on-site system integration and guarantee a seamless user experience as well as full operational compatibility in the market. At the same time, short release cycles made it possible to identify and resolve issues early and consistently.

Shortly after the release, we conducted an initial test with an expanded user group of around 200 participants. The feedback was systematically collected, analyzed, and translated into concrete improvements for the working product.

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, long-term expandable product ecosystem. Accordingly, the focus was on an architecture that enables independence, ensures reliable integrations, and is structurally prepared for future feature expansions.

Our technical approach followed clear guiding principles: use-case–driven development, a consistently domain-driven perspective on business logic and data, and an agile workflow to validate decisions early. This was complemented by proven quality standards such as API-first, testability, type safety, scalability, and automation—ensuring a robust, maintainable system that extends well beyond the MVP.

Hybrid Approach with Native Performance

For the client-side implementation, we chose an approach that efficiently combines rapid development, a consistent brand presence, and access to native device features. After weighing PWA, native, and hybrid options, we opted for a hybrid solution—allowing cross-platform delivery from a single codebase while still leveraging app store distribution and native APIs reliably.

Technologically, a modern frontend stack was established using React, TypeScript, SCSS, and a structured workspace approach (e.g., nx). For state management and interaction logic, established patterns and libraries such as Redux and Zustand were employed. Integration with native features was supported via Capacitor, creating a client-side foundation that scales cleanly for brand-specific themes as well as future feature modules.

On the server side, we built an architecture that combines pragmatic delivery capabilities with long-term scalability. Inspired by concepts such as Clean/Onion Architecture and CQS/CQRS, the structure clearly separates business domains, encapsulates integration logic, and allows incremental expansion. The backend was implemented with Node and NestJS, complemented by TypeORM and data storage via PostgreSQL (and SQLite where appropriate). A STOMP broker was integrated for asynchronous communication and event-driven processes.

To ensure quality throughout all phases, the system was designed for automated delivery and reproducible deployments. GitLab CI/CD, Docker, and a clearly structured artifact and deployment strategy enabled short iteration cycles, controlled releases, and a technical setup that supports Bartels-Langness’ transition to a more self-managed operational model.

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