MY BeHappy

Rediseño Área Privada

#experienciausuario #interfazusuario #dashboard

Case Study: Refactorización del panel de control

El Cliente

Nuestros clientes pueden utilizar el servicio MY BeHappy, creado como solución para automatizar procesos de facturación, contabilidad y pagos. Con MY, nuestros clientes podrán acceder y gestionar sus datos personales, métodos de pago y suscripciones, entre otros servicios.

La Solicitud

Creamos MY en 2012. Desde entonces y debido a las diversas actualizaciones (incluyendo la corrección de fallos, nuevas características y limitaciones legales) las interfaces quedaron anticuadas. El diseño resultaba antiguo y la experiencia de usuario exige formatos más intuitivos. Así que quisimos hacer que el servicio MY volviera a ser más accesible y atractivo.

La Idea

Para que el uso de MY resultara más ameno y eficaz, necesitábamos rediseñar por completo el área de cliente, siempre teniendo en cuenta el punto de vista de nuestros clientes que se reflejaría en todas las decisiones tomadas desde el diseño inicial mejorando la experiencia de usuario.

El reto

A lo largo de los últimos años, según las necesidades de nuestros clientes o los cambios en la legislación, hemos añadido algunas funciones nuevas en MY que no siempre han resultado muy lógicas. Para que la interfaz volviera a ser intuitiva, empezamos de cero a construir su estructura hasta conseguir el diseño óptimo.

Nuestro Trabajo

Nuestro Papel

Dado que era un proyecto interno, nosotros mismos llevamos a cabo todas las fases necesarias contando con la participación en el proceso de algunos de nuestros colaboradores y clientes. Así hicimos desde la fase de formulación del objetivo del proyecto hasta la fase de desarrollo de las nuevas interfaces.

El Proceso

Al inicio de nuestra fase de descubrimiento, llevamos a cabo distintas técnicas de user research con el objetivo de crear una nueva arquitectura de la información. La arquitectura de la información es el arte y la ciencia de organizar y etiquetar interfaces para facilitar la búsqueda y usabilidad. Con el fin de contar con distintos puntos de vista sobre cuál sería la mejor interfaz, permitimos que nuestro equipo creara su propia estructura. Queríamos tener en cuenta a los usuarios frecuentes que más tiempo pasaron en la plataforma desde el principio de forma que las tareas que realizaban con más frecuencia fueran aún más eficientes.
Nuestro equipo creó la mejor estrategia de contenido mediante ordenación de las mismas en tarjetas (card sorting): se trata de una técnica que se lleva a cabo habitualmente utilizando post-its pero, dado que trabajamos en remoto hemos utilizado una herramienta online para este fin. Colocamos todas las páginas necesarias en OptimalSort y a continuación le pedimos a la gente que las ordenaran según mejor consideraran. Una vez puesto en común el resultado, seríamos capaces de decidir cuál era la mejor estructura.

Arquitectura de la información

La arquitectura de la información es el arte y la ciencia de organizar y etiquetar interfaces para facilitar la búsqueda y usabilidad.


Para tener perspectivas distintas de la mejor interfaz, dejamos que nuestro equipo creara su propia Arquitectura de la información. Queríamos tener en cuenta a los usuarios frecuentes que más tiempo pasaron en la plataforma desde el principio de forma que las tareas que realizaban con más frecuencia fueran aún más eficientes.

Card Sorting

La ordenación de tarjetas (card sorting) es una técnica utilizada para facilitar el diseño o evaluar la arquitectura de la información. Se anota toda la información en post-its (físicos o en línea). Para este proyecto, esta información son todas las secciones existentes de MY. A continuación, una persona o el equipo completo puede juntar la información y reordenarla de forma que al terminar el proceso se obtiene el mejor rediseño de la estructura.


Esta técnica resulta agradable pues es asequible, rápida y sencilla, involucrando además a cualquier persona durante el proceso. Podrías hacerlo con tu equipo, tus socios o usuarios.

mobile prototypes
mobile prototypes
mobile prototypes
Hemos creado el primer medio de interfaz de usuario en diagramas funcionales. Consideramos que un diagrama funcional es un modelo en el que nos centramos en las estructuras, priorizando la ubicación de los elementos antes de invertir tiempo en los artefactos visuales. Esto nos permite centrarnos únicamente en el concepto a gran escala y no en los pequeños detalles. Podemos utilizar diagramas funcionales para las pruebas rápidas de usabilidad o para pedir feedback y generar conversaciones con el cliente o con nuestros compañeros de trabajo.

Una vez terminado el diagrama funcional podemos empezar a crear el diseño final. Normalmente empezamos a crear la UI (interfaz de usuario) en Sketch y después pasamos a Principle o Figma para las interacciones. En esta fase, nuestros diseñadores pueden ser creativos a la vez que adoptan decisiones basadas en datos fiables. Así, se pueden crear experiencias que sean eficientes para los usuarios, importantes para la comunidad y sostenibles para la empresa.

Estrategia Mobile-First

En la actualidad, todos los diseños deberían ser responsive, optimizados para cualquier tipo de pantalla. Ahora, más que nunca, accedemos al contenido desde distintos dispositivos como móviles, ordenadores, diversos wearables e incluso televisores. El objetivo de MY era facilitar a nuestros clientes el acceso y gestión de sus servicios y datos así que analizamos y adoptamos una perspectiva de diseño mobile-first. Esto fue todo un reto para MY, puesto que muestra muchos datos. ¿Cómo darle algún tipo de sentido a todos estos datos en la pantalla de un móvil que no cuenta con el espacio suficiente para operar?

En la mayoría de las ocasiones, MY se utiliza para comprobaciones rápidas así que necesitábamos asegurarnos de que era fácil realizarlas en un teléfono móvil, aprovechando también las pantallas cada vez más grandes como si fuera un ordenador personal.

La ventaja de empezar con un diseños UI para móvil es que debes priorizar inmediatamente tu contenido, mostrando solo los elementos necesarios. Debes aprovechar al máximo el uso del espacio seleccionando el contenido e interacciones adecuadas. En cuanto el diseño UI móvil está hecho resulta relativamente sencillo incluir el mismo contenido y ordenarlo en un diseño UI más grande para dispositivos de escritorio.
tablet view interface laptop view interface

Los Resultados

Un aspecto clave de nuestro diseño es la incorporación de un panel de control. En esta pantalla de inicio hemos colocado los elementos más usados de forma que el usuario pueda acceder fácilmente. Se trata de una mejora importante de la antigua interfaz, en la que el usuario debía visitar distintas páginas para realizar las operaciones deseadas.


Al final creamos un rediseño completo del mapa del sitio de MY BeHappy en cada página separada. Optimizamos la experiencia de usuario a la vez que presentamos un diseño moderno.

MY BeHappy After Redesign
MY BeHappy Before Redesign

El Futuro

Ahora tenemos en mente distintas opciones para el futuro. Tenemos previsto integrar una herramienta existente en MY para añadir funciones de gestión de proyectos. De esta forma, los usuarios podrán comprobar la fecha de inicio del proyecto, la fase en la que se encuentra en ese momento, etc. y también compartir enlaces y documentación.

Como puedes ver, un diseño solo está terminado cuando se decide que lo está. Todavía tenemos distintas opciones en mente y estamos investigando distintas maneras de mejorar MY BeHappy para nuestros clientes. ¡Ponte en contacto con nosotros para darnos tu opinión!

Inicia hoy tu nuevo proyecto!

Confirmo que he leído y acepto la Política de Privacidad, Política de Cookies y el Aviso Legal.
Contact us Go top