How Suning.com Revamped Its Mobile App Home Page for Better UX

Suning.com, a leading Chinese e‑commerce platform, identified diverse user needs—targeted shopping, casual browsing, video/live‑stream entertainment—and set out to turn those expectations into a cohesive mobile‑app experience.

Design Approach

The redesign pursued three main objectives:

Increase home‑page efficiency from a platform perspective.

Make content display more three‑dimensional, with clear hierarchy, spacious layout and appropriate whitespace.

Avoid overly unique designs for each floor; instead emphasize content, brand presence, and a unified visual language.

Visually, the team aimed for clearer floor segmentation, distinctive classification scenes, and stronger content exposure.

Design Highlights

Organized Product Flow and Optimized Layout

The new home page adds a headline section and scenario‑based categories, while streamlining the overall layout. The previous version suffered from crowded small elements and unclear floor classification; the redesign unifies vertical grids for strict alignment and horizontal grids for consistent rhythm, improving browsing efficiency and hierarchy clarity.

More Transparent Interface

The redesign adopts a “Complexion Reduction” style popularized in 2016, featuring larger bold titles, simplified icons, and a black‑white color scheme.

iPhone X Adaptation

Two layout options were explored. Option 1 separates search and banner, filling the extra top space with a matching color, but reduces visible content and loses immersion. Option 2 preserves an immersive experience and maximizes first‑screen content by using a cropping technique that requires only one banner design, lowering operational cost. The team selected Option 2.

Scene‑Based Categorization

From the user’s perspective, five scenario floors were created: Quality Trend, Shopping Deals, Lifestyle, Home, and Smart Finance. Each floor combines a title with a mood image, and the app records browsing behavior to surface preferred categories, achieving a personalized “thousands of faces” effect.

Top‑Down Sparse Layout

Beyond the third screen, the layout reduces density by adding whitespace, allowing users to locate information quickly. The popular market floor was changed to a three‑module row to lower per‑screen information load.

Modular Construction

Inspired by LEGO, the home page uses interchangeable modules that can be edited, replaced, or recombined, facilitating rapid business‑framework adjustments and promotional atmospheres.

Pull‑to‑Refresh and Second‑Floor Interaction

The pull‑to‑refresh interaction was refined, adding a second‑floor opening feature with updated copy and height for a smoother experience.

Conclusion

The home‑page overhaul introduces a new design language that satisfies product requirements while delivering a fresher user experience, aiming to launch a revitalized version before the year ends.