InOut: de botiga de plantilla a consergeria d'elit

InOut és una consergeria per a propietaris de segones residències i clients d'alt nivell a Andorra. N'hem redissenyat la web de zero amb codi propi: d'una botiga genèrica sobre plantilla Shopify a una presència premium, ràpida i professional, a l'altura del servei que ofereix.

El punt de partida

InOut és el nostre projecte insígnia a Andorra: un servei de consergeria pensat per a qui gestiona un patrimoni a distància i necessita un interlocutor de confiança sobre el terreny. El client ideal no és el comprador impulsiu d'un e-commerce; és un propietari internacional que decideix en els primers segons si la marca que té al davant està a l'altura del que administra. En aquest context, la web no és un fullet opcional: és el primer filtre de serietat abans que ningú escrigui un missatge.

La web de partida, però, explicava una altra història. Partia d'una botiga muntada sobre una plantilla de Shopify, amb l'estètica d'un e-commerce genèric: catàleg de productes, botons d'«afegir a la cistella», una jerarquia visual pensada per vendre objectes i no per presentar un servei d'elit. Qui hi aterrava per primera vegada veia una botiga en línia qualsevol, no la porta d'entrada a una consergeria d'alt nivell. El desajust entre el servei real i la superfície digital era evident al primer scroll.

Aquest desajust no és un detall cosmètic. En un mercat on els negocis d'hospitality, immobiliària i gestió de patrimoni competeixen per la mateixa atenció —sovint en la mateixa sessió del mateix mòbil—, la primera impressió digital forma part del servei. Una plantilla reconeixible, tipografia per defecte i una navegació de botiga comuniquen just el contrari d'exclusivitat, per ben resolt que estigui el treball real de darrere. És la mateixa bretxa que veiem en moltes consergeries d'elit a Andorra i negocis d'alt nivell: oferta premium, presència digital genèrica.

El problema no era «falta de pàgines» ni «falta de productes al catàleg». Era de posicionament. L'arquitectura, el to i el tractament visual empenyien InOut cap al marc mental d'una botiga d'objectes, quan el que es ven és atenció, discreció i criteri. Un visitant que arriba amb l'expectativa d'un servei d'elit i es troba amb la lògica d'una cistella de la compra no es queda a llegir el «qui som»: tanca la pestanya. Calia reconstruir la web des de la lògica del servei, no des de la lògica de la cistella.

També importava el to. Un e-commerce genèric parla d'stock, d'enviaments i de botons de compra. Una consergeria d'elit parla de confiança, de disponibilitat i d'un interlocutor que entén el context del propietari. El copy, la jerarquia de titulars i l'ordre de les seccions havien de deixar de competir amb un catàleg i començar a conduir una conversa de servei. Sense inventar una veu artificial: simplement alineant el que es veu amb el que InOut és de debò.

Decisions de disseny

El redisseny parteix de zero: codi propi, sense plantilla pel mig. Aquesta decisió no és un caprici tècnic; és la condició perquè el disseny no quedi limitat pel que el constructor permet, i perquè el resultat no s'assembli a altres dues-centes webs fetes amb el mateix tema de Shopify. Amb codi a mida controlem la semàntica, el pes de cada pàgina i el comportament al mòbil sense barallar-nos amb capes d'un constructor.

En tipografia, vam substituir la font per defecte del constructor per una composició editorial: jerarquia clara, contrast entre display i cos, ritme de lectura pensat per a pantalles de mòbil i d'escriptori. L'objectiu no és «veure's més bonic» en abstracte; és que un visitant entengui en segons de què va el servei, sense barallar-se amb un layout de catàleg. Els titulars marquen el territori de la marca; el cos sosté l'explicació sense soroll visual.

En fotografia, el pas del stock i les imatges de producte a un tractament cinematogràfic propi canvia el registre del tot. La imatge deixa de ser un farciment de plantilla i passa a sostenir la promesa de la marca: cura, ambientació, nivell. En un servei de consergeria, la fotografia no és decoració; és prova de criteri. El visitant no necessita un dossier de 40 pàgines: necessita sentir, d'un cop d'ull, que al darrere hi ha un estàndard alt.

