Caso de estudio · Plataforma B2BCase study · B2B Platform
Residuo que entra,
energía que sale.Waste in,
energy out.
NeoGas convierte el residuo orgánico de sus clientes en biogás renovable y medible. Diseñé dos superficies: una landing que informa y capta diagnósticos, y un panel del cliente para programar recolecciones, revisar métricas y gestionar el servicio.NeoGas turns its clients' organic waste into measurable, renewable biogas. I designed two surfaces: a landing page that informs and captures diagnostics, and a customer dashboard to schedule pickups, review metrics, and manage the service.
El encargoThe brief
Del lado del cliente, el mercado seguía funcionando como hace treinta años: llamadas, pedidos en papel y cero visibilidad sobre cuánto gastás o consumís. Del lado del proveedor, negocios que dependían del boca a boca y perdían clientes por no tener dónde mostrarse. NeoGas Connect nace para cerrar esa brecha: un solo lugar donde pedir, dar seguimiento y gestionar el servicio, y donde los residuos de una empresa dejan de ser un costo para volverse energía y un activo.On the customer's side, the market still ran like it did thirty years ago: phone calls, paper orders, and zero visibility into how much you spend or consume. On the provider's side, businesses that lived on word of mouth and lost clients for having nowhere to show up. NeoGas Connect exists to close that gap: a single place to order, track, and manage the service, and where a company's waste stops being a cost and becomes energy and an asset.
De un pasivo silencioso a un activo medibleFrom a silent liability to a measurable asset
HoyToday
- Residuo que se acumula y genera costoWaste piling up and generating cost
- Recolección informal e impredecibleInformal, unpredictable collection
- Huella de carbono sin medirUnmeasured carbon footprint
- Presión regulatoria en aumentoGrowing regulatory pressure
Con NeoGasWith NeoGas
- Energía renovable de vuelta a la operaciónRenewable energy back into the operation
- Recolección programada y confiableScheduled, reliable collection
- Cada tonelada desviada, medidaEvery ton diverted, measured
- Reportes de cumplimiento listos para usarCompliance reports ready to go
¿Qué hice?What I did
Empecé por la investigación. El mercado tenía dos lados que no se parecían: proveedores que gestionaban todo por teléfono y papel, y usuarios finales (restaurantes, comedores, industrias pequeñas) sin visibilidad de su consumo. No diseñaba una interfaz, diseñaba un puente entre ambos.I started with research. The market had two sides that looked nothing alike: providers running everything on phone calls and paper, and end users (restaurants, canteens, small industry) with no visibility into their consumption. I wasn't designing an interface, I was designing a bridge between the two.
La arquitectura de información resolvió el reto de claridad. NeoGas vende un modelo que suena al revés, así que ordené la landing como una cadena que reencuadra el residuo como activo, explica el biogás en 4 pasos y responde cada objeción antes de que aparezca.Information architecture solved the clarity challenge. NeoGas sells a model that sounds backwards, so I structured the landing as a chain that reframes waste as an asset, explains biogas in 4 steps, and answers every objection before it comes up.
Diseñé dos superficies con un mismo sistema de diseño: la landing, que capta y explica, y el panel del cliente, donde el usuario opera el servicio día a día (programa recolecciones, ve su energía devuelta, su residuo desviado y sus facturas). El UI y el prototipado en Figma fueron la traducción final: pantallas navegables que sirvieron de referencia para el MVP.I designed two surfaces with a single design system: the landing, which captures and explains, and the customer dashboard, where the user runs the service day to day (schedules pickups, sees energy returned, waste diverted, and invoices). The UI and Figma prototyping were the final translation: navigable screens that served as a reference for the MVP.
Cuatro pasos, un ciclo cerradoFour steps, one closed loop
InvestigaciónResearch
Entendí el modelo de residuo-a-energía y a quién sirve: hoteles, restaurantes y productores que generan residuo orgánico.Understood the waste-to-energy model and who it serves: hotels, restaurants, and producers generating organic waste.
ArquitecturaArchitecture
Definí dos productos con objetivos distintos: una landing para informar y captar diagnósticos, y un panel para operar el servicio.Defined two products with different goals: a landing page to inform and capture diagnostics, and a dashboard to run the service.
WireframesWireframes
Bocetos de baja fidelidad para validar jerarquía y flujo antes de pintar píxeles.Low-fidelity sketches to validate hierarchy and flow before painting pixels.
UI y prototipoUI and prototype
Construí un sistema de diseño (tonos tierra, IBM Plex + Hanken Grotesk) y lo apliqué a ambas superficies como prototipos funcionales.Built a design system (earth tones, IBM Plex + Hanken Grotesk) and applied it to both surfaces as functional prototypes.
El panel del cliente, en vivoThe customer dashboard, live
El mismo sistema de diseño llevado a una herramienta operativa: programar recolecciones, leer métricas de energía e impacto, y seguir el calendario del servicio. Exploralo aquí mismo.The same design system carried into an operational tool: schedule pickups, read energy and impact metrics, and follow the service calendar. Explore it right here.
Por qué se ve y se siente asíWhy it looks and feels this way
Cada número es un instrumento de confianzaEvery number is an instrument of trust
Las métricas usan una tipografía monoespaciada de datos para que la energía devuelta, el residuo desviado y el cumplimiento se lean como evidencia, no como decoración.Metrics use a monospaced data typeface so energy returned, waste diverted, and compliance read as evidence, not decoration.
Una paleta que respira tierraA palette that breathes earth
Verde musgo, arcilla y avena: colores que conectan lo orgánico con lo industrial sin caer en el verde 'eco' genérico.Moss green, clay, and oat: colors that connect the organic with the industrial without falling into generic 'eco' green.
De pasivo a activoFrom liability to asset
Toda la narrativa de la landing reencuadra el residuo como recurso. El mismo principio guía el panel: mostrar el valor que vuelve.The whole landing narrative reframes waste as a resource. The same principle guides the dashboard: show the value coming back.
Lo que me llevoWhat I'm taking away
Lo que más creció fue mi forma de investigar. Entré creyendo que el research era un paso previo que se completa y se archiva, y salí entendiendo que define el diseño, no al revés. Fue la investigación la que me dijo que había dos públicos distintos y qué le importaba a cada uno; sin eso, habría diseñado pantallas bonitas para nadie.What grew the most was how I research. I came in believing research was a preliminary step you complete and file away, and I left understanding that it defines the design, not the other way around. It was research that told me there were two distinct audiences and what each one cared about; without it, I'd have designed pretty screens for no one.
Si lo volviera a hacer, validaría con usuarios reales antes de diseñar. Muchas decisiones se apoyaron en investigación de mercado y en supuestos razonables, pero no en probarlas con la gente que las iba a usar. La próxima vez quiero que sean los usuarios, y no yo, quienes confirmen que las decisiones funcionan.If I did it again, I'd validate with real users before designing. Many decisions rested on market research and reasonable assumptions, but not on testing them with the people who'd actually use them. Next time I want the users, not me, to confirm the decisions work.
