Mastering iOS14 Widgets & Clips: JD App Design Strategies and Real-World Use Cases
This article explores iOS 14’s new Widgets and Clips, detailing their definitions, design principles, and practical JD app scenarios—including logistics, store updates, flash sales, and live streams—while also presenting design strategies for lightweight, brand‑focused Clips such as in‑store QR scanning, courier handling, and coupon assistance.
01 Introduction
With the release of iOS 14, Widgets and Clips become key features. This article presents design research and strategies for JD’s implementation of these components.
What are Widgets?
Widgets are home‑screen components that can be placed in various sizes (small, medium, large) and stacked, providing concise, efficient, content‑focused information.
Apple offers three widget sizes, giving designers flexibility.
What are Clips?
Clips are lightweight, instant‑use mini‑apps that surface specific tasks without requiring full app installation, similar to mini‑programs.
Widget Design Principles
Simplicity : clear interface, minimal information.
Efficiency : enable quick app feature launch.
Content‑centric : focus on core, timely information.
Widget Design Guidelines
Three design pillars: Individuality , Information , Scenario .
Individuality : blend personal and brand identity, using app icons and contextual scenes.
Information : maintain coherent layout across sizes; offer single‑info and multi‑info styles.
Scenario : anticipate user needs and present relevant content at the right moment.
Widget Use Cases for JD
1. Order Logistics : a “logistics widget” lets users track shipments directly from the home screen.
2. Store New Arrivals : stacked store widgets display new products, allowing quick browsing.
3. Flash Sale : a mini‑home page presents daily flash‑sale items and occasional red‑packet rewards.
4. Live Broadcast : a live‑stream widget recommends popular streams and supports picture‑in‑picture playback.
Clips Design Strategy
Clips should be brand‑reinforcing , lightweight , and scenario‑based .
Clips Framework
Three sections: custom content header, navigation area with title/buttons, and developer info with App Store link.
Clips Scenarios for JD
In‑store QR Scan : users scan a product QR code to compare prices and complete a three‑step purchase flow using Apple ID and Apple Pay.
Courier Shipment : a streamlined clip lets users initiate and track shipments with a single scan.
Coupon Assistant : users open the clip via link or QR code to instantly claim coupons and purchase with them.
Conclusion
The design research outlines how JD can leverage iOS 14 Widgets and Clips across logistics, store updates, flash sales, live streams, and three Clip scenarios, providing lightweight, brand‑aligned experiences. Implementation is ongoing, and the team will continue to refine these features before the official launch.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
JD.com Experience Design Center
Professional, creative, passionate about design. The JD.com User Experience Design Department is committed to creating better e-commerce shopping experiences.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.