HomeHomeCasesCases

Gamma & Karwei apps: The best mobile experience for every DIY enthusiast.

We developed completely new mobile apps in React Native for the do-it-yourself (DIY) chains Gamma and Karwei.

Services
Mobile Development, React Native, Mobile Strategy
Release date
2022

Intergamma is the mother company of GAMMA Netherlands, GAMMA Belgium, and Karwei. With nearly 400 stores and over 10,000 employees, it holds a market-leading position in the DIY sector in the Benelux, both online and offline. The combination of their websites and physical stores has been instrumental in establishing a strong market presence. However, there was room for improvement in the mobile touchpoints: existing apps had low ratings, and there was a need for a refined mobile strategy with a customer-centric approach.

Result

Renewed code

The mobile apps have been rewritten in React Native. And a mobile development environment, including CI/CD pipeline, has been set up.

1 codebase, 6 apps

To facilitate optimal management and further development, GAMMA NL & BE and Karwei we made one e-commerce platform and one codebase for all 6 apps.

Working together with Elements, we have successfully tackled a significant number of technical challenges and rapidly worked towards a first release.
Frank van Polanen, Head of Product, Intergamma
Our approach

Mobile strategy, based on the DIY Journey

During the strategy process, a mobile strategy was developed for GAMMA and Karwei. Based on interviews, site visits, and mapping various DIY and home improvement activities by Soda Studio, a 'DIY journey' was created. This is a user journey within the app consisting of six steps that can be applied to any type of project, from addressing the need to tackle something in the home to preparation and product purchases. The app assists DIY enthusiasts throughout the entire project process, including providing inspiration for the next project.

Do It Yourself or Inspiration

GAMMA and Karwei have different propositions, and to support these, both brands have their own apps with specific features that reflect their unique identities.

GAMMA

GAMMA's emphasis lies in personalization within the context of DIY projects and user profiles. Through this personalization layer, we can provide more relevant support on all touchpoints with the goal of removing obstacles throughout the entire DIY journey.

Karwei

Karwei is the hardware store with style. Within the mobile app, the focus is on inspiration and visualizing the end result.

No items found.
No items found.
Technology

Full Codebase Renewal

In addition to rewriting the mobile applications in React Native, we also focused on setting up the mobile development environment, including CI/CD pipelines within Intergamma. Here, we utilized tools such as GitHub & CircleCI and Fastlane. Fastlane is a combination of open-source tools that enables the building, testing, and release of apps.

Release and Further Development

Within a few months, we released an MVP version in the app store. This new application includes most of the features from the old apps. We are now analyzing app usage, reviews, engaging with users, and deciding on which issues to address based on user feedback. For every update, user testing is conducted, and Milkshake's researchers provide valuable insights, ensuring qualitative ongoing development of the mobile apps.

6 Mobile Apps, 1 E-commerce Engine

To streamline management and facilitate efficient further development, GAMMA NL, GAMMA BE, and Karwei share not only their proposition-enhancing features but also their e-commerce platform and codebase for the mobile app. Through React Native, we can build mobile apps for all three formulas, both for Android and iOS. This results in six different mobile apps from a single codebase:

1 Android app for GAMMA NL
1 Android app for GAMMA BE
1 Android app for Karwei
1 iOS app for GAMMA NL
1 iOS app for GAMMA BE
1 iOS app for Karwei

Design System

In collaboration with Elements, Soda has established an extensive Design System using Figma for both GAMMA and Karwei. The Design System includes the design truths and the brand identity (including colors and fonts) of each formula. Through design tokens, we can ensure the right colors and values are used for each formula.

The Design System allows each brand to maintain its unique appearance, enabling designers, developers, editors, and marketers to style and manage content in the apps more efficiently.

Core + Features + Formula = 1 App

The React Native architecture consists of a solid foundation shared by all formulas. This includes basic interface components, navigation, specific formula configurations, local storage, data handling, Firebase analytics, and Crashlytics for error handling.

Additionally, we work feature-focused with feature flags, where features are designed and implemented independently. This allows features to be enabled or disabled for each formula as needed.

For each formula, we have grouped the various requirements together, including brand identity with fonts, icons, colors, and values, as well as languages and translations (e.g., French for GAMMA BE).

Web Pages

For some functionalities, we use web pages displayed within the mobile app. To enhance communication between the mobile app and the web page, we have established a strict protocol.

Improvements

Key enhancements include displaying additional products that may be needed for a DIY project and optimizing the checkout process.

No items found.
No items found.
Conclusion

Different Propositions, Unified Technical Foundation

While the propositions and target audiences of the GAMMA and Karwei brands differ, the requirement was that the technical core of the various mobile apps should be the same. This approach allows for benefits such as a short time to market, cost efficiency, and maintainability.

Collaboration

Soda Studio - Resoluut - Milkshake Research - Mr. Koreander

Download the Karwei or GAMMA app from the App Store or via Google Play.