How We Revamped the WeChat Open Platform’s Visual Design for Better Developer Experience

Background

The author delayed writing for two weeks but finally shares a summary of the visual redesign of the WeChat Open Platform, a tool‑focused website that needed both visual and interaction improvements.

Problem 1: Over‑layered navigation

Before the redesign, the platform’s top bar and breadcrumb navigation had up to six levels, creating a cluttered experience. The homepage showed a two‑level navigation, while inner pages could reach three, four, five, or six layers.

Solution: Simplify the hierarchy to a single‑layer homepage, using a large banner and three main sections—navigation, banner showcase, and feature display. This re‑allocation of space made the content more direct.

Problem 2: Inconsistent branding with other WeChat web pages

The other WeChat sites (Public Platform, Mac version, Web version, iPad version) have adopted a light, fresh aesthetic, while the Open Platform still looked heavy and outdated. The redesign aimed to align the overall style with these sites while preserving the platform’s simplicity.

Design direction included using the main WeChat colors—fresh green, elegant deep blue, and clean white—plus lighter elements like pale wood textures.

Design Exploration

Multiple draft images were created to test background graphics, but none achieved the desired high‑end feel. Ultimately, a cinematic‑style hero image was chosen to convey the platform’s atmosphere and highlight key content.

Typography and Layout

The redesign increased typographic contrast while keeping the text readable. Most text uses Microsoft Yahei, which renders well on modern Windows systems. Banner text is sliced as images to avoid font‑loading issues, though this can affect load speed and maintenance.

Design Reflection

Over a two‑month period, the team considered the risk of over‑designing a resource‑oriented site. The goal is to let developers quickly find and manage resources without visual clutter. Feedback from colleagues indicated that while functional requirements dominate, a pleasant visual experience is still valuable.

Conclusion

The platform still lacks full responsive design and retina‑screen optimization, but further improvements are planned. Developers are encouraged to use the new interface and provide feedback for continued enhancement.