L'arquitectura de navegació es va reescriure per presentar el servei com el que és —una consergeria d'alt nivell— i no com una botiga. Menys fricció de catàleg, més claredat sobre què s'ofereix, a qui i com es contacta. El propietari que gestiona el seu patrimoni des d'un altre país no vol recórrer deu pàgines de productes: vol entendre la proposta i parlar amb algú de confiança sense formularis interminables ni esperes de correu. WhatsApp com a canal directe forma part d'aquesta fricció mínima; la web prepara la conversa, no la substitueix amb un embut de blocs genèrics.

Cada decisió visual i d'informació es va mesurar amb la mateixa pregunta: això ajuda que un client internacional confii en segons, o el frena? Si no ajuda, no hi entra. Aquest criteri és el mateix que apliquem a la resta de la feina de Seuweb per a marques que no es poden permetre una primera impressió mediocre. No es tracta d'acumular efectes: es tracta que cada element —tipus, foto, secció, CTA— treballi en la mateixa direcció.

El resultat d'aquest filtre és una web més sòbria i més clara. Hi ha menys elements que «omplen» i més elements que decideixen: promesa, prova visual, contacte. En un projecte d'aquest nivell, la contenció forma part del craft. Una consergeria d'elit no necessita cridar a la pantalla; necessita que la pantalla no destorbi.

Resultats

El resultat es pot veure i mesurar. En producció (inoutad.pages.dev), Lighthouse reporta rendiment 97, accessibilitat 96, bones pràctiques 100 i SEO 100. El LCP és de 2,1 s i el CLS és 0.

Traduit a experiència humana: la pàgina carrega a l'instant, es manté estable mentre es renderitza (sense salts de layout que desorientin) i es llegeix com una web cuidada, no com un constructor amb plugins de més. Un propietari que entra des del mòbil no espera que «acabi de carregar el tema»; entra i entén. Això no és un luxe tècnic: és la diferència entre generar confiança o quedar descartat a la mateixa sessió.

Un LCP de 2,1 s i un CLS de 0 es senten com una pàgina que no baralla amb el visitant. No hi ha empentes de contingut, no hi ha la sensació que «encara s'està muntant la plantilla». L'accessibilitat alta i el SEO en 100 no són un adorn d'informe: són la base perquè la web es pugui fer servir, indexar i llegir amb solidesa tècnica. Els números de Lighthouse no són un trofeu abstracte; són la prova que el codi propi i un hosting ben servit es noten en l'experiència real.

Quan un projecte es pressuposta a mida al pla Marca, part del que s'està comprant és precisament aquesta base —no un tema farcit de blocs. La qualitat percebuda i la qualitat mesurada van juntes: es veu premium perquè està construïda amb criteri, i és fiable perquè no depèn de capes opaques d'un constructor. Si t'interessa el marc d'inversió d'un projecte d'aquest tipus (sense xifres d'aquest cas concret), l'article de quant costa una pàgina web resumeix el criteri amb què treballem plans i abast.

Stack

Codi propi, exportació estàtica i servei en CDN global (Cloudflare Pages): la web es lliura com a fitxers lleugers, es cacheja a prop del visitant i no arrossega el pes d'un CMS o d'un constructor a cada visita. Menys peces mòbils en producció vol dir menys sorpreses de rendiment i un control més directe sobre el que es publica.

InOut és el cas que fem servir de referència quan parlem de craft a nivell de disseny web premium a Andorra i a la resta del corredor que atenem: la Seu d'Urgell, l'Alt Urgell, la Cerdanya, el Pirineu i Andorra. Mateix estudi, mateix estàndard, sense submarques ni jerarquies entre zones. Si el teu negoci ofereix un servei d'alt nivell i la web actual encara explica la història d'una plantilla, el camí és el mateix: reconstruir des del servei, no maquillar la botiga. El delta que importa no és un llistat de features: és que la presència digital deixi de restar i comenci a estar a l'altura del que ofereixes.