V2COM — Portable Workspace Commerce
A redesign concept for a portable multi-screen hardware range — built around the fact that customers don't know which model fits their laptop until someone helps them work it out.
01 — Overview
V2COM supplies portable monitor extenders and multi-screen workstations — dual, triple and quad-screen setups that turn a laptop into a desk. The catalogue is large and technical, and the honest problem is that the hardest question a customer has is "will this work with my machine?" This project is an independent redesign concept built to solve that.
02 — The Challenge
A grid of 48 similar-looking monitors is not a buying experience. Specifications are dense, compatibility is the real blocker to purchase, and the default answer — a comparison table with empty cells — hides gaps instead of exposing them. The redesign had to guide a first-time buyer to one correct model without inventing facts.
03 — The Approach
Browse by working pattern, not just specification: two screens, three screens, four screens. Then a guided finder that asks five questions — device, work, screens wanted, touch, portability — and matches answers against published specifications to explain why a model fits. Where a policy isn't published, the site says so and points to the team rather than guessing.
04 — What I Built
- Full catalogue structure of 48 products across seven configurations with filtering and search
- Find Your Setup guided tool — five inputs matched against real specifications with reasoning shown
- Comparison view that displays only what each product actually publishes, making gaps visible
- Collection pages by screen count and by form factor — folding, touch, transformer, accessories
- Product pages with gallery, option variants, specifications and add-to-bag
- Use-case storytelling for the professional, the creator and the remote worker
- Support centre with compatibility guide, FAQ and WhatsApp-first contact routes
- Cart and multi-region storefront logic with AED pricing and store-region messaging
- Clear demo scope disclosure so it is never mistaken for the official store
05 — Design Direction
Technical but human. Dark neutral surfaces so product photography reads clearly, a single accent used only for actions, and specification data presented as structured content rather than paragraph text. Confident without being loud.
06 — User Experience
Land → understand the range in one screen → pick how many screens you need → let the finder narrow it down → compare the shortlist → check compatibility → order. Every product answer links back to what it was based on, so the recommendation is never a black box.
07 — Technical Work
Astro + Tailwind CSS on Cloudflare Pages. Structured product data driving collection, comparison and finder logic from one source, so the specification shown in the table is always the same value the finder matched against. Accessible filters, keyboard-navigable comparison and performance-focused image handling across a 48-SKU catalogue.
08 — Final Result
A concept that turns a compatibility problem into a guided decision. Instead of "here are 48 products", it becomes "here is the one that fits your laptop, and here is exactly why" — then hands the compatibility question to the team when it needs a human.