07 · AppsCode · Web Design
Product site system
AppsCode (opens in a new tab) product sites share one Hugo theme instead of being designed from scratch. I design and maintain it: each product brings its content, the theme brings everything else.
- Product sites on it
- 7Product sites on it
- Page layouts
- 9Page layouts
- Open source
- MITOpen source
- Designer
- Mohin Uddin
- Role
- Web Design, UI Components, Design System
- Timeline
- AppsCode · Ongoing
- Technology
- Hugo, PostCSS, JavaScript
1 theme · 7 sites
- hugo-product-theme (opens in a new tab)live product
- Real screensfrom the live product
- Design and UI code by me
My role
- Design and maintain the shared Hugo theme: layouts, reusable section blocks, styles and SEO for every product site.
- Built 2023 to 2024, maintained since
Key result
1
Update reaches all 7 product sites, instead of 7 separate fixes
At a glance
- 01 · The problem
Seven sites, one designer, and they all have to stay in sync.
Read the problem - 02 · The approach
Separate what’s shared from what’s unique.
See the approach - 03 · The result
One update now reaches every product site.
See the result
01 · Context
AppsCode runs a separate site for each product.
- KubeDB (opens in a new tab), KubeStash (opens in a new tab), KubeVault (opens in a new tab), Voyager (opens in a new tab), Config Syncer (opens in a new tab), KubeGuard (opens in a new tab) and Stash (opens in a new tab).
- Same audience, same brand, same page structure: hero, install, features, pricing, docs.
02 · Challenge
Seven sites, one designer, and they all have to stay in sync.
- Fixing something once should fix it everywhere.
- Each product still needs its own name, color and story.
- Sites have to stay fast: they’re the first thing most users see.
03 · Thinking
Separate what’s shared from what’s unique.
- Shared: layouts, sections, styles, scripts, SEO and analytics.
- Unique: content, product color and a small config file per site.
04 · Design
Every section is a reusable block.
- Hero, installation code, features, social proof, case studies, testimonial, FAQ and call to action.
- Each product sets its own color and content; the layout stays familiar across the fleet.
05 · System
Nine page layouts cover everything a product site needs.
- Docs, articles, features, pricing, datasheet, reference, videos, meet the expert and design system.
- Helpers handle the boring parts once: style and script bundles, meta tags, analytics.
06 · Engineering
A Hugo theme that sites pull in as a Git submodule.
- Each site configures it with config.yaml and data/config.json.
- Assets compile through PostCSS into one minified, fingerprinted stylesheet.
- Open source under MIT, with 170+ commits.
07 · Outcome
One update now reaches every product site.
- All seven run on it: KubeDB, KubeStash, KubeVault, Voyager, Config Syncer, KubeGuard and Stash.
- Config Syncer, KubeVault, Stash and Voyager serve the exact same compiled stylesheet.
- Every site scores 100 for SEO in Lighthouse.
08 · Reflection
Building the system took longer than one site, and paid back by the second.
- Next, I’d add a visual regression check so a change to one block can’t quietly break another site.
From the person who managed this work
“Mohin is not only a talented UI/UX engineer, but also a team player and communicator. He used various tools and methods to conduct user research, create wireframes and prototypes, test usability, and implement feedback.”