Executive Summary
In just 3 months, Equilobe transformed a costly, inefficient legacy app into a high-performance, native solution. This project eliminated annual licensing fees, reduced development costs by 55%, and enhanced scalability and speed. The new app is now future-proof, ready to support new features and technologies, and is currently being successfully implemented in both Germany and Luxembourg.
The Challenge
With over 3,500 locations across Europe, the German group we worked for on this project unites a diverse array of innovative food concepts and brands. Leading the pack is their renowned sushi brand. If you live in Germany, you’ve likely tasted their sushi or at least seen their vibrant aisles multiple times.
The sushi company relies on a mobile app to streamline deliveries, assist drivers in documenting daily routes, monitor chiller conditions, record product discards, and capture photos for continuous quality improvement. However, the app’s proprietary technology resulted in steep annual licensing and development costs, hindering the company’s ability to pursue continuous improvement.
Additionally, the new app needed to be delivered within a tight timeframe of just 3 months.
Importance of Moving to a Modern App
Rather than advancing their delivery app, the company found themselves bogged down by annual licensing fees and constant bug fixes. This not only drained their budget but also consumed valuable time and resources, making it difficult to add new features and innovate.
Moreover, the current app was just a web app encased in a mobile wrapper for publication on the Apple Store and Google Play Store. This approach was not future-proof, and the company wanted to replace it with a native build, ensuring better performance, compliance, and user experience.
Visual: Snips of the current app
Scope of the 2.0 App
Slash Annual License Costs: Eliminate hefty annual fees tied to the current tech solution.
Cut Development Expenses: Reduce high development costs by shifting from proprietary technology to a custom tailored tech stack.
Go Native: Replace the web-app mobile wrapper with native-like Android and iOS apps.
Stay Connected, Always: Ensure 100% offline app usage for drivers in no-coverage areas.
Seamless Syncing: Support data persistence and synchronization, even if drivers forget to turn on the internet.
Modernize the Look: Upgrade to a sleek, modern UI/UX.
The Initial Evaluation
After thoroughly assessing the company’s needs, Equilobe identified that transitioning from proprietary technology to reliable open-source solutions was the optimal path. This strategic shift would completely eliminate annual licensing costs.
To achieve the ambitious 3-month delivery of an app that originally took nearly a year to develop, we needed a tech stack that enabled instant onboarding and accelerated development. This approach not only ensured we met the tight deadline but also allowed the food company to reallocate their annual budget from just maintenance to both maintenance and new feature development.
Ultimately, we determined that the chosen technology should ensure seamless publication on both iOS and Android app stores, offering a native-like experience at a lower cost and reduced development time compared to fully native solutions.
Tailoring the Solution to Client Needs
Native Experience at a Fraction of the Cost: Instead of transitioning the app from a web app to native code or using React Native—which would have been time-consuming and costly—we recommended Capacitor JS. This cutting-edge solution allows our development team to write the app in simple React and then export it to Xcode and Android Studio for seamless deployment on Apple and Google Play stores. This strategy was pivotal in delivering the app within the tight 3-month deadline. The instant onboarding with React and the extensive availability of libraries and packages accelerated the entire process. Choosing React Native would have required much more time to find or create all necessary libraries.
Rapid Development with a Simple Store: Instead of a complex state management solution, we opted for Zustand—a straightforward store with built-in data persistence. This choice ensured instant developer onboarding and rapid development. Developers new to Zustand find it easier and more intuitive compared to using Redux, streamlining the development process even further.
Persisting Data in the Blink of an Eye: Zustand’s integrated data persistence capabilities allowed us to save significant development time. Unlike other solutions where you need an additional technical solution for data persistence, Zustand handles it automatically. Persisting data and rehydrating the app at startup requires just a single line of code, making the process incredibly efficient and hassle-free.
Easy-to-Use Styling Solution: Instead of a complex UI library like MUI, we chose Emotion’s styled components. This is the simplest styling solution that can be used with React to quickly build a custom UI tailored to the client’s needs. The team’s onboarding was virtually instant. Customizing a component library would have taken much longer and incurred higher costs for the client.
The Final Tech Stack
React
Emotion Styled Components
Zustand for state management and state persistence
I18next for localization
Axios for server calls
Capacitor JS for exporting to Xcode and Android Studio
Additional packages for managing the camera/photos/other driver needs
The 3-Month Fast Delivery Track
Visual: Timeline of delivering the app
Faced with a rapid development timeline and an already provided Figma design from the client, we adopted a waterfall-like approach where each phase followed sequentially, ensuring a smooth and efficient workflow. This method, as highlighted by an American software development architect, while not allowing for parallel phases or iterative cycles, significantly reduces the time developers spend switching contexts.
Building the Foundation: Our two front-end developers initially constructed all components for the 34 screens for the Germany and Luxembourg market, followed by implementing the screens themselves. By focusing solely on the UI initially, we completed the entire interface in a remarkably short period.
Streamlining Routing: With the German version of the application as the initial focus, we added routing between all screens. This routing mapped the driver’s journey from the sushi preparation shop to the store aisle where it is sold. We created a generic routing method that supports numerous conditions and scenarios with easy-to-use code, minimizing development time.
Seamless Persistence: We then implemented a feature to persist all user actions and replay them across sessions or days, even if the app is closed or restarted. This includes offline functionality, allowing drivers to view or replace photos taken during their routes.
Efficient Synchronization: Our data synchronization mechanism ensures that all work done by a driver, including photos and extensive data, is correctly synced with the server, even if the internet is off and synchronization happens the next day.
Cross-Platform Excellence: Once the UI and logic were complete, we used Capacitor JS to export the app to Android Studio and Xcode, building versions for both Android and Apple. We began testing on TestFlight for Apple and directly on Android devices, resolving any platform-specific bugs to ensure a consistent and pleasant user experience.
Exceeding Expectations: To the client’s delight, we completed all these tasks ahead of schedule, allowing us to implement the 14 additional screens needed for the Italy market. We repeated the above steps for Italy, finishing everything before the 3-month deadline.
Visual: Snips of the new app
The End Result
Right on schedule, in just 3 months, and with a lean two-man team, Equilobe delivered an application that previously took nearly a year to develop.
We didn’t just meet the client’s requirements for the German market; we went above and beyond by delivering 14 additional screens tailored to the Luxembourg market—all within the same timeframe and budget. This means the application is now ready for use in both Germany and Luxembourg without any extra cost.
With our innovative tech stack and revamped architecture, we’ve slashed hourly development costs by 55%. This significant saving means that the client can now use the same yearly budget that was previously spent only on maintenance and bug fixing to also fund the development of exciting new features.
Impact and Benefits
Moved Over to 2.0 On-Time: The transition to the new app was completed exactly within the 3-month timeframe requested by the company.
Eliminated Licensing Fees: By switching to React, the company completely eliminated annual licensing costs, freeing up budget for further innovation.
Reduced Development Costs: By leveraging React, Capacitor JS, and a lean architecture, development expenses were slashed by 55%. Starting next year, this will allow the company to allocate its yearly budget to both maintenance and new feature development.
Enhanced Scalability and Speed: The app’s new architecture supports rapid scaling and adaptation for new markets, as demonstrated by the swift implementation of additional screens for the Luxembourg market within the same timeframe.
Future-Proofing: The transition to a native build ensures the app is future-proof, ready to support new features and technologies as the business grows.
Comentarios