DocPanel
Diseño UI/UX de Aplicación de Salud
para Servicios de Lectura Radiológica
Versión en Modo Claro
DocPanel, el marketplace de radiología más grande del mundo que conecta a proveedores de imágenes médicas y pacientes con una red de más de 700 radiólogos académicos y subespecializados con sede en EE. UU., quienes proporcionan lecturas finales, soporte para optimización de protocolos y más, contrató a The Skins Factory para rediseñar la interfaz de usuario de su destacado servicio de salud. Nuestro equipo de diseño integró de manera fluida un lenguaje visual limpio y elegante, empleando estratégicamente amplios espacios en blanco para mejorar la UI y combatir la fatiga visual. Inspirándonos en la elegancia atemporal del diseño de mediados de siglo, seleccionamos una paleta de colores sofisticada. Tonos refrescantes de verde menta claro interactúan con blanco y grises claros, infundiendo la interfaz con una sensación de profesionalismo sobrio.
Además, nuestro uso estratégico del color va más allá de la mera decoración; cada tono se elige cuidadosamente para complementar el color principal, creando una composición cohesiva y visualmente agradable. Esta integración cohesiva asegura que cada elemento de la interfaz de usuario contribuya de manera fluida a la experiencia general del usuario, mejorando la usabilidad y la participación.
Descargo de responsabilidad: Todos los nombres de pacientes y nombres que no corresponden a pacientes que aparecen en estos trabajos son ficticios. Cualquier parecido con personas reales, vivas o fallecidas, es pura coincidencia.
★★★★★
“Crearon un diseño impresionante que a nuestros médicos y equipo les encanta. No fue una tarea fácil, pero lo lograron.”
Nirish Mathias, Co-Founder, DocPanel
Las Pantallas De Administración
El software había pasado por varias iteraciones antes de nuestra participación. Nuestro enfoque giró principalmente en torno a mejorar la estética visual y la interfaz de usuario. Sin embargo, modificar un diseño sin mejorar su funcionalidad puede resultar desafiante. Para The Skins Factory, la usabilidad sigue siendo la máxima prioridad, por lo que incluso cuando un proyecto se enfoca principalmente en rediseñar los aspectos visuales, a menudo son necesarios ajustes de usabilidad. Una observación evidente fue la falta de espaciado, lo que dificultaba la claridad y el flujo de la UI. Además, el uso de una paleta monocromática de grises cálidos parecía algo apagado y sin fuerza, en nuestra opinión.
Renovamos el esquema de color adoptando una paleta base de negro puro y gris carbón, mientras refinábamos el color principal verde hacia un verde menta de mediados de siglo, atemporal. Para mejorar la legibilidad y el atractivo visual, ampliamos el espaciado de la altura de las filas de las tablas y aumentamos el espacio en blanco circundante. Además, hicimos que tanto la barra lateral como la barra superior de filtros fueran colapsables, brindando mayor flexibilidad a los usuarios. Cuando la barra lateral está colapsada, un simple hover del mouse la expande sobre el área de contenido, asegurando acceso rápido a la navegación principal.
Panel Principal De Administración
Menús Del Panel + Modal
Panel Lateral De Filtros De Tabla Del Dashboard
En la versión anterior de la aplicación, cada columna de la tabla incluía su propio ícono de filtro además del sistema principal de filtros para toda la tabla. Si bien esta configuración permitía a los usuarios profundizar en columnas específicas, nuestro equipo de diseño consideró que saturaba la fila de títulos de las columnas, consumía demasiado espacio y requería demasiados clics. Para simplificar el proceso de filtrado y aliviar la congestión de la tabla, introdujimos un panel lateral deslizable, mejorando la eficiencia sin comprometer la funcionalidad.
Las Pantallas De Radiólogo
Si bien mantuvimos un diseño predominantemente consistente con las pantallas de Administración, reutilizamos el área del encabezado para acomodar información crucial del radiólogo. Esto implicó incorporar nuevos elementos de navegación dentro del marco de la interfaz, junto con información de onboarding ubicada debajo del título de la página. De manera intencional, optamos por mantener el encabezado abierto, proporcionando amplio espacio en blanco en la pantalla, lo que ayuda a enmarcar la tabla con gran cantidad de contenido que se encuentra debajo.
Pantalla De Nuevas Solicitudes
Reconociendo la máxima importancia de los estados Expedited y Stat, implementamos una estrategia de coordinación de color. Al alinear la casilla de verificación y el número de caso con el color de su respectiva etiqueta de estado, aseguramos que estos elementos críticos se destaquen claramente, permitiendo que los radiólogos identifiquen y prioricen rápidamente esos casos mientras se mantiene un diseño limpio.
Pantalla De Casos Overflow
Pantalla De Casos Completados + Pantalla De Casos Activos + Modal De Capacidad Diaria De Casos
Pantalla Principal De Caso
En nuestro rediseño de la pantalla de Caso, no solo nos enfocamos en mejorar su apariencia general, sino que también simplificamos la funcionalidad al consolidar las barras laterales de Studies y Document —que estaban ubicadas en lados opuestos de la pantalla de Caso— en un panel unificado. Esta consolidación fue impulsada por el deseo de optimizar el espacio en pantalla, particularmente en casos donde había pocos documentos adjuntos o ninguno, minimizando el espacio desperdiciado.
Para asegurar un manejo eficiente de la información, implementamos un enfoque segmentado dentro de una sola barra lateral, incorporando barras de desplazamiento para cada sección. Esto permite a los usuarios acceder rápidamente a la información mostrada, manteniendo la claridad y la usabilidad incluso al manejar conjuntos de datos extensos.
Modales De La Pantalla De Caso
Modales De Edición De La Pantalla De Caso
La pantalla del alcance inicial proporcionada a nuestro equipo de diseño contaba con un solo ícono de edición para toda la página. Aunque utilizar un solo ícono de edición no es inherentemente problemático, considerando la gran cantidad de información que los usuarios podían agregar o modificar en secciones específicas, la página se veía algo abrumadora.
Al examinarla más de cerca, descubrimos que la sección principal, Instrucciones Del Caso, contenía información vital a la que los usuarios solo podían acceder al iniciar una edición. Para abordar este problema y mejorar la accesibilidad para el usuario, optamos por dividir esta sección en dos modales distintos. Además, introdujimos un ícono de visualización específicamente para esa parte de Instrucciones Del Caso, permitiendo a los usuarios acceder fácilmente a esta información esencial sin necesidad de editar la sección.
Esta información ahora se puede visualizar sin tener que editar la sección.
La Pantalla Del Cliente
Pantalla Lista Para Asignar
La Plantilla De Tarjeta De Perfil
Mencionamos cómo la usabilidad inevitablemente se convierte en una consideración clave, incluso en los rediseños visuales de interfaces de usuario. El enfoque de DocPanel para las fotos de perfil incluye el uso de banners para indicar el estado de disponibilidad de un radiólogo. Sin embargo, fueron más allá al introducir banners directamente sobre las imágenes de perfil para señalar cancelaciones de licencias pendientes o falta de disponibilidad en estados específicos.
Al rediseñar la parte textual de la tarjeta, observamos que ya mostraba los estados donde un radiólogo tiene licencia, listados con sus abreviaturas. Aprovechando estos datos existentes, optamos por un enfoque más simplificado. En lugar de introducir banners adicionales, incorporamos indicadores codificados por color. Usamos rojo para indicar licencias canceladas y ámbar para cancelaciones pendientes, directamente sobre las abreviaturas de los estados. Esto no solo mantiene la consistencia, sino que también mejora la claridad y la eficiencia al comunicar información importante a los usuarios. Además, desarrollamos cuatro degradados de color destinados específicamente para usarse con las iniciales de los nombres de los radiólogos en los casos en que no hayan subido una foto para su perfil. Cada degradado fue cuidadosamente creado para complementar el color principal verde menta que hemos integrado de manera consistente en todo el diseño de la interfaz de usuario. Esto asegura cohesión visual y mejora el atractivo estético general, manteniendo al mismo tiempo una apariencia profesional y armoniosa en toda la plataforma.
