consumer-electronics · web-design

Modula: electronics website design for a modular laptop brand

A brand that sells modular laptops you can open, repair and upgrade. We designed and built its whole website: product pages, a laptop configurator, a parts marketplace and repair guides.

Product website design that explains a modular laptop

A modular laptop needs more explaining than a spec sheet. The home page leads with the promise, one screwdriver, and moves from model families to parts, repair and trade-in.

Modula home page with a dark hero, modular laptop photo and a lime call to action — Home page: the promise first, then models, parts and repair.

Scrolling the home page from hero to footer.

A scroll-driven exploded view of a modular laptop

As visitors scroll, an original line drawing of the laptop separates into display, keyboard, memory, mainboard, battery and port cards, each labelled and linked to the shop. It replaces a static hero with proof that every part is replaceable.

The exploded view, driven by scroll.

A laptop configurator people can finish

Visitors choose a DIY Edition or a pre-built laptop, then pick processor, memory, storage and ports. The total updates as they go, the port-card bays fill visibly, and a sticky bar keeps add-to-bag in reach.

Laptop configurator with edition choice, live estimated total and monthly payment options — The configurator total updates as options change.

Building a laptop from DIY kit to bag.

Build your own laptop, one clear step at a time

Every option shows its price difference and a plain-language note. 'Bring your own' choices make the DIY Edition feel achievable for first-time builders.

Configurator option cards with price differences and a port-card bay counter — Option cards show price differences and a visual bay counter.

Ecommerce filters for a laptop with replaceable parts

The parts marketplace filters by category, compatible model, condition and price. Counts update with each choice, and every filter is saved in the URL so results can be shared.

Laptop parts listing with filter groups, active filter chips and a product grid — Faceted filters with live counts and shareable URLs.

iltering parts by model, condition and price.

Product page web design for upgrades

Each product page answers the real question, 'will this fit my laptop?', with a compatibility table next to specs, reviews and the matching repair guide.

Product page for a USB-C port card with gallery, buy box and compatibility table — Compatibility sits beside specs on every product page.

A checker for laptops that can be upgraded

Pick a model and generation, and the upgrade checker sorts every part into fits, needs an adapter or not compatible.

Upgrade checker results showing parts marked fits, needs adapter or not compatible — The upgrade checker sorts every part by fit.

From model to compatible parts in three clicks.

Repair guides for a repairable notebook

Step-by-step guides carry a safety notice, tools and parts lists linked to the shop, and numbered photos.

Repair guide with safety notice, tools and parts list and numbered photo steps — Repair guides link every part back to the shop.

A trade-in flow for an old laptop

Two questions return a sample credit estimate, or a free-recycling path for devices past their value.

Trade-in estimator showing a sample credit for a laptop in good condition — Two questions, one sample estimate.

Two answers, one estimate.

A design system behind the electronics website

Graphite, circuit green and an electric-lime accent. Every colour, font, string and image lives in one place, so the site can be rebranded or translated without touching components.

Styleguide page with colour tokens, type scale, buttons and form components — One design system drives every page.

Responsive from phone to desktop

On phones, filters move into a drawer, the configurator keeps its buy bar, and every control is at least 44 pixels tall.

Phone screens of the Modula home, configurator and filters drawer — hone layouts: drawers, sticky buy bar and large tap targets.

The phone experience.

We delivered

Sitemap audit and template plan
UX architecture for 18 page templates
Design system: tokens, components and a live styleguide
Laptop configurator, filters, compatibility checker and trade-in flow
Accessible front end with structured data on every page
Region-ready setup for new brands and languages

Planning a product website?

We design and build websites for consumer electronics and product brands, from configurators to repair hubs.

Frequently asked questions

Is Modula a real company?

No. Modula is a concept brand we created for this project. All products, prices and reviews are sample content.

What did the electronics website design include?

X architecture, a design system, page templates and a working front end with a configurator, product filters, a compatibility checker, repair guides and a trade-in flow.

Can you build a laptop configurator or product website for my brand?

Yes. We design and develop product websites and configurators for electronics brands. Contact us to discuss your project.

← Projects