Liliana Ospina.

Portfolio · Diseño UX/UI y desarrollo frontend

Liliana
Ospina.

ux/ui × web design × ai-assisted dev

Diseño productos digitales que después también construyo: relevo, diseño, desarrollo y entrego, con sistemas de diseño que el equipo puede mantener.

Ver proyectos ↓Escribirme
Retrato de Liliana Ospina
Bariloche, AR41.13° S · 71.30° O

Índice de proyectos

Hakuna AppApp de meditaciónDesign system · onboarding · paywall2022 → hoyRaíces PanesFábrica de panSistema de pedidos · guía visual2026Hakuna for TeamsLanding B2BDiseño web · desarrollo2023Slice TokenFintech · Web314 pantallas · React + Chakra UI2023 → 2025Bot de correosAutomatizaciónPython · Gmail API · DigitalOcean2026

Hakuna App · 2022 → hoy

Un sistema de diseño para una app que invita a respirar

Hakuna es una app de meditación en producción. Normalicé su design system completo en Figma y diseñé el nuevo flujo de prueba gratuita: contador de meditaciones, onboarding y paywall, en modo claro y oscuro.

Rol
Diseño UX/UI y frontend
Stack
Figma · Tokens Studio · React Native
Tipografía
Comfortaa · Poppins · Inter · Caveat
Entregables
Tokens, librería de componentes, pantallas
  • Tokens primero. Color, tipografía y espaciado exportados en JSON para que diseño y código hablen el mismo idioma.
  • Seis variantes del contador. Propuse versiones A–F de la tarjeta "Te quedan 3 meditaciones" para probar tono y jerarquía del llamado a la acción.
  • Un paywall que explica. El onboarding cuenta en tres pasos por qué existe la suscripción antes de pedirla.
Design systemDark modeOnboardingPaywallA/B
Ver en Figma ↗
Home · Claro

Home con saludo, cursos recomendados, recientes con progreso y contenido por situación, lugar y momento del día. Desliza dentro del teléfono.

#7630DD#F9B83B

Raíces Panes · 2026

Cargar un pedido en el celular, con las manos llenas de harina

Sistema de gestión de pedidos para una fábrica de pan. El equipo carga en el celular cliente, productos, cantidades, fecha de entrega, forma de pago y estado; administración revisa todo en escritorio.

Rol
Relevamiento, UX/UI, guía visual
Plataformas
Mobile 390px · Desktop 1440px
Tipografía
Knewave · Montserrat · Manrope
Estado
Guía v1.0 activa
  • Botones de 32px y stepper +/−. Nada de teclados numéricos para cargar cantidades rápido y sin errores.
  • Total siempre visible. Pie fijo con el total y un botón que solo se activa cuando el pedido está completo.
  • La marca sale del logo. Extraje los verdes del sello y los combiné con terracota para chips de tipo de cliente.
  • Dos exploraciones para la ficha del cliente. Módulos desplegables contra navegación por secciones para datos, productos, historial y cuenta corriente.
Mobile firstB2BUI guideFormularios
Ver en Figma ↗

Prueba cargar un pedido ↓

9:41●●●
Raíces PanesNuevo pedido
MI
1. Cliente seleccionadoCambiar
Panadería El TrigalC.U.I.T 30-71482910-9
Mayorista
2. Carga de productos
Masa Madre CampoHogaza rústica de 800 g · $3.200 / un.
2
Baguette de CampoCorteza crocante · $1.800 / un.
0
Croissant Hojaldre100% manteca · $1.300 / un.
4
MedialunasPor docena · $3.200 / doc.
0
Pan IntegralCon semillas · $2.400 / un.
0
3. Forma de pago
Total del pedido6 productos cargados
$11.600

Elige una forma de pago.

#FAF4EC#A34426#3C2F2F#2C3D2A

Hakuna for Teams · sitio web

Bienestar corporativo con una causa detrás

Landing B2B para vender Hakuna a empresas: cada meditación del equipo suma puntos que se donan a causas como plantar árboles o alimentar animales rescatados. Rediseñé las pantallas y desarrollé la página.

Rol
Diseño web y desarrollo
Objetivo
Pedidos de demo
  • Objeciones antes que beneficios. La sección "cuidar a tu equipo es fácil" responde implementación, impacto y evidencia en tres tarjetas.
  • Comparativa directa. Tabla Hakuna vs. otras apps para que el comprador justifique la decisión internamente.
  • Un solo llamado. Todos los botones llevan al formulario de contacto para pedir una demo.
Landing pageB2BResponsive
Ver sitio ↗Ver en Figma ↗
Captura completa de business.hakuna.world en desktop

Captura del sitio en producción. Se puede hacer scroll dentro de la ventana.

Slice Token · 2023 → 2025

Invertir en la carrera de tu tenista favorito desde USD 20

Slice Token es una plataforma Web3 donde los fans compran tokens de jugadores de tenis y golf y reciben dividendos de sus premios. Cuando ingresé, el flujo de compra estaba repartido entre modales y un widget externo. Hice benchmark, rediseñé la arquitectura visual y el checkout, y después programé el frontend en React y Chakra UI.

Ver sitio ↗Figma: diseño ↗Figma: pantallas ↗
Rol
Diseño UX/UI y frontend
Stack
React · Next.js · Chakra UI · Web3
Pantallas
14 en esta muestra
Breakpoints
1920 · 768 · 375 px
  1. Arquitectura visualFlujos y pantallas base que después tomó el equipo de diseño.
  2. Flujo de pagoSaldo propio, tarjetas, Binance, Rapipago, transferencia y carga de USDC.
  3. Frontend completoInterfaces responsive en React + Chakra UI e integración con servicios Web3.

Automatización · 2026

Un bot que lee el correo para que nadie tenga que hacerlo

Servicio en Python que monitorea Gmail, detecta solicitudes de capacitación y las acepta automáticamente en la plataforma web. Desplegado en DigitalOcean y construido con agentes de IA.

Rol
Análisis, desarrollo, deploy
Stack
Python · Playwright · Gmail API
Resultado
Cero seguimiento manual
Alertas
En tiempo real
PythonGmailDigitalOceanClaude Code

$ python bot_watcher.py

Registro de ejemplo de una ejecución.

Cómo trabajo

Hablo el idioma del cliente y el del equipo técnico

  1. 01

    Relevo

    Entiendo el negocio, quién usa el producto y en qué contexto.

  2. 02

    Diseño

    Flujos, pantallas y un sistema de tokens y componentes reutilizables.

  3. 03

    Desarrollo

    Programo en React y Next.js y uso agentes de IA para acelerar.

  4. 04

    Entrego

    Procesos documentados y clientes que saben en qué fase están.

Diseño

  • Figma
  • Design systems
  • Prototipado
  • UX research

Tecnología

  • React / Next.js
  • React Native
  • TypeScript
  • Python · FastAPI

IA y automatización

  • Claude Code
  • Agentes de IA
  • APIs · Bots

Gestión

  • Scrum · Kanban
  • Notion · Jira · Trello
  • Roadmaps · KPIs