Intuitive mobile application for retail and eCommerce business

Ani Gasparyan

Last updated on May 25, 2023 | 15 min read

• DevsData LLC rebuilt an outdated mobile application for a retail business in Pennsylvania, improving usability, navigation, and interface clarity.
• The app was refactored using the existing codebase, gained new features, and was fully aligned with WCAG 2.2 AA accessibility standards, as well as Magento integration.

Introduction

The client approached DevsData LLC as their existing mobile application was no longer supporting customer needs. It loaded slowly, product pages were difficult to navigate, and essential actions such as searching, filtering, and completing a purchase required too many steps. These issues created friction during peak shopping periods and led to a noticeable drop in mobile engagement.

They needed the application modernized quickly because the outdated mobile experience was directly affecting conversion rates, mobile revenue, and customer retention during peak shopping periods. At the same time, abandoning the existing codebase or disrupting its connection to Magento would have introduced major financial risk and operational downtime. The goal was to rebuild the interface, fix navigation issues, and introduce a clearer user journey while keeping the development timeline to just two months.

The client chose DevsData LLC for our ability to modernize production-level mobile applications without interrupting live eCommerce operations, while meeting strict accessibility and integration requirements within a fixed delivery window. The outcome was a redesigned and refactored mobile application that improved mobile conversion flow, reduced friction in the purchase process, and expanded the client’s ability to drive both online and in-store revenue through accessibility-compliant, feature-rich mobile experiences.

Client overview

The client is a mid-sized retail and eCommerce business in Pennsylvania with several physical stores supported by an online sales channel. They needed a mobile solution, later named ShopGarden, fully aligned with their existing retail operations.

As mobile traffic continued to rise, the limitations of the existing application became more visible, affecting navigation and overall usability. Because their online store was fully connected to a Magento backend, the new application had to remain compatible with the existing environment from the start, and every improvement had to be implemented within those technical constraints.

Project scope

The project included several key tasks. We needed to refactor the existing code, introduce new functions, replace visual layouts, and redesign the entire interface so it followed modern usability practices, including clear navigation paths, a consistent visual hierarchy, readable typography, and layouts optimized for small screens. The new application also needed to comply with WCAG 2.2 requirements at the AA level, which influenced decisions around content structure, spacing, color contrast, and interaction patterns to make the application accessible for a wider range of users.

Additionally, the new version had to support features that were not available in the earlier application. These included location-based notifications tied to nearby physical stores, personalized local promotions, store-level product availability, and event-based alerts for sales and campaigns. All geolocation functionality was implemented using the W3C Geolocation standard with explicit user consent and privacy controls.

Challenge

The project required modernizing an existing mobile application while preserving its original technical foundation and platform connections.

The client wanted the new application to meet current usability standards, offer new functions, and support accessibility compliance, all without replacing the existing technologies.

This created several practical challenges throughout both development and design stages.

Working within a fixed legacy technology stack

The client required that the existing technology stack remain in place to avoid destabilizing live sales operations and introducing costly backend changes. This meant the team could not rely on modern frameworks or rebuild core components from scratch. Every improvement had to be designed around the existing architecture, which increased technical complexity, required deeper dependency mapping, and demanded precise refactoring to avoid breaking Magento integrations.

Transforming usability without disrupting production

While poor usability was the reason for starting the project, the challenge itself was transforming the entire user experience without interrupting an active retail environment. Navigation logic, screen structure, and interaction patterns had to be redesigned while keeping the application live, synchronized with inventory, and functional for existing users throughout the transition.

Meeting modern accessibility standards in a commercial retail app

WCAG 2.2 AA compliance was essential not only for regulatory alignment but also for expanding the client’s accessible customer base and reducing legal risk. Implementing accessibility at this level affected the layout structure, color-contrast systems, interaction behavior, input validation, and visual hierarchy. These requirements had to be integrated without harming visual appeal, performance, or conversion flow, which added another layer of design and engineering complexity.

Our approach

The project started with a combined business and technical requirements analysis focused on user behavior, conversion friction, system limitations, and Magento integration dependencies. Based on these findings, the existing codebase was upgraded, its architecture refined, and new features introduced in a controlled and organized way. In parallel, design work followed an iterative review process with direct client involvement. Accessibility requirements were built into the project from the earliest design and development stages through contrast validation, structured content hierarchy, assistive technology support, and compliant interaction behavior, instead of being retrofitted at the final stage.

A compact delivery team led the work, comprising a Senior React Native Engineer, a Frontend Developer, and a UX/UI Designer with experience in accessibility-focused interfaces. This combination allowed development and design to move forward at the same time, reducing delays and helping the new version of the application take shape quickly. The team brought experience from earlier projects involving mobile commerce systems, third-party integrations, and performance tuning under production traffic, which helped speed up decision-making and lower delivery risk.

