How a Unified Branding System Transforms Interactive Platforms: A Design Journey

Project Background

To further expand the value boundary of interactive marketing from C‑end to B‑end, an interactive middle‑platform engine was built to combine common assets and algorithms. Four platform capabilities—template componentization, social graph, precise data marketing, and systematic招商—enable collaborative user operations and enhance product lifecycle value.

Brand Core

JD serves as the brand endorsement, giving the platform brand value by considering brand, user, and service content vitality.

Sub‑platforms such as "Jing Factory", "Precise Marketing Platform", "Social Graph", and "Interactive Marketplace" are integrated under the main "Full‑Sky Stars" platform, each with a unique visual system. Designers must balance openness and collaboration across multiple brands.

How can an effective set of standards be established to help the business systematically build its own platform characteristics? Design standards typically include brand (VI), system platform, and product‑business types.

Logo Design: Brand Association

1. Define the brand positioning of "Full‑Sky Stars" by drawing inspiration from the vast universe to create an inclusive symbolic meaning.

The brainstorming produced keywords such as night sky, laser, universe, network, convergence, and connection, which were grouped into three categories: concrete, conceptual, and abstract.

Concrete concepts are tangible shapes like night sky or laser; conceptual ideas exist in the mind, such as network or convergence; abstract symbols use geometric forms to evoke the platform’s meaning.

After sketching numerous concepts, the most fitting logos were refined, resulting in a final circular logo that conveys order and the vastness of a galaxy, aligning with the marketing strategies of the "Star", "Planet+Satellite", and "Galaxy" plans.

Systematic Visual Identity

The main platform "Full‑Sky Stars" and its sub‑platforms share a core circular element in their logos, creating visual cohesion while allowing each sub‑platform its own character.

Using graphic composition rules, the basic shapes are varied and unified to highlight each sub‑platform’s distinctive traits and enhance interaction between graphics.

Color System

The interface palette draws from the logo’s symbolic colors, using no more than five colors: primary, secondary, and accent (logo) tones.

Product Business Standards

Unlike C‑end products, B‑end middle‑platform products have longer lifecycles and require distributed team design. To maintain UI consistency, an atomic design methodology was adopted, building a mental model of atoms, molecules, organisms, templates, and pages.

1. Define atomic UI components such as form labels, buttons, icons, and headings, considering their applicability across multiple platforms.

2. Combine atoms into molecules (e.g., form groups, tab groups).

3. Assemble molecules into organisms, such as navigation bars or complex forms, establishing a library of organism frameworks.

4. Place organisms and molecules into layout templates to illustrate underlying content structures.

5. After completing the atomic design hierarchy, placeholder content is replaced with real representative content, giving the design system life.

The grid system standardizes layout across platforms, improving development efficiency, consistency, and providing a baseline for future iterations.

In summary, the design process integrates brand and product perspectives, using atomic design to create a modular, systematic UI framework that enhances collaboration, efficiency, and scalability.

Special thanks to the team members who contributed to the Full‑Sky Stars project.

Reference: https://atomicdesign.bradfrost.com/chapter-1/