TWave

TWave2025

They measure a machine's vibration to know when it is going to fail.

TWave was founded in Llanera, in Asturias, in 2014, and designs and manufactures its own monitoring equipment for industrial machinery. Its T8 samples eight channels at once and watches vibration around the clock, so that a maintenance engineer can see a breakdown coming before the machine stops. Its customers are in wind and hydro power, oil and gas, manufacturing, marine and defence, and a good share of them come through distributors. A website like that has to explain the technology, the products and their applications all at the same time. From Hüan we redesigned it from top to bottom: we analysed the user's path through the site, rethought the information architecture and built a modular system that puts the product at the centre.

The brief

TWave's devices monitor industrial machinery online and anticipate breakdowns. Its website had to explain the technology, the products and their applications all at once. Before drawing any screens, we analysed the user's path through the site and rethought the information architecture. We decided the product would be the centre of the communication. We worked with wireframes and prototypes to validate the structure before the final interface. The screens carry clear calls to action, such as See all products or About the company. That way a visitor gets quickly to what they are looking for.

The system

The TWave logo, printed on its devices, draws the W out of small squares, like a digital signal. We took that square as the module for the whole system. It appears in the background grid that opens What we do and in the four-square navigation indicator. The same W, on its own, heads sections such as Technology. The palette uses two blues: the brand's slate and a near-black navy on the home page panel. Alongside them go black, white and a very pale blue-grey for the grids. The type sheets set Neue Montreal for headlines and IBM Plex Sans as the second family.

The website

The architecture rests on three blocks: Solutions, Technology and Applications. We present them as a full-screen index, numbered and separated by thin rules. The home page opens with a headline phrased as a question, in white over an industrial plant at dusk. Below, a near-black navy panel starts a numbered list of arguments, with Guaranteed Machine Health Diagnostics first. The product page for the T8 series shows the device at large size on the right. The text sits on the left with the See all products link. A 1/3 counter and two arrows step through the carousel views.

The pieces

The T8 page appears in two versions, a line drawing of the device and the render of the unit. The render shows the logo, the eight numbered LED indicators, the ST indicator and the connections. The What we do opener sits on black, with the module squares in near-black blue and the headline in white. We documented the system in a series of element sheets. They gather the logo on slate blue, the grid, the navigation indicator, the two typefaces and the key screens. The home page is also shown in a laptop mockup on concrete.

Worth a closer look

Home page on a laptopThe home page on a laptop on concrete, with Why augury? in white over an industrial plant at dusk. Below, the near-black blue panel opens the numbered arguments. The photo places the visitor in their own sector.

Three-block indexSolutions, Technology and Applications at large size, numbered and separated by thin rules. Three words are enough to understand how the site is organised. Solutions, in a lighter greyish blue, stands out from the rest.

Section openerWhat we do in white on black and six module squares in near-black blue. So dark that they do not compete with the headline, the About the company link or the four-square indicator.

T8 series in detailRender of the T8 series labelled Online Machinery Supervisor, with eight numbered LED indicators, the ST and the connections. Text on the left, a 1/3 counter and See all products: the product fills the screen.

The W as a section markThe W from the logo on its own, in slate blue on white, heading the Technology section. At this size you can see the square we took as the module for the whole site.

Logo on slate blueThe existing TWave logo, in white and centred on the slate blue that sets the palette. The W made of squares is the origin of the module that runs through the whole site.