Our team also relied on experience from earlier projects for clients such as Kroll, SkyCatch, Inc., and SZIC.pl, where working with existing systems and introducing upgrades without disrupting operations was a recurring requirement. To deliver the new application efficiently, we organized the work into the following key streams:

Gradual code refactoring and controlled expansion

We began by reviewing the existing codebase and identifying components that could still be used. As part of this process, DevsData LLC conducted a structured code review focused on performance risks, architectural stability, and integration reliability, which is also offered as a standalone service for clients maintaining production systems. Development then progressed in steps to avoid breaking compatibility with the Magento platform. Code was reorganized and expanded where needed to support new features and improve overall performance stability.

Collaborative design process

The design process was built around iterative validation of user flows that directly affected product discovery, checkout efficiency, and mobile conversion behavior. Wireframes were first used to test navigation structure and information density, followed by interactive prototypes that allowed the client to assess real usage patterns. Visual refinements were applied through multiple review cycles focused on brand consistency, readability, and purchase flow clarity, allowing design decisions to be driven by actual retail behavior rather than purely visual preferences.

Accessibility built into design

WCAG 2.2 AA requirements were considered from the start and not after the UI was created. Typography contrast, visual order, and interaction choices were shaped with accessibility principles in mind to make the application comfortable for different user groups.

Execution

Designers and Frontend Developers worked simultaneously, eliminating the need for long handoffs and keeping progress steady.

Implementation began while design work was still underway, so both sides could address layout and technical details together. This workflow made it possible to keep the project on a short timeline and deliver the updated application in under two months.

After the new information architecture was defined and coded, we introduced new functions on top of the existing code, including location-based store notifications, personalized in-app promotions, improved product filtering and sorting logic, and streamlined checkout interactions. React Native remained the technology used for the mobile app. The application was fully integrated back into the client’s Magento ecosystem, including product inventory synchronization, user authentication, and checkout-related operations that relied on Magento’s existing payment flow. These areas required careful handling since the application had to work with the client’s current Magento configuration rather than a rebuilt backend. Integration milestones were coordinated through regular technical sync meetings with the client’s internal team, where data flow, authentication logic, and payment dependencies were reviewed before each rollout stage. Form validation was implemented using React Hook Form to simplify validation logic and reduce code complexity.

The geolocation feature was added to support location-based notifications connected to nearby brick-and-mortar stores. This feature was developed in close coordination with the client’s operations and marketing teams to align notification logic with in-store campaigns. The application does not store location data and uses user-permission-based access consistent with the W3C Geolocation standard.

The final stage included validating the entire application with WCAG 2.2 AA-level criteria. This process involved joint review sessions with the client to validate readability, interaction flow, and accessibility behavior across key user journeys before release approval.

Technology and integrations

The mobile application was built with technologies chosen to support a flexible structure and maintain reliable integration with the client’s existing eCommerce system. Each technology served a specific role in improving functionality and user experience.

The use of these technologies made it possible to modernize the client’s mobile solution without rebuilding the system from the ground up. This kept development efficient while improving load times and providing a more stable experience across iOS and Android devices, all while meeting accessibility requirements.

Business impact

As a result of this work, the mobile application became an active sales and engagement channel rather than a secondary platform. Improved navigation and clearer purchase flows reduced friction in mobile shopping, strengthening conversion potential during peak sales periods.

Location-based notifications created a direct link between online engagement and in-store visits, supporting local promotions and helping drive foot traffic to nearby physical locations. The client strengthened its mobile revenue channel while preserving the existing backend business logic.

Results

DevsData LLC delivered the rebuilt mobile application within two months, providing a faster, clearer, and fully accessible system. The new version is fully compatible with the client’s Magento store and synchronizes inventory, user accounts, and orders without interruptions.

Location-based notification functionality now operates reliably across supported devices, and the interface meets WCAG 2.2 AA requirements across key user flows. With the technical foundation stabilized, the application is prepared for further feature expansion in future development cycles.

Contact us

If you have an existing application that requires modernization or a codebase that needs structured improvements, our team can support planning, redesign, refactoring, and technical execution. Contact www.devsdata.com at general@devsdata.com to discuss how we can support your next mobile product development project.

Any questions or comments? Let me know on Twitter/X.

Discover how IT recruitment and staffing can address your talent needs. Explore trending regions like Poland, Portugal, Mexico, Brazil and more.

🗓️ Schedule a consultation

Read full bio

Ani Gasparyan Senior copywriter and marketer

Ani is a marketing enthusiast and content writer. With 6+ years of expertise in marketing, she succeeded in developing engaging marketing collaterals, including blog articles, social media content, and other promotional materials. With a keen eye for detail and a knack for storytelling, she thrives in crafting compelling content that resonates with the target audience.

Read more about our IT staffing services