How Hema’s Backend Teams Built a Unified Cross‑Device Experience Platform

With the maturation of cloud computing and wireless networks, mobile devices have exploded in number, prompting many enterprise products to adopt multi‑platform designs. Huawei launched the micro‑kernel‑based HarmonyOS for a seamless cross‑device experience, Apple introduced Hand‑Off in iOS 8, and SaaS leader SAP already supports cross‑platform mobile work.

Extending the Backend Experience Boundary at Hema

In the context of retail digitalization, Hema rebuilt the "people‑goods‑scene" relationship digitally. Consumers receive precise product matches, while operators use a new digital workflow that works on any smart device, breaking the constraints of time and location. This forces the backend experience team to rethink the boundaries of their systems.

Cross‑Device Experience Challenges

Hema’s backend scenarios are no longer limited to traditional offices; they include stores, warehouses, delivery stations, and even moving trucks and electric carts. Roles span headquarters management, store operations, warehousing, and delivery, each using diverse devices such as PCs, phones, tablets, scanners, printers, and IoT equipment.

Solution Overview

Hema built a comprehensive cross‑device solution covering design system, components, applications, multi‑device containers, engineering infrastructure, a "experience brain", message center, and state‑sync services. The platform serves various roles—warehouse management, logistics, CRM, finance, ERP, EHR—and adapts to devices ranging from PCs to handheld scanners, often interacting with printers and IoT devices.

All‑Scene Cross‑Device Design System

Providing separate design systems for each device leads to fragmentation and higher development cost. A unified design system that accounts for device type, screen size, viewing distance, lighting, humidity, and user posture enables consistent experiences across offices, stores, and delivery stations.

The system classifies environmental factors into device differences, task differences, environment differences, and system differences, then uses these factors to compute design tokens (colors, fonts, spacing, sizes, shadows) automatically.

Reusable Cross‑Device Components

To handle the varied device landscape, Hema created a code‑once, run‑anywhere component suite with three layers: a responsive view layer (Design Token support, atomic CSS), a behavior layer (hooks for clicks, keyboard, gestures), and a state layer (shared state management). The Switch component illustrates this decomposition.

Application Architecture for Multi‑Device Reuse and Sync

The app layer is split into three parts: an application container (uniform SDK API), a data‑model layer (centralized services, cloud persistence), and a cross‑device view layer (device‑specific UI built on the reusable components). This enables low‑cost cross‑device view adaptation and state synchronization across PCs and phones.

Conclusion

By integrating environmental variables into the design system, building a unified cross‑device component architecture, and adopting a layered application model, Hema improved the efficiency and consistency of backend operators across diverse scenarios. The approach reduces development effort, avoids UI fragmentation, and supports seamless state sharing between devices.

Further details will be shared at the D2 Front‑End Technology Forum on December 19, 2020.