FROM LOGO
TO THE WEB.
We designed Náutica Cook's new interface to accompany their brand restyling, applying a coherent visual system to their entire catalog — vessels, engines, and jet skis organized by shipyard.
VIEW CASE STUDY ↓
01 — THE CONTEXT
A NEW LOGO.
AN INTERFACE
THAT DIDN'T
MATCH IT.
Náutica Cook had just updated its visual identity with a logo restyling. They already had a website and an established catalog structure organized by shipyard, but the interface did not reflect the new brand.
We stepped into the project at an advanced stage to solve exactly that: translating the restyling to the UI of the entire website, maintaining the existing architecture but raising the visual standard.
02 — THE CHALLENGE
BRINGING THE
INTERFACE UP TO
THE BRAND'S LEVEL.
The brand evolved, the website didn't
The new logo demanded a more modern visual system. The previous interface dragged along an aesthetic that no longer represented the company.
Fragmented UI in the catalog
Vessels, engines, and jet skis looked completely different from each other. A common visual system was missing to bring coherence to the user journey.
Unsupported mobile experience
Most inquiries come from mobile devices, but the mobile experience was not designed for exploring a large catalog.
03 — THE PROCESS
HOW WE
RESOLVED IT.
DECISION 01 · VISUAL SYSTEM
Translating the logo into the UI.
We defined the palette, typography, and hierarchy based on the new logo. A common visual system applicable to all three categories —vessels, engines, and jet skis— so the entire web would speak the same language.
DECISION 02 · SHIPYARD ENTRY
The brand first, the model second.
We designed the category view as a grid of shipyards. The user first identifies the brand they are interested in —Bermuda, Canestrari, Lerch— and accesses the available models from there.
DECISION 03 · MODEL CARD
Clean cards, product focus.
For the model view within a shipyard, we designed a card centered on the product image with the name below. White space, hierarchy, and consistency to make the catalog easy to read on both desktop and mobile.
04 — THE SOLUTION
A UI THAT
ACCOMPANIES
THE JOURNEY.
A visual system aligned with the restyling, shipyard and model cards coherent with each other, and a clear hierarchy from category to product.
05 — THE IMPACT
TANGIBLE
RESULTS.
* Estimated values based on the redesign
06 — LEARNINGS
UI is not decoration:
it translates the brand
into the product.
— PR. DIGITAL STUDIO