Everything comes down to the idea that I find official Chinese webpages very boring to look at. I don’t want to drop any names, but just go ahead and see for yourself. I fully appreciate the functionality they provide—it's clear, succinct, and straight to the point. However, the discussion of what makes a good government website design is beyond the scope of this article.
Instead, what I’m really interested in is how to make everyday, mundane tools more interesting for the average and young user to engage with. The more I work as a backend engineer, the more I realize the technology is already there—it’s the frontend user—excuse me, the frontend experience (since you can’t blame the user for everything)—that needs to deliver at full capacity so the user can actually get what they want.
Upon a naive search, I found my target: the China Securities Regulatory Commission.
This is an agency I’m familiar with, and it plays an important role in the stock market. The only goal here is to make the website more appealing. Forget about the functionality—I want to help the organization leader more aggressively promote their brand, and I want young kids to be interested in the content.
Let me be 100% clear. The website is a replication of the Marathon the Game homepage, which has this amazing aesthetic the developers call graphic realism, rooted in Swiss Modernism. All credit goes to the developers and artists at Bungie—their own promotion is the only reason I became so fascinated with this genre.
Some elements you can expect from the Swiss style include grid systems, sans-serif typefaces, asymmetrical layouts, and minimalism with generous use of white space, just to name a few.
When you first land on the page, there’s a rolling video playing in the background, a red sidebar on the left, and a navibar on top, with the most noticeable brand located at the bottom left. The video is promotional material from Amazing China, a 2017 official documentary. It captures the modern and majestic feeling that showcases the best of Chinese culture. I think putting it in the intro is such a great fit for the theme of the webpage. Using video is a great way to keep eyeballs engaged when first opening the site. It’s almost like the trick where Gen Alphas need a Subway Surfers clip running alongside their homework just to pay attention. The video was downloaded from Bilibili and had the watermark removed using ByteDance’s CapCut, which is super convenient. To optimize a bit of user experience, I reduced the video quality and added a static cover image before the actual video loads and plays
I used the same red from the official website and set it as the “brand color” of this replica, working in conjunction with black, white, and some grey to achieve the overall sleek look. This red not only is one of the most celebrated colors in Chinese culture for obvious reasons—it’s also what market participants will see when a stock goes up. So yeah, you really want to use red. This red almost gives off a neon vibe—although I adjusted it to a slightly darker tone so it’s not fully neon—it still really pops and reminds me of a cyberpunk-like aesthetic. I think keeping the color palette simple and engaging makes everything feel refreshing.
As for the pattern on the left sidebar, I put it together myself using Figma. Some explanation here:
Overall, you want the patterns to look futuristic and even hard to read to some extent. But that’s the point—it makes you wonder what the symbols mean and makes you want to dig deeper. A similar abstract pattern shows up in the dots and arrows of the top navibar. The square brackets add geometric flair to the whole look.
