ODVVS
Overview
A service website for Oslo & Drammen VVS.
Details
At a glance
- Project type
- Bilingual service website
- My role
- Designed and implemented the website, from structure and visual direction to the bilingual build.
- Category
- Web experiences
- Status
- Live2026
- AI in the product
- No runtime AIThe website has no runtime AI feature.
What I did
- Defined the site structure and the route from a service to a contact request
- Designed the visual direction, hierarchy and responsive layouts
- Implemented the bilingual site with automated performance and visual checks
- Prepared the technical foundation for a later webshop phase
AI in the process
Planned, designed and implemented with AI-assisted development. AI tools helped me explore approaches, draft implementation and tests, and review code. I decided the scope, the structure, what was tested and what shipped.
Built with
- TypeScript: Application code
- Next.js: Framework, routing and image optimisation
- Tailwind CSS: Styling
- next-intl: Norwegian and English routes and content
- Motion: Reveals and interface transitions
- Playwright and Lighthouse CI: Visual regression and performance budgets in CI
- Vercel: Hosting and preview deployments
Visit website(opens in a new tab)Discuss a project like this
Next project
Boligplass
The need
A plumbing, ventilation and service business needed a website that presents its services clearly, gives visitors a direct route to a plumber, and works in both Norwegian and English. It also had to leave room for a later webshop without rebuilding the site.
My contribution
I defined the structure, designed the visual direction and layouts, and implemented the site. The business supplied photography, service descriptions and contact details; the industry experience and certifications shown on the site belong to the company.
Decision
Lead with the people, then the services
- Context
- Trade customers choose a company they trust, and the business had strong photography of its own team.
- What I decided
- The opening screen shows the team at full width, with the four service areas as an image-led row directly underneath and a contact action in the header.
- Trade-off
- A large opening image costs bandwidth, so it is served responsively and the service row stays reachable within the first screen on phones.
How it works
- Two registers in one codebase: brand-led marketing pages and a utility-first shop area, prepared for a later phase.
- Norwegian and English are separate localised routes with shared components, so content changes land in both languages.
- Visual-regression snapshots and Lighthouse budgets run in CI, so a layout change or a performance regression is caught before it deploys.
Validation and delivery
The site was checked against performance budgets and visual snapshots on every change, reviewed at phone and desktop widths, and published as phase one. The webshop is a later phase and is not part of this case.
Outcome and reflection
Published a bilingual service website. The clearest lesson was that a trade business needs fewer, better pages: one strong route from a service to a contact request does more than a large menu.