How B‑End and C‑End Design Strategies Converge: A Real‑World Delivery App Case Study

1. Differences Between B‑End and C‑End Products

While B‑end products focus on improving user efficiency and pure functional experience, C‑end products emphasize visual presentation, operational strategies, and conversion optimization. Both aim to reduce costs and increase efficiency, but they differ in content, interaction, and visual presentation.

2. Project Background Overview

1. Background Introduction

1.1 What is 京象 – a mobile app used by delivery personnel to scan waybills, contact customers, and perform on‑site installation for large‑item deliveries.

1.2 User Profile – third‑party drivers and couriers (≈20,000 users, growing).

1.3 Project Background – Existing “delivery‑plus‑installation” service lacked synchronization of delivery and installation times, leading to low sync rates.

1.4 Existing Problems – Delivery and installation information were not shared, resulting in a 3.8% delivery‑installation sync rate and a 20.2% same‑day sync rate.

1.5 Solution – Build an information‑sharing channel and incentivize couriers with a 10% commission bonus when delivery and installation times are synchronized.

2. Core Objectives

Integrate logistics with the 3CS (3C Service) system, allowing couriers to tag orders for delivery‑installation sync, record expected delivery times in 京工巧匠, and receive commissions for timely completion, thereby enhancing the overall business flow and conversion.

3. Implementation Plan

Add a C‑end promotional activity to the B‑end 京象 app. The UI consists of two parts: a homepage card introducing the “delivery time sync” activity with commission incentives, and an H5 detail page that explains the activity rules.

3. Visual Creativity

1. Creative Process

1.1 Flow Diagram – UI and H5 components are designed to reflect the activity’s theme and maintain visual consistency.

1.2 Keyword Extraction – Passion, Trend, Incentive.

1.3 Mood Board – 3‑dimensional, skeuomorphic, vibrant colors.

2. Design Details

2.1 H5 Main KV Details – Hand‑drawn sketches, 3D modeling, HDR lighting, and post‑processing to create the final visual.

2.2 Visual Atmosphere Details – 3D wide‑angle view, colors (red, orange, gold, purple), mixed materials, and a central piggy bank emitting red packets and coins.

2.3 UI Functional Details – Guide couriers to fill in delivery time, informing them of the commission reward.

4. Summary and Insights

1. Personal Summary

The visual assets were created using Blender for modeling and Photoshop for post‑production. Due to time constraints, the H5 copy was first delivered as a demo and later finalized by the product team. The design balances operational activation with functional clarity.

2. Personal Insights

Effective design relies on data, not intuition. Continuous communication with product managers and post‑launch data tracking are essential to validate whether the visual and interaction design meet user experience goals.