Designing Efficient B2B User Experiences: Digital Keypad, Task Tip Cards, Floating Cards, and Data Visualization Components

We often describe a deep partnership with collaborators as "heart‑to‑heart"; similarly, when our product aligns perfectly with users, it dramatically enhances the fluidity of their task journeys.

In B‑end experience design, users expect fast, task‑oriented interactions. As product features expand, processes become complex, leading to redundant functions, information overload, and insufficient guidance, which raise learning costs for new users and diminish focus for existing ones.

During early upgrades of the JD Cloud platform, we introduced the "efficient, friendly" design philosophy, aiming to reduce learning costs and operational burdens through design, creating a smooth and enjoyable experience that keeps users productive.

We also actively practice the group‑promoted "simple, smooth, inspiring" product design principles, optimizing interaction design and business components to achieve a "heart‑to‑heart" connection between product and user.

1. Exploring Smooth, Efficient Interaction Patterns

A smooth interaction greatly enhances product experience, allowing users to intuitively understand operations without consulting documentation, thus achieving "use‑and‑go" efficiency.

(1) Digital Keypad for Simpler, Faster Data Entry

Manual data entry is costly; our time‑tracking page required precision to two decimal places, making common selectors unusable. To lower entry cost, we introduced a digital keypad that lets users select numbers directly, reducing manual effort.

During a business redesign, designers identified high entry costs and proposed a keypad that adds selection capability to manual entry, easing user burden.

The keypad suits short integer inputs like numbers or percentages, presenting options in a grid for quick selection, offering better usability than dropdowns or arrow inputs.

Keyboard‑savvy engineers can still use physical keyboards, while other users benefit from intuitive keypad clicks; the component can also auto‑calculate and auto‑fill data.

The keypad, combining selection convenience and manual flexibility, improves efficiency and accuracy across various scenarios, even supporting custom date‑range calculations.

(2) Task Tip Cards for Immediate Guidance at Critical Points

Complex B‑end product detail pages often overwhelm users, forcing them to scroll or switch tabs to find information. Even with optimized layouts, users may still struggle to locate key actions.

We added task tip cards with clear guidance text and action buttons (e.g., "Go Complete", "Go Operate") to direct users instantly to the relevant module, reducing navigation friction.

(3) Floating Cards to Minimize Unnecessary Page Switches

Long workflows increase user effort; floating cards appear on hover, allowing users to view or edit key information without opening new pages, thus shortening steps and lowering development cost.

We extended this pattern to menu bar overflow handling: hovering over the "More Apps" icon reveals a floating card with hidden apps, enabling one‑click switching.

2. Innovative Business Component Design for Complex Data Visualization

When business scenarios become intricate, basic interactions no longer suffice. We introduced new components that combine structured overviews with detailed views, and visual tree‑line connections to clarify data relationships.

(1) Overview Meets Tab Pages – Gaining Both Summary and Detail

Traditional dashboards provided only overviews, requiring clicks for details. By merging dashboards with tab pages, users can switch tabs to see detailed data without leaving the page, with added collapse functionality for small screens.

(2) Tree‑Line Connections for Clear Data Relationships

For complex associations like requirements‑to‑branches in version management, we used tree‑line visualizations to make relationships obvious, adding inline actions for adding or editing links.

3. Sustainable Experience Improvement Strategy

Continuous UX improvement requires more than isolated ideas; it needs a systematic strategy to nurture innovation and experience thinking within design teams.

Cultivate a macro perspective to understand business goals, product objectives, and user needs holistically.

Encourage experimentation beyond immediate requirements.

Recognize users' resistance to change and provide clear benefits to ease adoption.

Regularly consolidate and reuse proven design solutions in component and template libraries.

By consistently applying these principles—simplicity, smoothness, and inspiration—we aim to create a product that resonates deeply with users, turning each incremental improvement into a meaningful step toward a truly "heart‑to‑heart" experience.