Revamping a Mobile App Download Page: Design Insights and Visual Strategies

1. Product Background

"伴正事" is an enterprise service software from 兆日科技, offering functions such as administrative office, travel plans, and procurement to improve efficiency for small and medium businesses. The download page serves as a key touchpoint for mobile product promotion, influencing brand perception.

Due to outdated design, inconsistent style, and lack of modern trends, a visual upgrade was needed.

2. How to Redesign the Download Page

Requirement Analysis

Key issues identified include outdated visual style, inconsistent iconography, unbalanced hierarchy, excessive color saturation, and lack of brand identity. From a user perspective, the page failed to clearly differentiate the three core functions: collaborative office, daily communication, and information security.

Redesign Goals

The goals are visual upgrade, brand communication, and user attraction.

3. Design Deconstruction

Inspiration Collection

Analyzed numerous domestic and international cases, identifying three main web/download page styles: Microsoft’s glassy aesthetic, tech‑minimal style (e.g., Feishu), and 3D illustration linked to the brand. The final direction combines a diffused glass effect with realistic mockups and 3D illustrations.

4. Visual Specification Optimization

1. Layout

The page adopts a full‑screen, single‑column layout with a 12‑grid system to structure content and provide ample space for imagery.

2. Color

The primary brand color is a blue‑purple used for buttons and headings. Secondary colors occupy about 30% of the visual space, chosen as adjacent hues (green) to maintain harmony while adding contrast.

3. Typography

Uses the sans‑serif Source Han Sans for readability and consistency, with color variations to emphasize hierarchy.

4. Icons

Core function icons employ a frosted‑glass effect for prominence, while generic icons use linear monochrome styles with unified corner radii and strokes.

5. Emotional Design

2.5D illustrations depict core business scenarios (communication, approval, finance, shopping) to differentiate functions and convey a sense of depth.

6. Hierarchy

Applies Gestalt’s proximity principle to group related elements, improving scanability and reducing visual clutter.

7. Design Outcomes

Two visual concepts were produced and reviewed, then handed to development for implementation.

5. Reflection and Summary

The redesign focused on visual style; future work should address interaction design to further boost download conversion. The new visual language will guide a broader brand redesign across the product suite.