Diseño UX y UI
Interfaces diseñadas a partir de la investigación y probadas con usuarios reales
Investigación de usuarios, arquitectura de la información, diseño de interacción y sistemas de diseño para productos que la gente usa a diario.
Visión general
La gente juzga el software según si puede terminar su tarea. El diseño lo decide: qué aparece en cada pantalla, en qué orden, con qué palabras y qué ocurre cuando algo sale mal.
Empezamos por la investigación, no por las pantallas. Hablamos con las personas que usarán el producto, observamos cómo trabajan y probamos ideas pronto con prototipos. A partir de ahí diseñamos la estructura, los flujos y la interfaz, y creamos un sistema de diseño para que el producto mantenga la coherencia a medida que crece.
Diseñamos conforme a WCAG 2.2 AA de forma sistemática, y para cada idioma que necesite, incluido el árabe y otras escrituras de derecha a izquierda, en las que los diseños se reflejan y la tipografía requiere un cuidado propio. Los diseñadores trabajan junto a los ingenieros durante el desarrollo, para que lo que se publica coincida con lo que se diseñó.
Qué entregamos
Resultados de la investigación
Entrevistas, observación y analítica convertidas en conclusiones claras sobre sus usuarios, sus tareas y sus problemas.
Arquitectura de la información
La estructura del producto: navegación, nomenclatura y cómo se agrupan los contenidos y las funcionalidades.
Flujos de usuario
Cada tarea clave descrita paso a paso, incluidos los errores, los estados vacíos y los casos límite.
Prototipos probados
Prototipos navegables en Figma probados con usuarios reales, con un registro de lo que aprendimos y cambiamos.
Diseño de interfaz
Pantallas para cada punto de ruptura, desde teléfonos hasta pantallas de escritorio grandes, listas para ingeniería.
Sistema de diseño
Tokens, componentes y pautas de uso en Figma y en código con Storybook, compartidos por diseñadores e ingenieros.
Revisión de accesibilidad
Diseños verificados frente a WCAG 2.2 AA en contraste, orden del foco, tamaño de los objetivos táctiles y etiquetas para lectores de pantalla.
Diseños de derecha a izquierda
Diseños, iconos y tipografía reflejados para el árabe y otros idiomas de derecha a izquierda.
Cómo trabajamos
- 01
Investigar
Entrevistamos a los usuarios, revisamos la analítica y las solicitudes de soporte, y observamos el trabajo donde se realiza.
- 02
Definir
Acordamos los problemas que hay que resolver, los usuarios para los que diseñamos y cómo mediremos el éxito.
- 03
Diseñar y prototipar
Bocetamos, estructuramos y prototipamos los flujos clave, empezando con versiones simples y refinándolas a medida que aprendemos.
- 04
Probar con usuarios
Probamos los prototipos con usuarios reales, corregimos lo que les confunde y volvemos a probar.
- 05
Entregar y acompañar el desarrollo
Entregamos los diseños y componentes, revisamos lo que desarrolla el equipo de ingeniería y ajustamos con ellos.
Tecnologías
- Lenguajes
- TypeScript
- Frameworks
- React
- Pruebas
- axe-core
- Diseño y accesibilidad
- Figma
- Storybook
- WCAG 2.2
Formas de trabajar con nosotros
- Entrega por proyectoXSIS entrega un alcance acordado según criterios de aceptación escritos, con un responsable de entrega designado.
- Equipo dedicadoUn equipo completo que trabaja solo en su producto, gestionado en el día a día por XSIS y dirigido por usted.
- Aumento de personalIngenieros y especialistas que se incorporan a su equipo, trabajan con sus herramientas y dependen de sus responsables.
Preguntas y respuestas
¿Necesitamos investigación de usuarios si ya conocemos a nuestros usuarios?
Usted sabe mucho, y la investigación se apoya en ello. Pone a prueba las hipótesis con las personas que hacen el trabajo y a menudo revela pasos, soluciones provisionales y términos que nunca llegan a un documento de requisitos. Incluso una ronda breve de entrevistas y pruebas de prototipos antes del desarrollo cuesta menos que modificar el software una vez publicado.
Enlace a esta pregunta¿Qué determina el costo del trabajo de diseño?
El número de grupos de usuarios y recorridos, cuánta investigación se necesita, si ya existe un sistema de diseño y cuántas plataformas e idiomas debe cubrir el diseño. Rediseñar un producto consolidado con muchas pantallas requiere más que diseñar una herramienta nueva y acotada. Definimos el alcance del diseño por etapas, para que usted pueda revisar las conclusiones y los flujos antes de comprometerse con la interfaz completa.
Enlace a esta pregunta¿Cómo hacen que los diseños sean accesibles?
Diseñamos conforme a WCAG 2.2 AA desde el primer wireframe: contraste de color suficiente, foco visible, un orden de lectura lógico, objetivos táctiles lo bastante grandes para usarlos y una etiqueta para cada control. Revisamos los diseños antes de la entrega y probamos el producto desarrollado con teclado y lectores de pantalla. La accesibilidad incorporada desde el diseño cuesta poco. Añadida después, cuesta mucho.
Enlace a esta pregunta¿Pueden diseñar para el árabe y otros idiomas de derecha a izquierda?
Sí. El diseño de derecha a izquierda es más que invertir la pantalla. La navegación, los indicadores de progreso, los gráficos y los iconos que implican una dirección deben reflejarse, mientras que los números, los logotipos y los controles multimedia normalmente no. El texto en árabe necesita su propia tipografía, su propio tamaño y su propio interlineado. Diseñamos ambas direcciones a la vez y las revisamos con lectores nativos.
Enlace a esta pregunta¿Qué es un sistema de diseño y lo necesitamos?
Un sistema de diseño es un conjunto compartido de colores, tipografía, espaciado y componentes, con pautas sobre cuándo usar cada uno, sincronizado entre los archivos de diseño y el código. Lo necesita cuando varios equipos o productos deben verse y comportarse de forma coherente, o cuando un producto va a crecer durante años. Para una única herramienta pequeña, suele bastar con una biblioteca de componentes más ligera.
Enlace a esta pregunta¿Cómo trabajan sus diseñadores con los ingenieros?
En el mismo equipo y al mismo ritmo. Los diseñadores participan en la planificación, entregan los diseños y componentes con sus estados y su comportamiento documentados, y revisan lo que se desarrolla antes de publicarlo. Los ingenieros participan pronto en la investigación y en las revisiones de diseño, para detectar las ideas difíciles de desarrollar antes de pulirlas.
Enlace a esta pregunta¿Quién es propietario del código y del trabajo que producen?
La propiedad intelectual del trabajo que desarrollamos para usted es suya desde el primer commit, sin ningún trámite de cesión al final. Esto incluye el código a medida, la documentación y los demás entregables creados para usted. Lo que aportamos y ya existía antes, como herramientas o bibliotecas internas, sigue siendo nuestro, y usted recibe una licencia para usarlo en sus sistemas. Los componentes de código abierto mantienen sus propias licencias, y se los enumeramos.
Enlace a esta preguntaCuéntenos qué necesita desarrollar o conectar.
Describa los sistemas, los plazos y las restricciones. Los ingenieros adecuados se encargan a partir de ahí.
- Nuestro equipo le llamará en un plazo de 24 horas, en la franja horaria que usted prefiera
- Nuestro equipo está disponible 24/7