Skip to content
Imagio Labs

Work / 06 Upcoming / Mobile

XTRA

A manufacturer that answers the phone

A young local hardware brand taken from a list of devices to a manufacturer with a product story, a press desk and a dealer network.

XTRA · In development

01 The engagement

XTRA is a new mobile experience currently taking shape. Imagio is building the brand’s digital experience, the product catalogue and the supporting surfaces a phone brand genuinely needs.

02 The surface

XTRA product artwork on a transparent background: a hand rendered as a dark silhouette holding a smartphone front-on, its bezel dark and its screen a blank pale panel with a pill-shaped camera cutout across the top of the display.
XTRA — supplied artwork
PROVIDED BY THE CLIENT · PUBLISHED UNALTERED · THE FINISHED SITE IS NOT YET SHOWN

03 The problem
and the idea

The problem. A brand that designs and manufactures its own hardware and stands behind it cannot be represented by a shop that lists devices — that throws away the one thing it actually has. The site had to explain a range that keeps widening, answer the questions five different people arrive with, and do all of it without a single figure nobody has signed off.

The idea. Give a young local hardware brand the same clarity online that its manufacturing deserves: a site that explains the range, tells each product’s story, knows who to send a reader to next, and never has to invent a number it does not have.

04 The work

What we did,
in order.

A blank plateA wireframeStill building

01 · A hardware brand needs more than a shopA buyer wants the catalogue and the story of a device; a journalist wants press; an owner three months in wants support and a warranty answer; someone considering a job wants careers; someone in a district wants to know where the nearest dealer is. Each of those got a surface of its own, each answering exactly one question.
02 · A catalogue that survives the next modelThe range runs from key phones to smartphones, tablets and audio wearables, so specifications are an ordered list of label and value pairs rather than a fixed object. A rigid shape across that range would be mostly empty fields, and the difference between two models would be carried by the shape of the data instead of by what the models are.
03 · The photography rulePhotography is an optional field on a product, not an assumption. Where a model has real photography the story page uses it; where it does not, the page falls back to a drawn vector device rather than showing a gap — and the choreography around it does not change, so real photography can be swapped in later without touching the scenes.
04 · A specification that counts up without lyingHighlight figures are stored as the manufacturer states them, with the number first, so a value that opens with a figure can be counted up as it enters while the rest of the line — the inch mark, the milliamp suffix, the unit — is rendered exactly as written. It is a small rule, and it is the difference between a page that counts and a page that invents.

05 Craft & sequencing

The decisions,
and why.

Why the scene is a prototype and not a mock-upThe brief asks for a building metaphor rather than something pretending to be complete, and the real asset makes that literal: the client’s own artwork is a hand holding a handset with a blank screen. The wireframe is drawn onto that blank plate, and it deliberately does not finish — three regions of it are never drawn, because those three are the parts that are not built yet.
Why the supporting surfaces are in scopeSupport, press, dealers and careers are not filler around the catalogue; for a brand that manufactures locally they are the proof. Putting them in the same system as the product pages means the company sounds like one company on every one of them, which is most of what a first impression of a young brand has to get right.
Why no outcome is claimed yetThe imagery on this case is real and supplied by the client. The finished experience is not, so no outcome is stated here and no link is published — the site has not launched, and a link to a page that is not there would be a claim. What is missing is missing.

06 The scope

The part we held

Brand and digital experience design; product presentation and catalogue architecture; supporting content surfaces; design and development.

ClientXTRA — a Salextra Limited brand
BuildNext.js · React · TypeScript · GSAP ScrollTrigger · Tailwind
StatusUpcoming / in development
PublicationNot launched — no public link exists yet, and none has been invented

07 Through the method

Observe. Think.
Imagine. Launch.

OBSERVEA brand that designs and manufactures its own hardware cannot be represented by a shop that lists devices — the making is the differentiator and none of it was being said.
THINKThe site has to explain a widening range and answer five different kinds of arrival without inventing a single figure about the products.
IMAGINEThe same clarity online that the manufacturing deserves — a range you can read rather than a grid you have to decode.
DESIGNOne photography rule across every product, and each device told rather than listed.
BUILDA catalogue model that survives the next model, so the next device is a content change and not a redesign.
TESTWhy the scene is a prototype and not a mock-up, and why no outcome is claimed for it yet.
LAUNCHIn development. Nothing is published, and nothing is invented.

08 Other pages, captured

The rest of the surface.

XTRA — X10 campaignX10 campaign · XTRA
The entry model introduced as a product with a story to tell, not as a row in a price list.
XTRA — X20 campaignX20 campaign · XTRA
The flagship given the same treatment at a higher pitch — one photography rule across the range, so the series reads as one brand.
XTRA — Product filmProduct film · XTRA
The device in a hand rather than floating on a gradient: the moment the range stops being a spec and becomes a thing someone owns.

Upcoming. The experience is being built; the finished site is not shown here and nothing is claimed about it.

← SONJATRUST VENTURE →All engagements