Diseño UX/UI · Ibagué y Bogotá

Diseño UX/UI para productos digitales en Colombia

Investigación de usuarios, arquitectura de información, wireframes y sistemas de diseño. Resolvemos primero cómo funciona tu producto y después cómo se ve, porque un sitio bonito que confunde al usuario no sirve de nada.

Wireframes validados antes del código
Entregables que puedes ver aquí
Equipo con 27 años combinados en diseño
Sistema de componentes de interfaz diseñado para la plataforma médica Docred

Sistema de componentes de interfaz. Librería de UI reutilizable diseñada para la plataforma de credenciales médicas Docred. Es uno de los entregables que verás en detalle más abajo.

Los fundamentos

UX y UI no son lo mismo, y confundirlos cuesta dinero

Mucha gente usa los dos términos como sinónimos. La diferencia importa porque determina qué le vas a pedir a tu proveedor y qué deberías recibir.

UX
User Experience · Experiencia de usuario

Cómo funciona el producto. Qué pasos da el usuario, en qué orden, qué información necesita en cada momento y dónde se atasca. Se resuelve antes de pensar en colores, con investigación, mapas de flujo y wireframes.

Ejemplo real: un formulario de registro con demasiados campos hace que la gente abandone a mitad de camino. Eso es un problema de UX, y ningún cambio de color lo arregla.
UI
User Interface · Interfaz de usuario

Cómo se ve y se siente. Tipografía, color, espaciado, jerarquía visual, estados de los botones y coherencia entre pantallas. Se construye sobre la estructura que definió el UX, no al revés.

Ejemplo real: un botón principal que no se distingue de los secundarios hace que el usuario no sepa qué acción es la importante. Eso es UI, y sí se arregla con decisiones visuales.
Qué incluye el servicio

Lo que trabajamos en un proyecto de UX/UI

Puedes contratar el proceso completo o solo la parte que necesites. Si ya tienes un equipo de desarrollo, te entregamos el diseño listo para que lo implementen.

Investigación de usuarios

Entendemos a quién le hablas: qué busca, con qué palabras, en qué momento y qué lo frena. También analizamos a tu competencia para saber contra qué compites.

Arquitectura de información

Definimos el mapa completo del sitio: qué secciones existen, cómo se agrupan y cómo se llega a cada una. Es el plano antes de construir.

Wireframes y flujos

Prototipos en baja fidelidad de cada pantalla y cada paso del recorrido. Aprobamos la lógica contigo antes de invertir tiempo en el diseño visual.

Diseño de interfaz (UI)

Identidad visual aplicada al producto: paleta, tipografía, iconografía y jerarquía. Coherente con tu marca y consistente en todas las pantallas.

Sistema de componentes

Librería de elementos reutilizables (botones, campos, tarjetas, estados) para que tu producto crezca sin perder consistencia ni rehacer diseño cada vez.

Auditoría UX de sitios existentes

¿Ya tienes un sitio que no convierte? Revisamos los puntos de fricción y te entregamos un documento con los problemas priorizados por impacto.

Metodología

Nuestro proceso, con entregable en cada paso

En cada etapa recibes algo concreto que puedes revisar y aprobar. No hay saltos al vacío ni sorpresas al final.

01

Investigación y estrategia

Analizamos a tu audiencia, sus necesidades y a tu competencia directa. Revisamos qué hacen otros en tu sector, incluyendo su línea gráfica y sus decisiones de color, para saber dónde te conviene parecerte y dónde diferenciarte.

Entregable: documento de hallazgos y estrategia
02

Arquitectura de información

Definimos el mapa del sitio o del producto: qué secciones existen, cómo se agrupan y cómo navega el usuario entre ellas. Este paso evita el error más común, que es diseñar pantallas bonitas dentro de una estructura que nadie entiende.

Entregable: mapa de sitio y flujo de navegación
03

Wireframes y prototipado

Construimos cada pantalla en baja fidelidad para validar la lógica: qué información va primero, dónde están las acciones, cómo se recupera el usuario de un error. Apruebas esto antes de que se defina un solo color.

Entregable: wireframes de cada pantalla y flujo
04

Diseño de interfaz (UI)

Sobre la estructura aprobada aplicamos la identidad visual: paleta, tipografía, iconografía y jerarquía. Construimos también el sistema de componentes, para que el producto pueda crecer después sin perder coherencia.

Entregable: diseño visual y sistema de componentes
05

Revisión y entrega

