Designing JD Smart Cloud’s Unified App: UI/UX Choices and Project Lessons

1. Project Background

JD Smart Cloud is the flagship product of the “JD+” smart hardware plan, providing a unified one‑stop application for all smart hardware sold on JD.com. It integrates four major business areas: smart home, health life, automotive services, and cloud storage. After completion, any smart product sold on JD can be managed through this single “super app”. When the team took over the requirement, an autonomous version was already under development alongside JDC’s version, which would serve as the second phase, leaving ample room for timeline and functional improvements.

2. Early Mockups

Interaction – Main functions: home – control; health – data; car – data; cloud – storage. Auxiliary functions: device interconnection and sharing.

1. The interface uses separate tabs for home, car, health, and cloud, making functions clear but often leading to unused features because users may not need all of them.

2. To avoid feature vacancy, devices appear only after the user adds them, while all devices remain visible on a single page. Quick‑action buttons on the home screen provide fast access to the most frequent operations (e.g., on/off).

Visual – The early direction combined a light‑skeuomorphic style with a high‑tech feel. The integrated app resembles a smart remote, and the light‑skeuomorphic look helps users relate the UI to physical interactions. The high‑tech aesthetic aligns with the “smart” and advanced technology image, similar to designs seen in apps like Yahoo Weather or Nike+.

Based on this direction, the team produced the following visual attempts:

3. Changes and Final Version

Just as the new visual style was about to be confirmed, feedback from the stakeholder clarified two points: (1) the version would be launched as the first phase; (2) due to limited development time, all interactions must be based on the already implemented version.

After multiple rounds of communication and adjustment, the final page layout was settled as follows:

4. Project Insights

Early communication consumed a lot of effort; when the product cannot provide clear decisions, visual designers should not waste energy on making things look flashier but should instead understand the product, design from the product’s perspective, and then persuade the product team. When the schedule is tight, development takes precedence over visual polish, so many UI features must be built based on the prototypes and resources provided by the product side. In situations where we cannot reverse‑engineer the product, we should deliver the best possible solution within existing constraints while preserving ideas for future iterations. Finally, delivering the final mockups is not the end—continuous follow‑up with developers and close monitoring of visual fidelity are essential to avoid visual compromises in the launched product.