Last updated:
HiperDino Mobile App Modernization: React Native Redesign and Technical Debt Remediation
React Native mobile app redesign, technical debt remediation, Android compatibility, CMS-driven merchandising, and iOS and Android ecommerce UX modernization for a Spanish grocery retailer.
Project Summary
HiperDino operates a grocery retail chain in Spain with a customer-facing shopping app built in React Native for iOS and Android. The app worked, but it had aged. Dependencies had been maintained by hand, some through direct modification of files inside node_modules. Build tooling had fallen behind. Android compatibility was degrading. On top of that, the interface no longer matched how the business wanted to present itself, and merchandising banners could not be updated without a release.
Elogic Commerce led the engagement from requirements gathering through design implementation, defect remediation and go-live. The work covered a full UI redesign across every screen in the purchase journey, a structured remediation of the technical debt that was constraining the app, and a CMS integration that moved promotional content out of the release cycle.
The core judgment call came in the first week: whether to rebuild on a current React Native version or redesign on the existing codebase. Elogic Commerce put the trade-off to the client explicitly rather than choosing quietly, and the decision shaped the whole delivery plan.
Key Outcomes
+27%
conversion rate following the redesigned mobile experience
+22%
add-to-cart rate across the redesigned shopping journey
+18%
repeat purchase rate within four months of launch
100%
of promotional banner updates moved outside the app release cycle through CMS integration
About the Client
HiperDino runs a grocery retail operation serving customers in Spain. Its mobile app is a direct sales channel: customers browse categories, search, build a basket, choose a delivery slot and address, and pay, all within the app.
Grocery is an unusually demanding category for a shopping app. Baskets are large and built from many low-value lines, so add-to-cart friction compounds quickly. Customers reorder frequently, which makes them highly sensitive to interface changes and equally sensitive to defects. Promotional content changes constantly, which is why banner management became a first-class requirement rather than a nice to have.
Project Complexity
Business Challenge
01
An interface that no longer represented the brand
The app’s design had fallen behind both the retailer’s positioning and customer expectations for grocery shopping on mobile.
02
Technical debt that was becoming a delivery constraint
Manually maintained dependencies and modified node_modules meant every future change carried compounding risk. Left alone, the cost of any new feature would keep rising.
03
Android reliability under pressure
Compatibility issues affected a large share of the customer base and could not be deferred behind cosmetic work.
04
Merchandising blocked by the release cycle
Promotional banners required a deployment to change, which is unworkable for a grocery business running frequent, time-bound promotions.
05
A redesign that had to preserve an existing habit
These are repeat customers with established shopping patterns. A visual overhaul that disrupted familiar flows would cost orders regardless of how much better it looked.
06
A fixed delivery window
The redesign, the defect remediation and the CMS work all had to land inside one release cycle rather than as a sequence of separate projects.
The Codebase Decision
The first substantive question of the project was whether to rebuild the app on the current React Native version or to redesign on top of the existing codebase.
Elogic Commerce’s finding from discovery was that the existing codebase carried significant accumulated risk. Dependencies were obsolete and had been maintained manually, some through direct edits inside node_modules, and updating any one of them could cascade. A clean build on current React Native, reusing the existing code as reference, would produce a more maintainable result.
The trade-off was cost and schedule. Redesigning on the existing codebase was the faster and cheaper route, but it meant carrying the dependency situation forward, and it might not have worked at all without a React Native update.
Elogic Commerce put the choice to the client rather than making it silently, with the recommendation and the risk stated in the same breath. The client’s position was that a rebuild on current React Native would be the better outcome if it was feasible within the constraints, and that the existing codebase should be retained if it was not.
That exchange set the shape of the delivery plan. Issues fixing became a named work package with its own budget rather than an assumption folded into development, covering dependency remediation, the node_modules modifications, Gradle updates, Firebase and Google Play Services configuration and Android compatibility. Making the debt an explicit deliverable, rather than something absorbed invisibly into feature work, is what kept the redesign from inheriting it.
A second, smaller decision followed the same pattern. HTML content is not natively rendered by React, so pulling CMS banner content as HTML would have cost roughly three times as much implementation effort as an image-based approach. Elogic Commerce proposed that the CMS expose banner content as images retrievable by API or by link. The client confirmed the CMS could do this, and the integration was scoped accordingly.
Elogic Commerce's Solution
Discovery and requirements definition
The engagement opened with project initiation and priority setting, requirements specification and documentation, backlog creation and task planning, a test and acceptance procedure document, a release strategy and roadmap, and a risk and change management process. Elogic Commerce wrote the specification rather than working from one, which is what made the codebase question surfaceable in week one instead of week six.
Environment setup and codebase analysis
Local, staging and production environments were established, CI/CD configured, and the emulator and project scaffolding set up. In parallel, Elogic Commerce analyzed the existing application structure and audited OS and SDK versions to establish what the redesign would actually be building on.
A component library before any screens
Rather than designing screen by screen, Elogic Commerce built the shared component layer first: app bar and header, bottom navigation, drawer navigation, breadcrumbs and stepper, search bar and search overlay, promotional banners, form elements including fields, dropdowns, checkboxes, toggles and sliders, the full button set, pop-ups, pagination, and a global theme covering shared styles, skeletons and wrappers.
This ordering matters on a redesign of this size. With the component layer settled, screen implementation becomes assembly rather than reinvention, and visual consistency is a property of the system rather than something QA has to police page by page.
Full purchase journey redesign
Screen implementation covered the entire journey. Splash, login and registration, search results and help and FAQ. The homepage with hero banner, banner and product carousels and category navigation. The product listing page with product cards, filter overlay, sorting and quick add to cart. The product detail page with image carousel, unit selector and add to cart, product information and a cross-sell section. The cart with product list, unit selection and removal, a usually-bought-with section, cart total and delivery information. Checkout with order summary, editable delivery address, customer information, payment methods and an order confirmation screen. Customer account pages covering profile, address management, payment method management and logout.
Quick add to cart on the listing page and the unit selector in the cart are small components that carry disproportionate weight in grocery, where a basket is assembled from many lines and every extra tap multiplies across the order.
Technical debt remediation as a named deliverable
Dependency remediation, removal of the direct node_modules modifications, Gradle updates, Firebase and Google Play Services configuration, and Android compatibility fixes were delivered as scheduled work with dedicated QA effort against each, not as background maintenance.
CMS integration for merchandising independence
Elogic Commerce built the connection between the app and the CMS for promotional banner synchronization and configured banner display from CMS-supplied content. With banners delivered as images by API or link rather than as HTML, the retailer’s marketing team can change promotional content without an app release.
Delivery and handover
The project closed with final regression testing, UAT, deployment, go-live day coordination and post-release testing, alongside user guides and training so the client’s team could operate the CMS-driven merchandising themselves.
Results & Business Impact
+27%
conversion rate. Conversion increased 27% following the redesign.
+22%
add-to-cart rate. Add-to-cart rate increased 22% following the redesign, across a shopping journey that included quick add to cart on the listing page, improved filtering and sorting, redesigned product detail interactions and a simplified cart with an inline unit selector.
+18%
repeat purchase rate. Repeat purchase rate increased 18% within four months of launch.
100%
release-independent merchandising. Promotional banners can now be updated through the CMS without requiring an iOS or Android app release.
Commercial
The design intent behind the redesigned journey was to reduce interaction friction. In grocery, where a basket is assembled from many low-value lines, even small amounts of interaction friction can compound across an order. The redesign and the technical debt remediation were delivered inside one release cycle rather than as two sequential projects.
Operational
For a retailer running frequent, time-bound campaigns, this separates merchandising operations from the mobile release cycle, allowing promotional content to be changed without engineering deployment.
Technical
The dependency and build stack was remediated, including replacement of the direct node_modules modifications, Gradle updates, Firebase and Google Play Services configuration, and Android compatibility fixes. This work was delivered as scheduled deliverables with dedicated QA effort against each, rather than carried forward as background maintenance.
Capabilities Demonstrated
01
React Native application redesign across iOS and Android
02
Discovery and requirements specification on an existing production system
03
Legacy codebase audit and technical debt assessment
04
Dependency remediation, including recovery from direct node_modules modification
05
Android build tooling remediation covering Gradle, Firebase and Google Play Services
06
Design system and component library implementation
07
End-to-end ecommerce journey design implementation, from catalog through checkout
08
CMS integration for release-independent merchandising
09
Milestone-based delivery management with structured UAT and post-release coordination
When This Solution Is a Good Fit
01
You have an existing app with real users, and rebuilding from zero is not commercially realistic.02
You are prepared to treat technical debt as a funded deliverable rather than something absorbed into feature estimates.03
Your content or merchandising systems can expose content in a format a native app can consume efficiently, or you are willing to adjust them so they can.04
You want a partner who will surface architectural trade-offs for your decision rather than resolving them silently inside the estimate.05
You can commit to structured UAT and go-live coordination rather than treating release as an afterthought.06
Your redesign scope can be defined up front, with changes handled through a change process rather than absorbed continuously.Planning Your App Redesign?
If your mobile app has reached the point where every change feels risky, the redesign question and the technical debt question are the same question. Deciding what to rebuild, what to remediate and what to leave alone is where most of the value is created or lost, and it is worth resolving before design work starts. Talk to Elogic Commerce about scoping your mobile app redesign.