Revisamos el diseño en dispositivos reales, verificamos los estados de cada componente (vacío, cargando, error, éxito) y entregamos los archivos listos para desarrollo, con las especificaciones que tu equipo técnico necesita.

Entregable: archivos y especificaciones para desarrollo
Trabajo real

Entregables que puedes ver

Casi todas las agencias hablan de “diseño centrado en el usuario”. Muy pocas muestran los documentos que produce ese proceso. Estos son algunos de los nuestros.

Cliente de Macgráficas · Sector salud

Oncolife · IPS de tratamiento oncológico

Rediseño completo con investigación previa y nueva arquitectura de información

El reto

  • Un sitio anticuado que no reflejaba el nivel de la institución.
  • La información estaba dispersa: un paciente o un familiar no encontraba fácilmente qué servicios existían ni cómo acceder a ellos.
  • Quien llega a una IPS oncológica busca información sensible, a veces en un momento difícil. La navegación tenía que ser clara y sin fricción.

Lo que hicimos

  • Análisis de competencia del sector salud: línea gráfica, uso del color y estructura de contenidos de otras instituciones.
  • Investigación de palabras clave para entender cómo busca información un paciente real.
  • Nueva arquitectura de información y flujo de navegación completo, definido antes de diseñar una sola pantalla.
  • Diseño de interfaz alineado a la identidad de la institución y pensado para lectura cómoda.
Mapa de arquitectura de información y flujo de navegación del sitio web de Oncolife, con las secciones de portal de pacientes, servicios, sobre nosotros, blog, PQRS y citas
Arquitectura de informaciónMapa completo de secciones y navegación
Sitio web de Oncolife rediseñado por Macgráficas
Resultado finalSitio publicado y en funcionamiento
Trayectoria previa del equipo · Producto digital

Docred · Plataforma de credenciales médicas

Rediseño de home, flujo de registro y sistema de componentes
Aclaración: Docred no fue cliente de Macgráficas. Este proyecto lo desarrolló Miguel Andrés Cumaco, hoy CEO de la agencia, durante su trayectoria profesional previa. Lo incluimos porque es el ejemplo más completo del método de UX que aplicamos, y porque los entregables son públicos y verificables.

El reto

  • El home no comunicaba el valor del producto a un médico o estudiante que llegaba por primera vez.
  • El registro tenía demasiados campos y pasos poco intuitivos, y los usuarios abandonaban antes de completar el onboarding.
  • No existía una librería de componentes: cada pantalla nueva se diseñaba desde cero.

Lo que se hizo

  • Nueva arquitectura visual del home, con propuesta de valor directa y jerarquía clara.
  • Wireframes del flujo de registro completo, por etapas progresivas, validados antes de tocar código.
  • Diseño de los estados de validación del login: errores que orientan en lugar de frustrar.
  • Sistema de componentes reutilizable para permitir el crecimiento del producto.
Propuesta de rediseño del home de Docred con nueva arquitectura visual
Rediseño del homeNueva jerarquía visual y llamado a la acción
Wireframes del proceso de registro y onboarding de Docred
Wireframes de onboardingFlujo de registro paso a paso
Diseño de los estados de validación del proceso de login de Docred
Estados de validaciónErrores y confirmaciones del login
Sistema de componentes de interfaz diseñado para Docred
Sistema de componentesLibrería de UI reutilizable

¿Tu sitio recibe visitas pero la gente no completa la acción?

Cuéntanos qué pasa y te decimos si es un problema de UX, de interfaz o de otra cosa. Sin costo.

Hablemos de tu producto
Quiénes lo hacen

Las personas detrás del diseño

Hablas directamente con quien diseña tu producto, no con un intermediario comercial.

Juan David Gutiérrez, especialista en diseño digital de Macgráficas
Juan David Gutiérrez
Especialista en diseño digital
12 años de experiencia

Dirige el diseño visual y la experiencia de usuario: identidad aplicada al entorno digital, wireframes, interfaces y coherencia en todos los dispositivos.

Perfil de LinkedIn
Miguel Andrés Cumaco, CEO de Macgráficas y responsable de investigación de usuarios
Miguel Andrés Cumaco
CEO · Investigación y arquitectura de información
15 años de experiencia

Lidera la fase de investigación: análisis de competencia, comportamiento de búsqueda de los usuarios y arquitectura de contenidos. Responsable del rediseño UX de Docred.

Opiniones verificadas

Lo que dicen nuestros clientes

5.0
★★★★★
Reseñas
en Google
LC
Lorena Castañeda
Hace 2 años · 2 opiniones
★★★★★

