Work Concept online store
ORIVA
A concept store for a fictional acoustic atelier: 18 pages in Russian, from a filtered catalogue and product page through the cart to a three-step checkout, plus boutiques on a map and a listening room.
Overview
I build concept sites to show range in genres where I have no client project yet. ORIVA is one of them: an online store for a fictional acoustic atelier that sells headphones, speakers, amplifiers, vinyl and accessories. The brand, the products, the prices and the boutiques are invented, and the site is written in Russian.
The store had to work from start to finish, not just look premium. A buyer should be able to narrow the catalogue, pick a colour on the product page, apply a promo code, get through a checkout that checks every field and see an order confirmation. A visitor who is not ready to buy should be able to find a boutique and book a listening session.
18
pages, from the home page to checkout and the 404
Source: Site source files, 22 Sep 2026
13
products in the catalogue, with filters and sorting
Source: Site source files, 22 Sep 2026
6
cities with boutiques on the interactive map
Source: Site source files, 22 Sep 2026
66 / 97
Lighthouse performance of the home page, mobile / desktop
Source: Lighthouse 13.4, 22 Sep 2026
Approach
18 pages: home, catalogue, product, cart, checkout, order confirmation, account, wishlist, journal, boutiques, atelier, delivery, support, contacts, privacy, terms, cookies and a 404. The catalogue holds 13 products and filters them by category, price, colour and flags, with sorting and chips that show the active filters. The product page has a gallery with a lightbox, colour and quantity, accordions, reviews and related items.
The cart accepts 2 demo promo codes and shows a progress bar towards free delivery from 30,000 roubles, a demo threshold. Checkout has three steps with validation: contacts, delivery and payment. Boutiques in 6 cities sit on an interactive map with booking for a listening session, and the listening room is a player drawn as a spinning record with a tonearm: 5 tracks, a seek bar, volume and auto-advance.
The home page opens on a video hero and continues as a scroll story with counters; motion runs on GSAP with ScrollTrigger and Lenis smooth scrolling. The site is plain HTML, CSS and JavaScript with no build step: the header, footer and overlays are rendered from one shared script, and accounts, carts and bookings stay in the browser’s localStorage — nothing is sent anywhere.
Gallery
Results
What exists now is a working concept: 18 pages, 13 products, boutiques in 6 cities and a listening room with 5 tracks, usable from the catalogue to the order confirmation without a server. The checks of 22 September 2026 across 17 pages found one H1 on each of them, alt text on 100% of images and 0 broken internal links.
Lighthouse gave the home page SEO 100 and accessibility 99 on both mobile and desktop, and performance 97 on desktop against 66 on mobile. The mobile score is held back by weight: the page sends 12.8 MB to a phone, including a full-HD hero video and images, and LCP comes in at 7.3 s.
SEO review
On 22 September 2026 Lighthouse gave the home page SEO 100 on mobile and desktop, with performance 66 on mobile (LCP 7.3 s, 12.8 MB) and 97 on desktop (LCP 1.3 s). Across 17 rendered pages (all but the 404) the basics pass, but canonical, Open Graph and JSON-LD are missing on all 17 and there is no sitemap.xml or robots.txt.
Lighthouse
Mobile
- Performance: 66 / 100
- Accessibility: 99 / 100
- Best practices: 77 / 100
- SEO: 100 / 100
- LCP
- 7.3 s
- CLS
- 0
- TBT
- 68 ms
- Weight
- 13 MB
Desktop
- Performance: 97 / 100
- Accessibility: 99 / 100
- Best practices: 77 / 100
- SEO: 100 / 100
- LCP
- 1.3 s
- CLS
- 0.001
- TBT
- 0 ms
- Weight
- 11 MB
In place: one H1 on 17 of 17 pages, the ru language declared, no sideways scroll at 390 px, alt text on 100% of images and 0 broken internal links; Lighthouse accessibility is 99, and CLS is 0 on mobile and 0.001 on desktop. Partly in place: 16 of 17 titles are unique, and 8 of 17 descriptions are 70–170 characters long.
Before launch on a real domain: canonical URLs and Open Graph titles and images on all 17 pages; JSON-LD with Product and Offer (price, availability) and AggregateRating on product pages, plus BreadcrumbList, Organization and Store/LocalBusiness for the boutiques; sitemap.xml and robots.txt; titles of 30–65 characters (only 4 of 17 fit now) and descriptions of 70–170 characters on the other 9 pages; self-hosted video and media, which removes the Pexels CDN’s third-party cookies that hold Best practices at 77; and a lighter mobile hero to cut the 12.8 MB page and the 7.3 s LCP.
| Check | Result | Status |
|---|---|---|
| Unique page titles | 16/17 | Needs work |
| Title length | 4/17 | Fail |
| Meta descriptions | 8/17 | Needs work |
| One H1 per page | 17/17 | Pass |
| Language attribute | ru | Pass |
| Mobile-friendly | 390 px | Pass |
| Image alt text | 100% | Pass |
| Broken internal links | 0 | Pass |
| Canonical URLs | 0/17 | Fail |
| Open Graph tags | 0/17 | Fail |
| Structured data | 0/17 | Fail |
| XML sitemap | 0/2 | Fail |
What this does not prove
ORIVA is a concept I built at VITON13 to show range, not a commissioned project. The atelier, its products, prices, reviews and boutiques are fictional. The site has no domain, no visitors, no search traffic and no sales, so it proves nothing about conversion or revenue. Photos and video are licensed stock from Unsplash and Pexels.
The Lighthouse figures are lab measurements of the home page on one day, not data from real users. A score of 100 for SEO covers the basics only: canonical URLs, Open Graph, JSON-LD, sitemap.xml and robots.txt are not in place. Checkout takes no payment and sends nothing: orders and accounts exist only in the visitor’s browser.
Want something like this? Tell me about your project.
