A bilingual website for SANVO, an HKEX-listed chemical manufacturer. I designed every screen in Figma and settled the design system with the client first; AI only came in at the end to help build the React front end โ for both the China and North America markets.
SANVO needed a website that could support its business in China and its expansion into North America. The existing site was difficult to navigate, and its structure wasn't built to accommodate a catalog of over 500 products. Without a CMS workflow, maintaining product information across Chinese and English added another layer of work.
I led the work from organizing the product data to planning the CMS and defining API parameters for the development team. I designed the Chinese and English screens in Figma, then used Gemini to help build and iterate on the React and Tailwind front end, using the finished designs as a reference.
I designed the full site in Figma, covering desktop and mobile in both Chinese and English. Before moving into development, I worked through the layouts, interaction states, and how the content would adapt across screen sizes.
Full web + mobile screens, resolved in Figma
One concern that came up early was how the Chinese and English would sit together. The old site used serif typefaces, including Songti for Chinese, but the pairing felt uneven in weight and character, especially when the two languages appeared alongside each other.
I chose Inter for English and Alibaba PuHuiTi for Chinese to give the site a simpler, more consistent feel. The pairing needed to work beyond the headlines: much of the site is product information, with long descriptions and technical details. I worked through the type sizes, weights, and spacing in both languages to keep that content readable and give each version a similar sense of hierarchy.
Design system โ bilingual type scale & brand palette
With the Figma designs in place, I used Gemini to help build the front end in React and Tailwind. Having the screens and responsive layouts worked out beforehand gave me a clear reference for the implementation. My role shifted from designing the pages to checking the build against Figma and refining the details as it came together.
I developed a shared category structure for the catalog so that both language versions followed the same logic. This also shaped how product information would be organized and updated in the CMS. For the vendor handoff, I defined the CMS workflow and API parameters, connecting the page designs to the data needed to support them.
Bilingual site architecture โ desktop overview
The project brought SANVO's Chinese and English sites into a shared design and content structure, with room to expand its 500+ product catalog. The final handoff included the React and Tailwind front end, CMS workflow, and technical documentation for the development vendor, alongside a still life campaign covering four product series.