“Muy profesional el trabajo realizado, de principio a fin cumplieron con las expectativas que tenía y aportaron aspectos que no había considerado. Seguro volveré a contratar con ellos.”

Reseña verificada en Google
L
Loren Rodríguez Pineda
Hace 2 años · 4 opiniones
★★★★★

“Excelente atención y calidez humana.”

Reseña verificada en Google
AS
Andrés Sánchez
Hace 1 año · 2 opiniones
★★★★★

“5 estrellas son pocas para el trabajo que hacen. Yo vivo encantado con todo el arte, aparte de que te llevan de la mano y con mucha paciencia y amabilidad.”

Reseña verificada en Google
Preguntas frecuentes

Dudas comunes sobre diseño UX/UI

¿Necesito diseño UX/UI si mi sitio ya funciona?
Depende de qué signifique “funciona”. Si el sitio carga y se ve bien pero la gente entra y no te contacta, no compra o abandona un formulario a mitad de camino, eso es exactamente lo que resuelve el UX. La señal más clara es tener tráfico razonable y muy pocas conversiones: el problema casi nunca está en atraer visitas, sino en lo que pasa después. Nuestra auditoría UX te dice dónde está la fricción antes de que inviertas en rediseñar nada.
¿Qué entregables recibo exactamente?
Depende del alcance acordado, pero un proyecto completo incluye: documento de investigación y análisis de competencia, mapa de arquitectura de información, wireframes de cada pantalla, diseño visual final, sistema de componentes y los archivos con especificaciones para el equipo de desarrollo. Todo queda en tu poder. Puedes ver ejemplos reales de estos entregables más arriba en esta misma página.
¿Puedo contratar solo el diseño UX/UI, sin el desarrollo?
Sí, y es más común de lo que parece. Si ya tienes un equipo técnico interno o un proveedor de desarrollo, te entregamos el diseño con las especificaciones necesarias para que lo implementen. También trabajamos al revés: hacer solo la fase de UX (investigación, arquitectura y wireframes) y que otro equipo se encargue del diseño visual.
¿Hacen pruebas con usuarios reales?
Con franqueza: no en todos los proyectos. Las pruebas formales de usabilidad con participantes reclutados tienen un costo que no todos los proyectos justifican, y preferimos decírtelo antes que cobrarte por algo que no vas a recibir. Lo que sí hacemos siempre es validar los flujos contigo y con tu equipo antes de implementar, y revisar el comportamiento real de los usuarios en Analytics una vez el sitio está en línea. Si tu proyecto sí justifica pruebas formales con usuarios, te lo planteamos en la propuesta.
¿Cuánto tiempo toma un proceso de UX/UI?
Dentro de un proyecto web completo, la fase de UX/UI suele tomar entre 1 y 3 semanas de las 3 a 5 que dura el proyecto entero. Como servicio independiente para un producto digital más complejo (plataformas, portales con usuarios registrados, aplicaciones), puede ir de 4 a 6 semanas. Te damos un cronograma por etapas antes de empezar.
¿Cuánto cuesta un proyecto de diseño UX/UI?
No manejamos un precio único porque el rango es muy amplio: no cuesta lo mismo la fase de UX de un sitio corporativo de cinco secciones que el rediseño completo de una plataforma con usuarios registrados y múltiples flujos. Te entregamos una cotización desglosada por etapas, para que veas qué estás pagando y puedas decidir si contratas el proceso completo o solo una parte.
¿El diseño funciona en móviles?
Sí, y no como un añadido al final. Diseñamos considerando desde el principio cómo se comporta cada pantalla en celular, tablet y computador, porque la mayoría de tus usuarios va a llegar desde un móvil. Revisamos el resultado en dispositivos reales, no solo en el simulador del navegador.
¿Trabajan solo sitios web o también productos digitales?
Ambos. Un sitio corporativo y una plataforma con usuarios registrados requieren el mismo método pero distinta profundidad: en un producto digital hay que mapear estados, permisos, errores y flujos de recuperación que un sitio informativo no tiene. El caso de Docred que verás arriba es justamente de este segundo tipo. Si tu proyecto necesita además desarrollo, revisa nuestro servicio de páginas web personalizadas.
Siguiente paso

Cuéntanos qué está fallando en tu producto

Te decimos con franqueza si necesitas un proceso completo de UX/UI o si con ajustes puntuales es suficiente. Cotización sin compromiso y respuesta en menos de 24 horas.

Contenido revisado y actualizado el 27 de julio de 2026 · Macgráficas · NIT 901960868 · Ibagué y Bogotá, Colombia
Update cookies preferences